/* ============================================================
   Domenico Di Siena — Design System
   Global entry point. Consumers link THIS file only.
   Order matters: fonts → tokens → semantic layers.
   ============================================================ */
/* ============================================================
   Domenico Di Siena — WEBFONTS
   Six families loaded from Google Fonts CDN.
   Display faces rotate per direction:
     manifiesto → Bricolage Grotesque   solar → Newsreader   vanguardia → Syne
   Body: Space Grotesk (manifiesto/vanguardia) · Spectral (solar)
   Mono (constant across directions): Space Mono
   ------------------------------------------------------------
   NOTE: served via CDN @import rather than self-hosted woff2 so
   consumers always get the full character sets. If you need
   offline/self-hosted binaries, drop woff2 files here and swap
   these @imports for @font-face rules.
   ============================================================ */

/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/ee97f31b5a.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;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/094ba9c342.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;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/11f6ab2d0f.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;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/ee97f31b5a.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;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/094ba9c342.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;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/11f6ab2d0f.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;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/ee97f31b5a.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;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/094ba9c342.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;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/11f6ab2d0f.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;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/ee97f31b5a.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;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/094ba9c342.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;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/11f6ab2d0f.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;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/ee97f31b5a.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;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/094ba9c342.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;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/11f6ab2d0f.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;
}

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* greek */

/* latin-ext */

/* latin */

/* greek */

/* latin-ext */

/* latin */

/* greek */

/* latin-ext */

/* latin */

/* greek */

/* latin-ext */

/* latin */

/* greek */

/* latin-ext */

/* latin */

/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/c40fec4ca5.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;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/1742d56d13.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;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/c0781ea2f2.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;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/c40fec4ca5.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;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/1742d56d13.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;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/c0781ea2f2.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;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/c40fec4ca5.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;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/1742d56d13.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;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/c0781ea2f2.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;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/c40fec4ca5.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;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/1742d56d13.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;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/c0781ea2f2.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;
}

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */
@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/9f4d860fba.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;
}
/* latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/f9de4e896b.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;
}
/* latin */
@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/43cf27aa96.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;
}
/* vietnamese */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/f70052cd5b.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;
}
/* latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/68c6b8516d.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;
}
/* latin */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/e2ee2d370f.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;
}
/* vietnamese */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/e2eae328d2.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;
}
/* latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/646b6f2792.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;
}
/* latin */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/d0c504bd8f.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;
}

/* ============================================================
   Domenico Di Siena — COLOR SYSTEM
   One personal brand, three visual DIRECTIONS, five color PANES.
   ------------------------------------------------------------
   DIRECTIONS (typographic personality + accent):
     manifiesto  · bold activist  (DEFAULT)
     solar       · warm editorial
     vanguardia  · dark avant-garde
   PANES (mood applied per section/sub-brand):
     base · deep · warm · nature · night
   ------------------------------------------------------------
   HOW IT WORKS (all single-attribute scopes, no compound selectors):
     1. [data-direction] sets per-pane INTERMEDIATE vars (--p-<pane>-<role>)
        for that direction, plus fonts / accent-on / cursor-blend.
     2. [data-pane] maps the SEMANTIC aliases (--surface, --ink, --muted,
        --line, --accent, --tint) to the active direction's intermediates.
   Set data-direction once on a root, data-pane per section.
   Components only ever read the semantic aliases.
   ============================================================ */

