/* ==========================================================================
   SETU — Ram Rajya Mission
   Design system. One stylesheet, no dependencies, no build step.
   Large type is a principle here, not an accessibility afterthought.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* Master size. The A− / A / A+ control rewrites this one value. */
  --base: 20px;

  /* Palette — warm paper, deep ink, saffron accent */
  --saffron:      #D96B14;
  --saffron-deep: #A84E08;
  --saffron-soft: #FCEBD9;
  --indigo:       #1B3A63;
  --indigo-soft:  #E5ECF5;
  --green:        #0E7A52;
  --green-soft:   #E1F2EA;
  --crimson:      #A82F1C;
  --crimson-soft: #FAE6E1;
  --gold:         #B58A2B;

  --ink:    #15202E;
  --ink-2:  #41536B;
  --ink-3:  #71829A;
  --ink-4:  #9AA8BA;

  --paper:   #FCFAF6;
  --paper-2: #F5F0E7;
  --card:    #FFFFFF;
  --line:    #E6DFD2;
  --line-2:  #D3C9B6;

  --shadow-sm: 0 1px 2px rgba(21,32,46,.05), 0 2px 8px rgba(21,32,46,.04);
  --shadow-md: 0 2px 6px rgba(21,32,46,.07), 0 12px 32px rgba(21,32,46,.07);

  --radius:    16px;
  --radius-sm: 10px;
  --maxw:      1200px;
  --measure:   34em;

  --serif: "Newsreader", "Noto Serif Devanagari", "Noto Serif Telugu",
           Georgia, "Nirmala UI", Cambria, serif;
  --sans:  "Inter", "Noto Sans Devanagari", "Noto Sans Telugu",
           system-ui, -apple-system, "Segoe UI", "Nirmala UI", Roboto, Arial, sans-serif;
  --mono:  "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;

  color-scheme: light;
}

[data-theme="dark"]{
  --saffron:      #F0913C;
  --saffron-deep: #FFB268;
  --saffron-soft: #3A2512;
  --indigo:       #8FB6E8;
  --indigo-soft:  #14243A;
  --green:        #4FC593;
  --green-soft:   #0C2A1F;
  --crimson:      #F08A73;
  --crimson-soft: #331611;
  --gold:         #D8B45E;

  --ink:    #EDF1F7;
  --ink-2:  #B3C0D2;
  --ink-3:  #8797AC;
  --ink-4:  #6A7A90;

  --paper:   #0C1119;
  --paper-2: #121A25;
  --card:    #141D2A;
  --line:    #263243;
  --line-2:  #35445A;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.25);
  --shadow-md: 0 2px 6px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.35);

  color-scheme: dark;
}

/* High-contrast is a real mode, not a filter */
[data-contrast="high"]{
  --paper:#FFF; --paper-2:#FFF; --card:#FFF;
  --ink:#000; --ink-2:#111; --ink-3:#222; --ink-4:#333;
  --line:#000; --line-2:#000;
  --saffron:#8A3D00; --indigo:#0B2547; --green:#0A4D34; --crimson:#7A1D0D;
  --shadow-sm:none; --shadow-md:none;
}
[data-theme="dark"][data-contrast="high"]{
  --paper:#000; --paper-2:#000; --card:#000;
  --ink:#FFF; --ink-2:#F2F2F2; --ink-3:#E0E0E0; --ink-4:#CCC;
  --line:#FFF; --line-2:#FFF;
  --saffron:#FFB35C; --indigo:#9FC6F5; --green:#6FE0AE; --crimson:#FF9B84;
}

/* ===== PALETTES START ===== */
/* Six palettes. Each repaints the whole site by overriding tokens only.
   Generated by tools/gen_palettes.py - do not hand-edit this block. */

/* --- Saffron & Paper --- */
:root[data-palette="saffron"]{
  --saffron: #D96B14;
  --saffron-deep: #A84E08;
  --saffron-soft: #FCEBD9;
  --indigo: #1B3A63;
  --indigo-soft: #E5ECF5;
  --gold: #B58A2B;
  --green: #0E7A52;
  --green-soft: #E1F2EA;
  --crimson: #A82F1C;
  --crimson-soft: #FAE6E1;
  --ink: #15202E;
  --ink-2: #41536B;
  --ink-3: #71829A;
  --ink-4: #9AA8BA;
  --paper: #FCFAF6;
  --paper-2: #F5F0E7;
  --card: #FFFFFF;
  --line: #E6DFD2;
  --line-2: #D3C9B6;
  color-scheme: light;
}
:root[data-theme="dark"][data-palette="saffron"]{
  --saffron: #F0913C;
  --saffron-deep: #FFB268;
  --saffron-soft: #3A2512;
  --indigo: #8FB6E8;
  --indigo-soft: #14243A;
  --gold: #D8B45E;
  --green: #4FC593;
  --green-soft: #0C2A1F;
  --crimson: #F08A73;
  --crimson-soft: #331611;
  --ink: #EDF1F7;
  --ink-2: #B3C0D2;
  --ink-3: #8797AC;
  --ink-4: #6A7A90;
  --paper: #0C1119;
  --paper-2: #121A25;
  --card: #141D2A;
  --line: #263243;
  --line-2: #35445A;
  color-scheme: dark;
}
[data-swatch="saffron"]{
  --saffron: #D96B14;
  --saffron-deep: #A84E08;
  --saffron-soft: #FCEBD9;
  --indigo: #1B3A63;
  --indigo-soft: #E5ECF5;
  --gold: #B58A2B;
  --green: #0E7A52;
  --green-soft: #E1F2EA;
  --crimson: #A82F1C;
  --crimson-soft: #FAE6E1;
  --ink: #15202E;
  --ink-2: #41536B;
  --ink-3: #71829A;
  --ink-4: #9AA8BA;
  --paper: #FCFAF6;
  --paper-2: #F5F0E7;
  --card: #FFFFFF;
  --line: #E6DFD2;
  --line-2: #D3C9B6;
  color-scheme: light;
}
:root[data-theme="dark"] [data-swatch="saffron"]{
  --saffron: #F0913C;
  --saffron-deep: #FFB268;
  --saffron-soft: #3A2512;
  --indigo: #8FB6E8;
  --indigo-soft: #14243A;
  --gold: #D8B45E;
  --green: #4FC593;
  --green-soft: #0C2A1F;
  --crimson: #F08A73;
  --crimson-soft: #331611;
  --ink: #EDF1F7;
  --ink-2: #B3C0D2;
  --ink-3: #8797AC;
  --ink-4: #6A7A90;
  --paper: #0C1119;
  --paper-2: #121A25;
  --card: #141D2A;
  --line: #263243;
  --line-2: #35445A;
  color-scheme: dark;
}

/* --- Indigo & Chalk --- */
:root[data-palette="indigo"]{
  --saffron: #2E5C9A;
  --saffron-deep: #1B3A63;
  --saffron-soft: #E4ECF7;
  --indigo: #C2410C;
  --indigo-soft: #FCEBE2;
  --gold: #A8781F;
  --green: #0F6B4F;
  --green-soft: #E2F0EA;
  --crimson: #B02A1F;
  --crimson-soft: #FBE7E4;
  --ink: #111A26;
  --ink-2: #3B4A5E;
  --ink-3: #6B7A8E;
  --ink-4: #95A2B3;
  --paper: #FAFBFD;
  --paper-2: #EFF3F8;
  --card: #FFFFFF;
  --line: #DFE5EE;
  --line-2: #C4CFDE;
  color-scheme: light;
}
:root[data-theme="dark"][data-palette="indigo"]{
  --saffron: #6FA3E8;
  --saffron-deep: #9CC2F2;
  --saffron-soft: #132338;
  --indigo: #F08A4B;
  --indigo-soft: #33200F;
  --gold: #D2B063;
  --green: #4FC593;
  --green-soft: #0C2A20;
  --crimson: #F08A73;
  --crimson-soft: #331713;
  --ink: #EAF0F8;
  --ink-2: #AFBDD0;
  --ink-3: #8492A6;
  --ink-4: #66748A;
  --paper: #0A0F18;
  --paper-2: #101825;
  --card: #121B2A;
  --line: #233043;
  --line-2: #32425A;
  color-scheme: dark;
}
[data-swatch="indigo"]{
  --saffron: #2E5C9A;
  --saffron-deep: #1B3A63;
  --saffron-soft: #E4ECF7;
  --indigo: #C2410C;
  --indigo-soft: #FCEBE2;
  --gold: #A8781F;
  --green: #0F6B4F;
  --green-soft: #E2F0EA;
  --crimson: #B02A1F;
  --crimson-soft: #FBE7E4;
  --ink: #111A26;
  --ink-2: #3B4A5E;
  --ink-3: #6B7A8E;
  --ink-4: #95A2B3;
  --paper: #FAFBFD;
  --paper-2: #EFF3F8;
  --card: #FFFFFF;
  --line: #DFE5EE;
  --line-2: #C4CFDE;
  color-scheme: light;
}
:root[data-theme="dark"] [data-swatch="indigo"]{
  --saffron: #6FA3E8;
  --saffron-deep: #9CC2F2;
  --saffron-soft: #132338;
  --indigo: #F08A4B;
  --indigo-soft: #33200F;
  --gold: #D2B063;
  --green: #4FC593;
  --green-soft: #0C2A20;
  --crimson: #F08A73;
  --crimson-soft: #331713;
  --ink: #EAF0F8;
  --ink-2: #AFBDD0;
  --ink-3: #8492A6;
  --ink-4: #66748A;
  --paper: #0A0F18;
  --paper-2: #101825;
  --card: #121B2A;
  --line: #233043;
  --line-2: #32425A;
  color-scheme: dark;
}

/* --- Vermilion & Ivory --- */
:root[data-palette="vermilion"]{
  --saffron: #C1272D;
  --saffron-deep: #8E1A1F;
  --saffron-soft: #FBE6E4;
  --indigo: #5C4033;
  --indigo-soft: #F2E9E1;
  --gold: #B8860B;
  --green: #3F6B3A;
  --green-soft: #E8F0E4;
  --crimson: #9B2226;
  --crimson-soft: #F9E3E2;
  --ink: #241A14;
  --ink-2: #4F3F33;
  --ink-3: #7A6A5C;
  --ink-4: #A29486;
  --paper: #FDFBF5;
  --paper-2: #F6F0E4;
  --card: #FFFDF8;
  --line: #E8DEC9;
  --line-2: #D2C3A6;
  color-scheme: light;
}
:root[data-theme="dark"][data-palette="vermilion"]{
  --saffron: #E8695F;
  --saffron-deep: #F59288;
  --saffron-soft: #341413;
  --indigo: #C9A88E;
  --indigo-soft: #2A2019;
  --gold: #D9B356;
  --green: #79BE70;
  --green-soft: #16260F;
  --crimson: #F08A73;
  --crimson-soft: #331512;
  --ink: #F5EEE6;
  --ink-2: #CBB9A8;
  --ink-3: #9C8B7C;
  --ink-4: #786A5E;
  --paper: #14100C;
  --paper-2: #1D1813;
  --card: #201A14;
  --line: #352C23;
  --line-2: #4A3D31;
  color-scheme: dark;
}
[data-swatch="vermilion"]{
  --saffron: #C1272D;
  --saffron-deep: #8E1A1F;
  --saffron-soft: #FBE6E4;
  --indigo: #5C4033;
  --indigo-soft: #F2E9E1;
  --gold: #B8860B;
  --green: #3F6B3A;
  --green-soft: #E8F0E4;
  --crimson: #9B2226;
  --crimson-soft: #F9E3E2;
  --ink: #241A14;
  --ink-2: #4F3F33;
  --ink-3: #7A6A5C;
  --ink-4: #A29486;
  --paper: #FDFBF5;
  --paper-2: #F6F0E4;
  --card: #FFFDF8;
  --line: #E8DEC9;
  --line-2: #D2C3A6;
  color-scheme: light;
}
:root[data-theme="dark"] [data-swatch="vermilion"]{
  --saffron: #E8695F;
  --saffron-deep: #F59288;
  --saffron-soft: #341413;
  --indigo: #C9A88E;
  --indigo-soft: #2A2019;
  --gold: #D9B356;
  --green: #79BE70;
  --green-soft: #16260F;
  --crimson: #F08A73;
  --crimson-soft: #331512;
  --ink: #F5EEE6;
  --ink-2: #CBB9A8;
  --ink-3: #9C8B7C;
  --ink-4: #786A5E;
  --paper: #14100C;
  --paper-2: #1D1813;
  --card: #201A14;
  --line: #352C23;
  --line-2: #4A3D31;
  color-scheme: dark;
}