/* ---------- 1. RAW REFERENCE PALETTE ---------- */
/* Every direction × pane × role, frozen for docs/specimens. */
:root {
  /* solar */
  --dds-solar-accent: #C9542F; --dds-solar-accent-on: #FBF1E2;
  --dds-solar-base-bg: #F3EAD9; --dds-solar-base-fg: #241B12; --dds-solar-base-sub: #6F6253; --dds-solar-base-line: #D7CAB2; --dds-solar-base-accent: #C9542F; --dds-solar-base-tint: rgba(201,84,47,.06);
  --dds-solar-deep-bg: #2A3A2E; --dds-solar-deep-fg: #F1E9D8; --dds-solar-deep-sub: #A7B49E; --dds-solar-deep-line: #45564A; --dds-solar-deep-accent: #E0925A; --dds-solar-deep-tint: rgba(255,255,255,.04);
  --dds-solar-warm-bg: #BD5A36; --dds-solar-warm-fg: #FBF1E2; --dds-solar-warm-sub: #F2CBB2; --dds-solar-warm-line: #D17F5E; --dds-solar-warm-accent: #FBF1E2; --dds-solar-warm-tint: rgba(251,241,226,.07);
  --dds-solar-nature-bg: #5E6B45; --dds-solar-nature-fg: #F4EFDD; --dds-solar-nature-sub: #C9CDA9; --dds-solar-nature-line: #79855B; --dds-solar-nature-accent: #E8B271; --dds-solar-nature-tint: rgba(255,255,255,.05);
  --dds-solar-night-bg: #1A130D; --dds-solar-night-fg: #EFE3D0; --dds-solar-night-sub: #9A8B76; --dds-solar-night-line: #34281C; --dds-solar-night-accent: #E0925A; --dds-solar-night-tint: rgba(224,146,90,.05);
  /* manifiesto */
  --dds-manifiesto-accent: #FF3D11; --dds-manifiesto-accent-on: #0E0E0C;
  --dds-manifiesto-base-bg: #E9E5D7; --dds-manifiesto-base-fg: #0E0E0C; --dds-manifiesto-base-sub: #56524A; --dds-manifiesto-base-line: #0E0E0C; --dds-manifiesto-base-accent: #FF3D11; --dds-manifiesto-base-tint: rgba(255,61,17,.08);
  --dds-manifiesto-deep-bg: #0E0E0C; --dds-manifiesto-deep-fg: #E9E5D7; --dds-manifiesto-deep-sub: #918E84; --dds-manifiesto-deep-line: #E9E5D7; --dds-manifiesto-deep-accent: #FF3D11; --dds-manifiesto-deep-tint: rgba(255,255,255,.05);
  --dds-manifiesto-warm-bg: #FF3D11; --dds-manifiesto-warm-fg: #0E0E0C; --dds-manifiesto-warm-sub: #3A0F05; --dds-manifiesto-warm-line: #0E0E0C; --dds-manifiesto-warm-accent: #0E0E0C; --dds-manifiesto-warm-tint: rgba(20,17,12,.07);
  --dds-manifiesto-nature-bg: #14241A; --dds-manifiesto-nature-fg: #E9E5D7; --dds-manifiesto-nature-sub: #8FA792; --dds-manifiesto-nature-line: #E9E5D7; --dds-manifiesto-nature-accent: #C8FF3D; --dds-manifiesto-nature-tint: rgba(200,255,61,.06);
  --dds-manifiesto-night-bg: #0E0E0C; --dds-manifiesto-night-fg: #E9E5D7; --dds-manifiesto-night-sub: #8A867C; --dds-manifiesto-night-line: #2A271F; --dds-manifiesto-night-accent: #FF3D11; --dds-manifiesto-night-tint: rgba(255,61,17,.06);
  /* vanguardia */
  --dds-vanguardia-accent: #FF6A4D; --dds-vanguardia-accent-on: #0D0E14;
  --dds-vanguardia-base-bg: #0D0E14; --dds-vanguardia-base-fg: #ECE8F2; --dds-vanguardia-base-sub: #8A8699; --dds-vanguardia-base-line: #232531; --dds-vanguardia-base-accent: #FF6A4D; --dds-vanguardia-base-tint: rgba(180,156,255,.08);
  --dds-vanguardia-deep-bg: #090A10; --dds-vanguardia-deep-fg: #ECE8F2; --dds-vanguardia-deep-sub: #7E8BA0; --dds-vanguardia-deep-line: #1C1F2A; --dds-vanguardia-deep-accent: #B49CFF; --dds-vanguardia-deep-tint: rgba(122,160,194,.06);
  --dds-vanguardia-warm-bg: #1A0F12; --dds-vanguardia-warm-fg: #F4E6E2; --dds-vanguardia-warm-sub: #C49A95; --dds-vanguardia-warm-line: #371F22; --dds-vanguardia-warm-accent: #FF6A4D; --dds-vanguardia-warm-tint: rgba(255,106,77,.07);
  --dds-vanguardia-nature-bg: #0C1512; --dds-vanguardia-nature-fg: #E2EEE6; --dds-vanguardia-nature-sub: #7E947F; --dds-vanguardia-nature-line: #1E2A24; --dds-vanguardia-nature-accent: #74E0A8; --dds-vanguardia-nature-tint: rgba(116,224,168,.06);
  --dds-vanguardia-night-bg: #060710; --dds-vanguardia-night-fg: #ECE8F2; --dds-vanguardia-night-sub: #6E6B82; --dds-vanguardia-night-line: #161826; --dds-vanguardia-night-accent: #B49CFF; --dds-vanguardia-night-tint: rgba(180,156,255,.05);
}