/* --- Peepal & Sand --- */
:root[data-palette="peepal"]{
  --saffron: #2E7D4F;
  --saffron-deep: #1B5E3A;
  --saffron-soft: #E3F1E8;
  --indigo: #B45309;
  --indigo-soft: #FBEDDC;
  --gold: #A67C00;
  --green: #2E7D4F;
  --green-soft: #E3F1E8;
  --crimson: #A8391C;
  --crimson-soft: #FAE8E2;
  --ink: #17241B;
  --ink-2: #3E5144;
  --ink-3: #6D8075;
  --ink-4: #95A69B;
  --paper: #FBFAF4;
  --paper-2: #F0EEE1;
  --card: #FFFFFF;
  --line: #E0DDCB;
  --line-2: #C7C2A9;
  color-scheme: light;
}
:root[data-theme="dark"][data-palette="peepal"]{
  --saffron: #5FC98C;
  --saffron-deep: #8BDCAC;
  --saffron-soft: #0E2A1B;
  --indigo: #F0A057;
  --indigo-soft: #2E2011;
  --gold: #CFAF55;
  --green: #5FC98C;
  --green-soft: #0E2A1B;
  --crimson: #F08A73;
  --crimson-soft: #2F1713;
  --ink: #E9F1EA;
  --ink-2: #AEC2B4;
  --ink-3: #83968A;
  --ink-4: #657668;
  --paper: #0A1210;
  --paper-2: #101A16;
  --card: #131E19;
  --line: #22332B;
  --line-2: #31463A;
  color-scheme: dark;
}
[data-swatch="peepal"]{
  --saffron: #2E7D4F;
  --saffron-deep: #1B5E3A;
  --saffron-soft: #E3F1E8;
  --indigo: #B45309;
  --indigo-soft: #FBEDDC;
  --gold: #A67C00;
  --green: #2E7D4F;
  --green-soft: #E3F1E8;
  --crimson: #A8391C;
  --crimson-soft: #FAE8E2;
  --ink: #17241B;
  --ink-2: #3E5144;
  --ink-3: #6D8075;
  --ink-4: #95A69B;
  --paper: #FBFAF4;
  --paper-2: #F0EEE1;
  --card: #FFFFFF;
  --line: #E0DDCB;
  --line-2: #C7C2A9;
  color-scheme: light;
}
:root[data-theme="dark"] [data-swatch="peepal"]{
  --saffron: #5FC98C;
  --saffron-deep: #8BDCAC;
  --saffron-soft: #0E2A1B;
  --indigo: #F0A057;
  --indigo-soft: #2E2011;
  --gold: #CFAF55;
  --green: #5FC98C;
  --green-soft: #0E2A1B;
  --crimson: #F08A73;
  --crimson-soft: #2F1713;
  --ink: #E9F1EA;
  --ink-2: #AEC2B4;
  --ink-3: #83968A;
  --ink-4: #657668;
  --paper: #0A1210;
  --paper-2: #101A16;
  --card: #131E19;
  --line: #22332B;
  --line-2: #31463A;
  color-scheme: dark;
}

/* --- Copper & Slate --- */
:root[data-palette="copper"]{
  --saffron: #B45F3C;
  --saffron-deep: #8A4529;
  --saffron-soft: #F7E9E2;
  --indigo: #334155;
  --indigo-soft: #E9EDF2;
  --gold: #9A7B25;
  --green: #3F6B52;
  --green-soft: #E6EFEA;
  --crimson: #9E3B2A;
  --crimson-soft: #F8E8E4;
  --ink: #1C1C1A;
  --ink-2: #44443F;
  --ink-3: #71716A;
  --ink-4: #9A9A92;
  --paper: #FAFAF9;
  --paper-2: #F0F0ED;
  --card: #FFFFFF;
  --line: #E2E2DE;
  --line-2: #C9C9C2;
  color-scheme: light;
}
:root[data-theme="dark"][data-palette="copper"]{
  --saffron: #D98A63;
  --saffron-deep: #EBAA88;
  --saffron-soft: #301B12;
  --indigo: #9BB0C9;
  --indigo-soft: #182028;
  --gold: #C4A455;
  --green: #6FBF95;
  --green-soft: #12261C;
  --crimson: #EE8B75;
  --crimson-soft: #2E1613;
  --ink: #F0EFEC;
  --ink-2: #B8B7B0;
  --ink-3: #8B8A83;
  --ink-4: #6B6A64;
  --paper: #0F0F0E;
  --paper-2: #171716;
  --card: #1A1A18;
  --line: #2B2B28;
  --line-2: #3D3D39;
  color-scheme: dark;
}
[data-swatch="copper"]{
  --saffron: #B45F3C;
  --saffron-deep: #8A4529;
  --saffron-soft: #F7E9E2;
  --indigo: #334155;
  --indigo-soft: #E9EDF2;
  --gold: #9A7B25;
  --green: #3F6B52;
  --green-soft: #E6EFEA;
  --crimson: #9E3B2A;
  --crimson-soft: #F8E8E4;
  --ink: #1C1C1A;
  --ink-2: #44443F;
  --ink-3: #71716A;
  --ink-4: #9A9A92;
  --paper: #FAFAF9;
  --paper-2: #F0F0ED;
  --card: #FFFFFF;
  --line: #E2E2DE;
  --line-2: #C9C9C2;
  color-scheme: light;
}
:root[data-theme="dark"] [data-swatch="copper"]{
  --saffron: #D98A63;
  --saffron-deep: #EBAA88;
  --saffron-soft: #301B12;
  --indigo: #9BB0C9;
  --indigo-soft: #182028;
  --gold: #C4A455;
  --green: #6FBF95;
  --green-soft: #12261C;
  --crimson: #EE8B75;
  --crimson-soft: #2E1613;
  --ink: #F0EFEC;
  --ink-2: #B8B7B0;
  --ink-3: #8B8A83;
  --ink-4: #6B6A64;
  --paper: #0F0F0E;
  --paper-2: #171716;
  --card: #1A1A18;
  --line: #2B2B28;
  --line-2: #3D3D39;
  color-scheme: dark;
}

/* --- Marigold & Teal --- */
:root[data-palette="marigold"]{
  --saffron: #E08700;
  --saffron-deep: #A85F00;
  --saffron-soft: #FDF0D8;
  --indigo: #0F766E;
  --indigo-soft: #DEF0EE;
  --gold: #B8860B;
  --green: #0F766E;
  --green-soft: #DEF0EE;
  --crimson: #B03A1F;
  --crimson-soft: #FBE8E2;
  --ink: #1A1A17;
  --ink-2: #44463C;
  --ink-3: #77796B;
  --ink-4: #A0A292;
  --paper: #FFFDF7;
  --paper-2: #F7F2E4;
  --card: #FFFFFF;
  --line: #EAE0C8;
  --line-2: #D4C6A4;
  color-scheme: light;
}
:root[data-theme="dark"][data-palette="marigold"]{
  --saffron: #F5A93A;
  --saffron-deep: #FFC46B;
  --saffron-soft: #33240A;
  --indigo: #4FC9BC;
  --indigo-soft: #0B2523;
  --gold: #DCB75A;
  --green: #4FC9BC;
  --green-soft: #0B2523;
  --crimson: #F08A73;
  --crimson-soft: #311711;
  --ink: #F3F1E8;
  --ink-2: #BDBCAA;
  --ink-3: #8E8D7D;
  --ink-4: #6E6D60;
  --paper: #0E0D09;
  --paper-2: #16150F;
  --card: #191811;
  --line: #2B291E;
  --line-2: #3E3B2C;
  color-scheme: dark;
}
[data-swatch="marigold"]{
  --saffron: #E08700;
  --saffron-deep: #A85F00;
  --saffron-soft: #FDF0D8;
  --indigo: #0F766E;
  --indigo-soft: #DEF0EE;
  --gold: #B8860B;
  --green: #0F766E;
  --green-soft: #DEF0EE;
  --crimson: #B03A1F;
  --crimson-soft: #FBE8E2;
  --ink: #1A1A17;
  --ink-2: #44463C;
  --ink-3: #77796B;
  --ink-4: #A0A292;
  --paper: #FFFDF7;
  --paper-2: #F7F2E4;
  --card: #FFFFFF;
  --line: #EAE0C8;
  --line-2: #D4C6A4;
  color-scheme: light;
}
:root[data-theme="dark"] [data-swatch="marigold"]{
  --saffron: #F5A93A;
  --saffron-deep: #FFC46B;
  --saffron-soft: #33240A;
  --indigo: #4FC9BC;
  --indigo-soft: #0B2523;
  --gold: #DCB75A;
  --green: #4FC9BC;
  --green-soft: #0B2523;
  --crimson: #F08A73;
  --crimson-soft: #311711;
  --ink: #F3F1E8;
  --ink-2: #BDBCAA;
  --ink-3: #8E8D7D;
  --ink-4: #6E6D60;
  --paper: #0E0D09;
  --paper-2: #16150F;
  --card: #191811;
  --line: #2B291E;
  --line-2: #3E3B2C;
  color-scheme: dark;
}

/* ===== PALETTES END ===== */

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  font-size: var(--base);
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.68;
  letter-spacing: -.003em;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow-x: hidden;
}

img,svg,video{ max-width:100%; height:auto; }
[hidden]{ display:none !important; }

h1,h2,h3,h4,h5{
  font-family: var(--serif);
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-.02em;
  font-weight:600;
  font-optical-sizing: auto;
  text-wrap: balance;
}
h1{ font-size: clamp(2.7rem, 7vw, 4.8rem); letter-spacing:-.035em; font-weight:600; }
h2{ font-size: clamp(2rem, 4.6vw, 3.1rem); letter-spacing:-.028em; }
h3{ font-size: clamp(1.45rem, 2.9vw, 1.9rem); letter-spacing:-.02em; }
h4{ font-size: 1.15rem; font-family: var(--sans); font-weight:700; letter-spacing:0; }
h5{ font-size: 1rem;    font-family: var(--sans); font-weight:700; letter-spacing:0; }