/* ---------- 2. DIRECTION SCOPES (intermediates + fonts) ---------- */
/* :root defaults to the manifiesto direction. */
:root {
  --p-base-bg: #E9E5D7; --p-base-fg: #0E0E0C; --p-base-sub: #56524A; --p-base-line: #0E0E0C; --p-base-accent: #FF3D11; --p-base-tint: rgba(255,61,17,.08);
  --p-deep-bg: #0E0E0C; --p-deep-fg: #E9E5D7; --p-deep-sub: #918E84; --p-deep-line: #E9E5D7; --p-deep-accent: #FF3D11; --p-deep-tint: rgba(255,255,255,.05);
  --p-warm-bg: #FF3D11; --p-warm-fg: #0E0E0C; --p-warm-sub: #3A0F05; --p-warm-line: #0E0E0C; --p-warm-accent: #0E0E0C; --p-warm-tint: rgba(20,17,12,.07);
  --p-nature-bg: #14241A; --p-nature-fg: #E9E5D7; --p-nature-sub: #8FA792; --p-nature-line: #E9E5D7; --p-nature-accent: #C8FF3D; --p-nature-tint: rgba(200,255,61,.06);
  --p-night-bg: #0E0E0C; --p-night-fg: #E9E5D7; --p-night-sub: #8A867C; --p-night-line: #2A271F; --p-night-accent: #FF3D11; --p-night-tint: rgba(255,61,17,.06);
  --accent-on: #0E0E0C; /* @kind color */
  --cursor-blend: difference; /* @kind other */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
}

[data-direction="solar"] {
  --p-base-bg: #F3EAD9; --p-base-fg: #241B12; --p-base-sub: #6F6253; --p-base-line: #D7CAB2; --p-base-accent: #C9542F; --p-base-tint: rgba(201,84,47,.06);
  --p-deep-bg: #2A3A2E; --p-deep-fg: #F1E9D8; --p-deep-sub: #A7B49E; --p-deep-line: #45564A; --p-deep-accent: #E0925A; --p-deep-tint: rgba(255,255,255,.04);
  --p-warm-bg: #BD5A36; --p-warm-fg: #FBF1E2; --p-warm-sub: #F2CBB2; --p-warm-line: #D17F5E; --p-warm-accent: #FBF1E2; --p-warm-tint: rgba(251,241,226,.07);
  --p-nature-bg: #5E6B45; --p-nature-fg: #F4EFDD; --p-nature-sub: #C9CDA9; --p-nature-line: #79855B; --p-nature-accent: #E8B271; --p-nature-tint: rgba(255,255,255,.05);
  --p-night-bg: #1A130D; --p-night-fg: #EFE3D0; --p-night-sub: #9A8B76; --p-night-line: #34281C; --p-night-accent: #E0925A; --p-night-tint: rgba(224,146,90,.05);
  --accent-on: #FBF1E2; /* @kind color */
  --cursor-blend: normal; /* @kind other */
  --font-display: 'Newsreader', Georgia, serif;
  --font-body: 'Spectral', Georgia, serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
}

[data-direction="manifiesto"] {
  --p-base-bg: #E9E5D7; --p-base-fg: #0E0E0C; --p-base-sub: #56524A; --p-base-line: #0E0E0C; --p-base-accent: #FF3D11; --p-base-tint: rgba(255,61,17,.08);
  --p-deep-bg: #0E0E0C; --p-deep-fg: #E9E5D7; --p-deep-sub: #918E84; --p-deep-line: #E9E5D7; --p-deep-accent: #FF3D11; --p-deep-tint: rgba(255,255,255,.05);
  --p-warm-bg: #FF3D11; --p-warm-fg: #0E0E0C; --p-warm-sub: #3A0F05; --p-warm-line: #0E0E0C; --p-warm-accent: #0E0E0C; --p-warm-tint: rgba(20,17,12,.07);
  --p-nature-bg: #14241A; --p-nature-fg: #E9E5D7; --p-nature-sub: #8FA792; --p-nature-line: #E9E5D7; --p-nature-accent: #C8FF3D; --p-nature-tint: rgba(200,255,61,.06);
  --p-night-bg: #0E0E0C; --p-night-fg: #E9E5D7; --p-night-sub: #8A867C; --p-night-line: #2A271F; --p-night-accent: #FF3D11; --p-night-tint: rgba(255,61,17,.06);
  --accent-on: #0E0E0C; /* @kind color */
  --cursor-blend: difference; /* @kind other */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
}