p{ margin:0 0 1.05em; }
p, li{ text-wrap: pretty; }
ul,ol{ margin:0 0 1.15em; padding-left:1.35em; }
li{ margin:.4em 0; }
li::marker{ color: var(--saffron); }

a{ color: var(--indigo); text-underline-offset:.18em; text-decoration-thickness:.07em; }
a:hover{ color: var(--saffron); }

strong,b{ font-weight:700; color: var(--ink); }
em,i{ font-style: italic; }

code{
  font-family: var(--mono); font-size:.88em;
  background: var(--saffron-soft); color: var(--ink);
  padding:.1em .4em; border-radius:6px; word-break:break-word;
}

blockquote{
  margin: 2rem 0; padding: 0 0 0 1.4rem;
  border-left: 4px solid var(--saffron);
  font-family: var(--serif); font-size:1.25rem; line-height:1.5; color: var(--ink-2);
}
blockquote cite{ display:block; margin-top:.7rem; font-family:var(--sans); font-size:.82rem;
  font-style:normal; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-3); }

hr{ border:0; border-top:1px solid var(--line); margin:3rem 0; }

::selection{ background: var(--saffron); color:#fff; }

:focus-visible{ outline:3px solid var(--saffron); outline-offset:2px; border-radius:4px; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.wrap{ max-width: var(--maxw); margin-inline:auto; padding-inline: 1.5rem; }
.wrap-narrow{ max-width: 52rem; margin-inline:auto; padding-inline: 1.5rem; }

.section{ padding-block: clamp(3rem, 7vw, 5.5rem); position:relative; }
.section + .section{ border-top:1px solid var(--line); }
.section-alt{ background: var(--paper-2); }

.measure{ max-width: var(--measure); }
.lead{ font-size:1.26rem; line-height:1.55; letter-spacing:-.011em; color: var(--ink-2); max-width: var(--measure); }
.lead-lg{ font-size:1.5rem; line-height:1.45; letter-spacing:-.016em; color: var(--ink-2); max-width: 30em; }

.skip{ position:absolute; left:-9999px; }
.skip:focus{
  left:1rem; top:1rem; z-index:200; background: var(--saffron); color:#fff;
  padding:.7rem 1.1rem; border-radius: var(--radius-sm); font-weight:700;
}

/* Section eyebrow with rule */
.kicker{
  display:flex; align-items:center; gap:.75rem;
  font-size:.74rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color: var(--saffron); margin-bottom:1.1rem;
}
.kicker::after{ content:""; flex:1; height:1px; background: var(--line-2); }

/* Ghost numeral behind a section heading */
.numeral{
  font-family: var(--serif); font-size: clamp(5rem, 16vw, 11rem); line-height:.8;
  color: var(--line); opacity:.55; position:absolute; top:1.5rem; right:1.5rem;
  pointer-events:none; user-select:none; z-index:0; font-weight:700;
}
.section > .wrap{ position:relative; z-index:1; }

/* --------------------------------------------------------------------------
   4. Header / navigation
   -------------------------------------------------------------------------- */
.topbar{
  position: sticky; top:0; z-index:100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
  padding-top: env(safe-area-inset-top, 0px);
}
@supports not (backdrop-filter: blur(1px)){ .topbar{ background: var(--paper); } }

/* Two deliberate rows: brand + controls, then the nav beneath it.
   With twelve sections and 20px base type, one row cannot hold them. */
.topbar-in{
  max-width: var(--maxw); margin-inline:auto;
  padding:.5rem 1.5rem .15rem; display:flex; align-items:center;
  gap:.75rem 1rem; flex-wrap:wrap;
}

.brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--ink); flex:none; }
.brand-mark{
  width:2.5rem; height:2.5rem; flex:none; border-radius:11px;
  background: linear-gradient(145deg, var(--saffron) 0%, var(--saffron-deep) 100%);
  display:grid; place-items:center; color:#fff;
  font-family: var(--serif); font-size:1.25rem; font-weight:700; line-height:1;
  box-shadow: var(--shadow-sm);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name{ font-family:var(--serif); font-size:1.35rem; font-weight:600; letter-spacing:-.01em; }
.brand-sub{ font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }

.nav{
  order:3; flex-basis:100%; display:flex; align-items:center; gap:.1rem;
  overflow-x:auto; scrollbar-width:none; scroll-behavior:smooth;
  border-top:1px solid var(--line); padding:.2rem 0 .1rem; margin-top:.1rem;
  /* fades the right edge so an overflowing row reads as scrollable
     rather than as a row that has been cut off */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}
.nav::-webkit-scrollbar{ display:none; }
.nav a{
  font-size:.76rem; font-weight:600; text-decoration:none; color: var(--ink-2);
  padding:.4rem .55rem; border-radius:7px; white-space:nowrap; flex:none;
}
.nav a:hover{ background: var(--saffron-soft); color: var(--saffron-deep); }
.nav a[aria-current="page"]{ color: var(--saffron-deep); background: var(--saffron-soft); }

.nav-tools{ display:flex; gap:.35rem; align-items:center; margin-left:auto; flex:none; }

.btn{
  font: inherit; font-size:.8rem; font-weight:700; line-height:1; cursor:pointer;
  background: var(--card); color: var(--ink); border:1px solid var(--line-2);
  border-radius:9px; padding:.5rem .7rem; white-space:nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover{ border-color: var(--saffron); color: var(--saffron-deep); }
.btn[aria-pressed="true"]{ background: var(--saffron); border-color: var(--saffron); color:#fff; }

.btn-group{ display:flex; border:1px solid var(--line-2); border-radius:9px; overflow:hidden; }
.btn-group .btn{ border:0; border-radius:0; border-right:1px solid var(--line); }
.btn-group .btn:last-child{ border-right:0; }

.btn-cta{
  font-size:.95rem; padding:.85rem 1.5rem; border-radius:11px;
  background: linear-gradient(145deg, var(--saffron) 0%, var(--saffron-deep) 100%);
  border:0; color:#fff; box-shadow: var(--shadow-sm); text-decoration:none;
  display:inline-flex; align-items:center; gap:.5rem;
}
.btn-cta:hover{ color:#fff; filter:brightness(1.07); box-shadow: var(--shadow-md); }
.btn-ghost{
  font-size:.95rem; padding:.85rem 1.5rem; border-radius:11px;
  background:transparent; border:1px solid var(--line-2); color: var(--ink);
  text-decoration:none; display:inline-flex; align-items:center; gap:.5rem;
}
.btn-ghost:hover{ border-color: var(--saffron); color: var(--saffron-deep); }

/* Language and theme pickers — deliberately visible, not hidden behind an icon */
.picker{
  display:inline-flex; align-items:center; gap:.4rem;
  border:1px solid var(--line-2); border-radius:10px; background:var(--card);
  padding:0 .55rem 0 .6rem; height:2.3rem; cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
}
.picker:hover{ border-color:var(--saffron); box-shadow:0 0 0 3px var(--saffron-soft); }
.picker:focus-within{ border-color:var(--saffron); box-shadow:0 0 0 3px var(--saffron-soft); }
.picker > svg{
  width:1.02rem; height:1.02rem; flex:none; fill:none;
  stroke:var(--saffron); stroke-width:1.7; stroke-linecap:round;
}
.picker select{
  font:inherit; font-size:.8rem; font-weight:700; color:var(--ink);
  border:0; background:transparent; cursor:pointer; appearance:none;
  padding:0 1.1rem 0 0; max-width:11rem; text-overflow:ellipsis;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2371829A' stroke-width='1.7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right center;
}
.picker select:focus{ outline:none; }
.picker select option{ background:var(--card); color:var(--ink); font-weight:600; }

.btn-icon{ display:inline-grid; place-items:center; width:2.3rem; height:2.3rem; padding:0; }
.btn-icon svg{ width:1.05rem; height:1.05rem; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; }
[data-theme="dark"] .btn-icon svg{ fill:currentColor; stroke:none; }

/* Mobile nav */
.nav-toggle{ display:none; }
@media (max-width: 860px){
  .topbar-in{ padding-bottom:.5rem; }
  .nav-toggle{ display:inline-flex; order:2; }
  .nav{
    display:none; order:4; position:static; flex-direction:column; align-items:stretch;
    gap:0; padding:.25rem 0 .5rem; overflow:visible; max-height:70vh; overflow-y:auto;
  }
  .nav.open{ display:flex; }
  .nav a{ font-size:1rem; padding:.7rem .6rem; border-bottom:1px solid var(--line); }
  .nav-tools{ margin-left:0; }
}
@media (max-width: 720px){
  .brand-sub{ display:none; }
  .nav-tools .btn-group{ display:none; }
  .picker select{ max-width:6.5rem; }
}

.progress{ height:3px; background:transparent; }
.progress > span{ display:block; height:100%; width:0;
  background: linear-gradient(90deg, var(--saffron), var(--gold)); transition: width .1s linear; }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden;
  padding-block: clamp(3.5rem, 9vw, 7rem);
  background:
    radial-gradient(ellipse 80% 60% at 78% -10%, var(--saffron-soft) 0%, transparent 62%),
    radial-gradient(ellipse 70% 55% at 8% 105%, var(--indigo-soft) 0%, transparent 60%);
}
.hero-badge{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color: var(--saffron-deep); background: var(--card);
  border:1px solid var(--saffron); border-radius:99px; padding:.42rem 1rem;
  margin-bottom:1.6rem; box-shadow: var(--shadow-sm);
}
.hero-badge::before{ content:""; width:.5rem; height:.5rem; border-radius:50%; background: var(--saffron); flex:none; }
.hero h1{ margin-bottom:.35em; }
.hero h1 .accent{ color: var(--saffron); display:block; }
.hero-actions{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2rem; }
.hero-thesis{
  margin-top:1.6rem; padding-left:1.1rem; border-left:3px solid var(--saffron);
  font-family: var(--serif); font-size:1.08rem; line-height:1.5; font-style:italic;
  color: var(--ink-2); max-width:33em;
}
.hero-note{ margin-top:1.8rem; font-size:.9rem; color: var(--ink-3); max-width:32em; }

/* Ornamental chakra, purely decorative */
.hero-ornament{
  position:absolute; right:-6rem; top:50%; transform:translateY(-50%);
  width:clamp(18rem,38vw,34rem); height:auto; opacity:.10; pointer-events:none;
  color: var(--saffron);
}
@media (max-width: 900px){ .hero-ornament{ display:none; } }

/* --------------------------------------------------------------------------
   6. Grids & cards
   -------------------------------------------------------------------------- */
.grid{ display:grid; gap:1.25rem; }
.g2{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.g3{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.g4{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.split{ display:grid; gap: clamp(2rem,5vw,4rem); grid-template-columns: 1fr; align-items:start; }
@media (min-width: 900px){ .split{ grid-template-columns: 1.05fr .95fr; } }
@media (min-width: 900px){ .split-narrow{ grid-template-columns: .8fr 1.2fr; } }

.card{
  background: var(--card); border:1px solid var(--line); border-radius: var(--radius);
  padding:1.6rem 1.7rem; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card > :last-child{ margin-bottom:0; }
.card-link{ text-decoration:none; color:inherit; display:block; }
.card-link:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--saffron); color:inherit; }
.card-num{
  font-family: var(--serif); font-size:1.6rem; font-weight:700; color: var(--saffron);
  line-height:1; margin-bottom:.6rem; display:block;
}
.card h3, .card h4{ margin-bottom:.5rem; }
.card p{ color: var(--ink-2); font-size:.97rem; }

/* Pillar card with coloured top rule */
.pillar{ border-top:4px solid var(--saffron); }
.pillar:nth-child(3n+2){ border-top-color: var(--indigo); }
.pillar:nth-child(3n+3){ border-top-color: var(--green); }

/* Stats */
.stats{ display:grid; gap:1.25rem 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%,13.5rem),1fr)); }
.stat{ padding:1.3rem 0; border-top:3px solid var(--saffron); min-width:0; }
.stat-num{ font-family: var(--serif); font-size: clamp(1.9rem,3.6vw,2.8rem); font-weight:600; letter-spacing:-.03em;
  line-height:1.05; color: var(--ink); display:block; font-variant-numeric: tabular-nums;
  overflow-wrap:break-word; }
.stat-label{ font-size:.85rem; color: var(--ink-3); margin-top:.5rem; display:block; line-height:1.4; }

/* --------------------------------------------------------------------------
   7. Callouts, tables, details
   -------------------------------------------------------------------------- */
.callout{
  border:1px solid var(--saffron); background: var(--saffron-soft);
  border-radius: var(--radius); padding:1.4rem 1.6rem; margin:2rem 0;
}
.callout > :last-child{ margin-bottom:0; }
.callout-title{ font-weight:800; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--saffron-deep); margin-bottom:.6rem; display:block; }
.callout-info{ border-color: var(--indigo); background: var(--indigo-soft); }
.callout-info .callout-title{ color: var(--indigo); }
.callout-warn{ border-color: var(--crimson); background: var(--crimson-soft); }
.callout-warn .callout-title{ color: var(--crimson); }
.callout-ok{ border-color: var(--green); background: var(--green-soft); }
.callout-ok .callout-title{ color: var(--green); }

.tablewrap{ overflow-x:auto; border:1px solid var(--line); border-radius: var(--radius);
  background: var(--card); margin:1.5rem 0; box-shadow: var(--shadow-sm); }
table{ border-collapse:collapse; width:100%; min-width:34rem; font-size:.95rem; }
th,td{ text-align:left; padding:.85rem 1.1rem; border-bottom:1px solid var(--line); vertical-align:top; }
th{ font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; color: var(--ink-3);
  font-weight:800; white-space:nowrap; background: var(--paper-2); }
tbody tr:last-child td{ border-bottom:0; }
tbody tr:hover{ background: var(--paper-2); }
td strong{ color: var(--ink); }

details{
  background: var(--card); border:1px solid var(--line); border-radius: var(--radius);
  padding:1.1rem 1.4rem; margin-bottom:.8rem; box-shadow: var(--shadow-sm);
}
details[open]{ border-color: var(--saffron); }
summary{ cursor:pointer; font-weight:700; font-size:1.05rem; list-style:none;
  display:flex; gap:.7rem; align-items:baseline; }
summary::-webkit-details-marker{ display:none; }
summary::before{ content:"+"; color: var(--saffron); font-weight:700; font-size:1.2rem; line-height:1; flex:none; }
details[open] summary::before{ content:"−"; }
details > :not(summary){ margin-top:1rem; color: var(--ink-2); }
details > :last-child{ margin-bottom:0; }

/* Red-line list */
.redlines{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.redlines li{
  margin:0; padding:1rem 1.2rem 1rem 3rem; position:relative;
  background: var(--crimson-soft); border:1px solid var(--crimson);
  border-radius: var(--radius-sm); color: var(--ink); font-weight:600;
}
.redlines li::before{
  content:"✕"; position:absolute; left:1.1rem; top:1rem;
  color: var(--crimson); font-weight:800;
}

/* Tag / chip */
.tag{
  display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.06em;
  padding:.24rem .6rem; border-radius:99px; border:1px solid var(--line-2);
  color: var(--ink-2); margin:.15rem .3rem .15rem 0; text-transform:uppercase;
}
.tag-new{ background: var(--saffron-soft); border-color: var(--saffron); color: var(--saffron-deep); }
.tag-ok{ background: var(--green-soft);  border-color: var(--green);  color: var(--green); }
.tag-soon{ background: var(--indigo-soft); border-color: var(--indigo); color: var(--indigo); }

/* Timeline */
.timeline{ list-style:none; padding:0; margin:2rem 0 0; position:relative; }
.timeline::before{ content:""; position:absolute; left:.72rem; top:.6rem; bottom:.6rem;
  width:2px; background: var(--line-2); }
.timeline li{ position:relative; padding:0 0 2rem 3rem; margin:0; }
.timeline li::before{
  content:""; position:absolute; left:0; top:.35rem; width:1.5rem; height:1.5rem;
  border-radius:50%; background: var(--card); border:3px solid var(--saffron);
}
.timeline h4{ margin-bottom:.35rem; }
.timeline p{ color: var(--ink-2); margin-bottom:0; font-size:.97rem; }
.timeline .phase{ font-size:.72rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color: var(--saffron); display:block; margin-bottom:.25rem; }

/* Figures */
figure{ margin:2rem 0; }
figure img, figure svg{
  display:block; width:100%; border-radius: var(--radius);
  border:1px solid var(--line); background: var(--card);
}
/* A portrait illustration at full column width becomes a wall of image.
   Cap the height and centre it instead. */
figure img{ max-height:min(78vh, 40rem); width:auto; max-width:100%; margin-inline:auto; }
figure.figure-wide img{ width:100%; max-height:none; }
/* The home hero band sits edge to edge and is cropped to a wide strip so
   the open sky in the illustration does not read as a blank screen. */
figure.figure-wide{ margin:0; }
figure.figure-wide img{
  border-radius:0; border-left:0; border-right:0;
  aspect-ratio: 32 / 11; object-fit: cover; object-position: 50% 72%;
}
figcaption{ margin-top:.8rem; font-size:.87rem; color: var(--ink-3); line-height:1.5; }

/* Prose block for long-form pages */
.prose > h2{ margin-top:2.6rem; }
.prose > h3{ margin-top:2rem; }
.prose > p, .prose > ul, .prose > ol{ max-width: var(--measure); }

/* --------------------------------------------------------------------------
   8. Calculators / form controls
   -------------------------------------------------------------------------- */
.calc{
  background: var(--card); border:1px solid var(--line); border-radius: var(--radius);
  padding:1.6rem 1.7rem; box-shadow: var(--shadow-sm);
}
.field{ margin-bottom:1.3rem; }
.field label{ display:block; font-size:.85rem; font-weight:700; margin-bottom:.45rem; color: var(--ink-2); }
.field-row{ display:flex; align-items:center; gap:1rem; }
.field output{
  font-family: var(--serif); font-size:1.3rem; font-weight:700; color: var(--saffron-deep);
  font-variant-numeric: tabular-nums; min-width:5.5em; text-align:right; flex:none;
}
input[type="range"]{
  flex:1; -webkit-appearance:none; appearance:none; height:8px; border-radius:99px;
  background: var(--line); outline-offset:4px;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:1.6rem; height:1.6rem; border-radius:50%;
  background: var(--saffron); border:3px solid var(--card); box-shadow: var(--shadow-sm); cursor:pointer;
}
input[type="range"]::-moz-range-thumb{
  width:1.35rem; height:1.35rem; border-radius:50%; background: var(--saffron);
  border:3px solid var(--card); box-shadow: var(--shadow-sm); cursor:pointer;
}
select.input, input.input{
  font:inherit; font-size:.95rem; width:100%; padding:.65rem .8rem;
  border:1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink);
}
.result{
  margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid var(--line);
  display:grid; gap:1rem; grid-template-columns: repeat(auto-fit,minmax(min(100%,9rem),1fr));
}
.result-item{ }
.result-num{ font-family: var(--serif); font-size:1.9rem; font-weight:700; line-height:1;
  color: var(--ink); display:block; font-variant-numeric: tabular-nums; }
.result-label{ font-size:.8rem; color: var(--ink-3); margin-top:.35rem; display:block; }

/* --------------------------------------------------------------------------
   9. App mockup gallery
   -------------------------------------------------------------------------- */
.mockup{
  background: var(--card); border:1px solid var(--line); border-radius: var(--radius);
  overflow:hidden; box-shadow: var(--shadow-sm); display:flex; flex-direction:column;
  transition: transform .18s, box-shadow .18s;
}
.mockup:hover{ transform:translateY(-3px); box-shadow: var(--shadow-md); }
.mockup-shot{ background: var(--paper-2); border-bottom:1px solid var(--line); display:block; width:100%; }
.mockup-body{ padding:1.3rem 1.5rem 1.5rem; flex:1; }
.mockup-body h3{ font-size:1.25rem; margin-bottom:.15rem; }
.mockup-body .sub{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--saffron); font-weight:800; margin-bottom:.7rem; display:block; }
.mockup-body p{ font-size:.94rem; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   10. Reveal-on-scroll
   -------------------------------------------------------------------------- */
/* Only hide what will actually be revealed. Without JavaScript the html
   element never gets the js class, so the content simply stays visible
   instead of disappearing permanently. */
.js .reveal{ opacity:0; transform: translateY(10px); transition: opacity .38s ease, transform .38s ease; }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } }

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.footer{
  border-top:1px solid var(--line); background: var(--paper-2);
  padding-block: 3.5rem 4rem; margin-top:0;
}
.footer-mission{
  font-family: var(--serif); font-size:1.12rem; line-height:1.55; color: var(--ink-2);
  max-width:44em; margin:0 0 2.5rem; padding-bottom:2rem;
  border-bottom:1px solid var(--line);
}
.footer-grid{ display:grid; gap:2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%,13rem),1fr)); }
.footer h4{ font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; color: var(--ink-3); margin-bottom:.9rem; }
.footer ul{ list-style:none; padding:0; margin:0; }
.footer li{ margin:.45rem 0; }
.footer a{ text-decoration:none; color: var(--ink-2); font-size:.95rem; }
.footer a:hover{ color: var(--saffron); }
.footer-note{
  margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line);
  font-size:.87rem; color: var(--ink-3); line-height:1.6;
}
.footer-note p{ max-width:58em; }

/* --------------------------------------------------------------------------
   12. Translation banner
   -------------------------------------------------------------------------- */
.i18n-banner{
  background: var(--indigo-soft); border-bottom:1px solid var(--indigo);
  padding:.7rem 1.5rem; font-size:.87rem; color: var(--ink-2); text-align:center;
}
.i18n-banner a{ font-weight:700; }

/* --------------------------------------------------------------------------
   13. Print
   -------------------------------------------------------------------------- */
@media print{
  :root{ --base:11pt; }
  .topbar,.footer,.hero-ornament,.nav-tools,.i18n-banner,.btn,.btn-cta,.btn-ghost{ display:none !important; }
  body{ background:#fff; color:#000; }
  .hero{ background:none; padding-block:1rem; }
  .card,.callout,details,.tablewrap,.calc,.mockup{ break-inside:avoid; box-shadow:none; border-color:#bbb; }
  .section{ padding-block:1.2rem; border-top:1px solid #bbb; }
  a{ color:#000; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.8em; color:#555; }
  .reveal{ opacity:1; transform:none; }
}