[data-direction="vanguardia"] {
  --p-base-bg: #0D0E14; --p-base-fg: #ECE8F2; --p-base-sub: #8A8699; --p-base-line: #232531; --p-base-accent: #FF6A4D; --p-base-tint: rgba(180,156,255,.08);
  --p-deep-bg: #090A10; --p-deep-fg: #ECE8F2; --p-deep-sub: #7E8BA0; --p-deep-line: #1C1F2A; --p-deep-accent: #B49CFF; --p-deep-tint: rgba(122,160,194,.06);
  --p-warm-bg: #1A0F12; --p-warm-fg: #F4E6E2; --p-warm-sub: #C49A95; --p-warm-line: #371F22; --p-warm-accent: #FF6A4D; --p-warm-tint: rgba(255,106,77,.07);
  --p-nature-bg: #0C1512; --p-nature-fg: #E2EEE6; --p-nature-sub: #7E947F; --p-nature-line: #1E2A24; --p-nature-accent: #74E0A8; --p-nature-tint: rgba(116,224,168,.06);
  --p-night-bg: #060710; --p-night-fg: #ECE8F2; --p-night-sub: #6E6B82; --p-night-line: #161826; --p-night-accent: #B49CFF; --p-night-tint: rgba(180,156,255,.05);
  --accent-on: #0D0E14; /* @kind color */
  --cursor-blend: screen; /* @kind other */
  --font-display: 'Syne', system-ui, sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
}

/* ---------- 3. SEMANTIC ALIASES (mapped per pane) ---------- */
/* Default (no data-pane) = base. Each maps to the active direction. */
:root {
  --surface: var(--p-base-bg);
  --ink: var(--p-base-fg);
  --muted: var(--p-base-sub);
  --line: var(--p-base-line);
  --accent: var(--p-base-accent);
  --tint: var(--p-base-tint);
}
[data-pane="base"] {
  --surface: var(--p-base-bg);
  --ink: var(--p-base-fg);
  --muted: var(--p-base-sub);
  --line: var(--p-base-line);
  --accent: var(--p-base-accent);
  --tint: var(--p-base-tint);
}
[data-pane="deep"] {
  --surface: var(--p-deep-bg);
  --ink: var(--p-deep-fg);
  --muted: var(--p-deep-sub);
  --line: var(--p-deep-line);
  --accent: var(--p-deep-accent);
  --tint: var(--p-deep-tint);
}
[data-pane="warm"] {
  --surface: var(--p-warm-bg);
  --ink: var(--p-warm-fg);
  --muted: var(--p-warm-sub);
  --line: var(--p-warm-line);
  --accent: var(--p-warm-accent);
  --tint: var(--p-warm-tint);
}
[data-pane="nature"] {
  --surface: var(--p-nature-bg);
  --ink: var(--p-nature-fg);
  --muted: var(--p-nature-sub);
  --line: var(--p-nature-line);
  --accent: var(--p-nature-accent);
  --tint: var(--p-nature-tint);
}
[data-pane="night"] {
  --surface: var(--p-night-bg);
  --ink: var(--p-night-fg);
  --muted: var(--p-night-sub);
  --line: var(--p-night-line);
  --accent: var(--p-night-accent);
  --tint: var(--p-night-tint);
}

/* ============================================================
   Domenico Di Siena — TYPOGRAPHY
   Three fonts per direction, one type role system.
   Display = editorial voice · Body = reading · Mono = labels/meta.
   Font-family vars are set in colors.css (they change with
   data-direction). This file owns the SCALE and role tokens.
   ============================================================ */
:root {
  /* Fluid display scale — used for hero H1, section H2, chapter numbers.
     Values mirror the live site's clamp() ramps. */
  --fs-hero:      clamp(50px, 9vw, 138px); /* @kind font */   /* hero headline */
  --fs-display-1: clamp(40px, 7vw, 104px); /* @kind font */   /* huge thin chapter numeral */
  --fs-display-2: clamp(32px, 5vw, 64px); /* @kind font */    /* section H2 */
  --fs-statement: clamp(27px, 3.7vw, 54px); /* @kind font */  /* pull-quote / statement */
  --fs-h3:        clamp(23px, 2.5vw, 32px); /* @kind font */  /* card / project title */
  --fs-h4:        clamp(20px, 2vw, 24px); /* @kind font */

  /* Body scale */
  --fs-lead:  clamp(17px, 1.35vw, 21px); /* @kind font */     /* hero sub / intro */
  --fs-body:  clamp(16px, 1.2vw, 19px); /* @kind font */      /* running text */
  --fs-sm:    15px; /* @kind font */                          /* card body */

  /* Mono / label scale */
  --fs-eyebrow: 12.5px; /* @kind font */   /* uppercase section eyebrow */
  --fs-meta:    13px; /* @kind font */     /* dates, meta */
  --fs-tag:     11px; /* @kind font */     /* project tags */
  --fs-micro:   10px; /* @kind font */     /* rail numerals */

  /* Line heights */
  --lh-tight:   .94; /* @kind font */   /* display headlines */
  --lh-snug:    1.05; /* @kind font */  /* titles */
  --lh-normal:  1.16; /* @kind font */  /* statements */
  --lh-body:    1.58; /* @kind font */  /* running text */

  /* Letter-spacing */
  --ls-display: -.02em; /* @kind font */  /* tighten large display */
  --ls-tight:   -.01em; /* @kind font */
  --ls-eyebrow: .24em; /* @kind font */   /* wide-tracked uppercase eyebrow */
  --ls-tag:     .16em; /* @kind font */
  --ls-meta:    .04em; /* @kind font */

  /* Display weight varies per direction — Newsreader reads at 500,
     Bricolage at 700, Syne at 700. This is the "headline" default. */
  --fw-display: 500; /* @kind font */
  --fw-body:    400; /* @kind font */
}

/* Direction-specific display weight (source uses heavier weights for the
   grotesque directions). */
[data-direction="manifiesto"] { --fw-display: 700; /* @kind font */ }
[data-direction="vanguardia"] { --fw-display: 700; /* @kind font */ }
[data-direction="solar"]      { --fw-display: 500; /* @kind font */ }

/* ============================================================
   Domenico Di Siena — MOTION
   Editorial, unhurried reveals. Easing + duration change per
   direction (manifiesto snaps, vanguardia glides, solar drifts).
   ============================================================ */
:root {
  /* signature easings */
  --ease-out:   cubic-bezier(.22, 1, .36, 1); /* @kind other */   /* solar drift */
  --ease-snap:  cubic-bezier(.16, 1, .3, 1); /* @kind other */    /* manifiesto / vanguardia */
  --ease-std:   ease; /* @kind other */

  /* reveal (scroll-in) — default = manifiesto */
  --reveal-dur:   .5s; /* @kind other */
  --reveal-ease:  var(--ease-snap);
  --reveal-dist:  46px;    /* translateY start offset */
  --reveal-stagger: .06s; /* @kind other */  /* per-sibling delay inside a group */

  /* pane background cross-fade */
  --bg-dur:  .45s; /* @kind other */

  /* interaction */
  --hover-lift: -2px;        /* buttons/links rise on hover */
  --dur-fast: .3s; /* @kind other */
  --dur-med:  .4s; /* @kind other */
}

/* Direction motion signatures (mirror the live site). */
[data-direction="solar"] {
  --reveal-dur: .95s; /* @kind other */ --reveal-ease: var(--ease-out); --reveal-dist: 32px; --bg-dur: .95s; /* @kind other */
}
[data-direction="manifiesto"] {
  --reveal-dur: .5s; /* @kind other */  --reveal-ease: var(--ease-snap); --reveal-dist: 46px; --bg-dur: .45s; /* @kind other */
}
[data-direction="vanguardia"] {
  --reveal-dur: 1.1s; /* @kind other */ --reveal-ease: var(--ease-snap); --reveal-dist: 26px; --bg-dur: 1.1s; /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root { --reveal-dur: .001s; /* @kind other */ --reveal-dist: 0px; --bg-dur: .001s; /* @kind other */ }
}

/* ============================================================
   Domenico Di Siena — ANIMATION LAYER
   The brand's default motion vocabulary, lifted from the live site.
   Two ways to use it:
     • ZERO-JS  — [data-reveal] elements animate on scroll via
                  scroll-driven timelines (no script needed). Content
                  is fully visible if the browser lacks support or the
                  user prefers reduced motion.
     • ENHANCED — load assets/dds-motion.js for stagger, magnetic pull,
                  the custom cursor, the rotating hero word and the
                  scroll-progress bar. The JS reuses these same keyframes.
   Durations / easings / distances come from tokens/motion.css and
   shift automatically with data-direction.
   ============================================================ */

/* ---------- 1. KEYFRAMES ---------- */
@keyframes dds-reveal-up   { from { opacity: 0; transform: translateY(var(--reveal-dist, 32px)); } to { opacity: 1; transform: none; } }
@keyframes dds-reveal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dds-reveal-scale{ from { opacity: 0; transform: scale(.965); } to { opacity: 1; transform: none; } }
@keyframes dds-reveal-clip { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes dds-reveal-right{ from { opacity: 0; transform: translateX(calc(-1 * var(--reveal-dist, 32px))); } to { opacity: 1; transform: none; } }

/* ambient / continuous */
@keyframes dds-pulse-dot   { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@keyframes dds-drift       { 0% { transform: translateY(0); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0); } }

/* kinetic type (rotating hero word) — used by dds-motion.js */
@keyframes dds-word-in     { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes dds-word-out    { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-14px); } }

/* interaction */
@keyframes dds-underline   { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- 2. ZERO-JS SCROLL REVEALS ---------- */
/* Default is a fade + rise; opt into other flavours with a value:
   data-reveal="fade" | "scale" | "clip" | "right".
   Base state is VISIBLE so no-JS / unsupported browsers show content. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-reveal] {
      animation: dds-reveal-up var(--reveal-ease, ease) both;
      animation-timeline: view();
      animation-range: entry 4% cover 24%;
    }
    [data-reveal="fade"]  { animation-name: dds-reveal-fade; }
    [data-reveal="scale"] { animation-name: dds-reveal-scale; }
    [data-reveal="clip"]  { animation-name: dds-reveal-clip; }
    [data-reveal="right"] { animation-name: dds-reveal-right; }
  }
}

/* ---------- 3. AMBIENT UTILITIES ---------- */
/* The breathing accent dot (chapter markers, "live" indicators). */
[data-pulse] { animation: dds-pulse-dot 2.4s ease-in-out infinite; }
/* Slow decorative float for background marks. */
[data-drift] { animation: dds-drift 6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  [data-pulse], [data-drift] { animation: none !important; }
}

/* ---------- 4. INTERACTION UTILITIES ---------- */
/* Rise on hover (buttons already do this inline; use on any element). */
.dds-lift { transition: transform var(--dur-fast, .3s) var(--ease-out); }
.dds-lift:hover { transform: translateY(var(--hover-lift, -2px)); }

/* Card hover: interior tint wash + lift (matches ProjectCard). */
.dds-card-hover { transition: background-color var(--dur-med, .4s), transform var(--dur-med, .4s); }
.dds-card-hover:hover { background: var(--tint); transform: translateY(-3px); }

/* Draw-in underline for inline links. */
.dds-link { position: relative; text-decoration: none; color: inherit; }
.dds-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur-med, .4s) var(--ease-out);
}
.dds-link:hover::after { transform: scaleX(1); }

/* Whole-page retint transition when data-direction / data-pane flips. */
[data-direction], [data-pane] {
  transition: background-color var(--bg-dur, .45s) var(--ease-out),
              color var(--bg-dur, .45s) var(--ease-out);
}

/* ============================================================
   Domenico Di Siena — SPACING & LAYOUT
   Generous editorial rhythm. Section padding is fluid; the page
   is a single centered measure with a wide gutter.
   ============================================================ */
:root {
  /* base step scale (px) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 30px;
  --sp-7: 44px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* layout */
  --measure:   1240px;                  /* max content width */
  --gutter:    clamp(24px, 5vw, 72px); /* @kind spacing */  /* page side padding */
  --section-y: clamp(80px, 12vh, 150px); /* @kind spacing *//* vertical section rhythm */
  --gap-card:  clamp(16px, 1.5vw, 22px);/* grid gap between cards */

  /* borders & radius — the brand is HARD-EDGED. Corners are square. */
  --radius:      0px;   /* everything is 0 radius by intent */
  --radius-full: 999px; /* only the language-toggle capsule */
  --border:      1px solid var(--line);
  --border-hair: 1px;   /* hairline rules under section headers */

  /* elevation — the brand uses NO drop shadows; depth comes from
     color panes and 1px lines. Kept for rare overlay use only. */
  --shadow-none: none;
  --shadow-overlay: 0 20px 60px -20px rgba(0,0,0,.45);
}