/* ==========================================================================
   Semmozhi design tokens — "writing surfaces"
   The only file allowed to contain raw colour values. Everything else uses
   var(--token). Load order: tokens.css → textures.css → components.css.
   Material colours and texture stacks live in the GENERATED material registry
   block (do not edit it by hand: edit design/realism/registry/registry.json and
   run node design/realism/tools/build_registry.mjs). Check for strays with
   node design/realism/eval/orphan_materials.mjs.
   Notes and the contrast table: ../DESIGN_SYSTEM.md
   ========================================================================== */

/* ---------- Fonts (self-hosted, all SIL OFL 1.1) ---------- */
@font-face{font-family:"Noto Serif Tamil";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/web/noto-serif-tamil-tamil.woff2") format("woff2");
  unicode-range:U+0964-0965,U+0B82-0BFA,U+200C-200D,U+20B9,U+25CC}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/web/fraunces-latin.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:"Fraunces";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/web/fraunces-latin-ext.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:"Fraunces";font-style:italic;font-weight:400 600;font-display:swap;
  src:url("../fonts/web/fraunces-italic-latin.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:"Fraunces";font-style:italic;font-weight:400 600;font-display:swap;
  src:url("../fonts/web/fraunces-italic-latin-ext.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}
/* Historical scripts: the project's own Semmozhi fonts (already shipped in ../fonts/) */
@font-face{font-family:"Semmozhi Brahmi";font-display:swap;src:url("../fonts/SemmozhiBrahmi-Regular.woff2") format("woff2"),url("../fonts/SemmozhiBrahmi-Regular.woff") format("woff")}
@font-face{font-family:"Semmozhi Grantha";font-display:swap;src:url("../fonts/SemmozhiGrantha-Regular.woff2") format("woff2"),url("../fonts/SemmozhiGrantha-Regular.woff") format("woff")}
@font-face{font-family:"Semmozhi Vatteluttu";font-display:swap;src:url("../fonts/SemmozhiVatteluttu-Regular.woff2") format("woff2"),url("../fonts/SemmozhiVatteluttu-Regular.woff") format("woff")}

/* BEGIN GENERATED material registry - node design/realism/tools/build_registry.mjs - do not edit; source: design/realism/registry/registry.json */
/* The material registry. Every material colour, texture stack and fallback on the new pages is defined here and
   only here; components reference these names. The 3D numbers of the same materials are in
   js/realism/materials.params.js (generated from the same registry). Check: node design/realism/eval/orphan_materials.mjs */
:root{
  /* ---- palm_leaf: Palm leaf (palmyra) - gate: keep 2D and improve its shading (eval/gates/palm_leaf_tuned.json) ---- */
  --leaf-centre:#C98A3F; /* flat text area of a leaf */
  --leaf-edge:#A86A2C; /* darker long edges and ends — no text */
  --leaf-bundle:#4A3426; /* stacked leaves seen edge-on */
  --ink-soot:#1E1712; /* script written on the leaf */
  --t4-palm-leaf-p5:#897D69; /* T4 tuned stage albedo ramp, materials/palm_leaf.params.json (CIELAB converted to sRGB) */
  --t4-palm-leaf-p50:#BFA37C;
  --t4-palm-leaf-p95:#FFBF80;
  --mat-t4-palm-leaf:linear-gradient(150deg,var(--t4-palm-leaf-p95) -60%,var(--t4-palm-leaf-p50) 40%,var(--t4-palm-leaf-p5) 160%); /* flat stand-in for the tuned stage (no-WebGL fallbacks) */
  --leaf-hole-dark:color-mix(in srgb,var(--leaf-bundle) 72%,transparent); /* binding hole: worn dark rim */
  --leaf-hole-soft:color-mix(in srgb,var(--leaf-bundle) 28%,transparent); /* binding hole: rim fading into the leaf */
  --leaf-hole-lip:color-mix(in srgb,var(--paper) 30%,transparent); /* binding hole: lit lower lip (light from top-left) */
  --mat-leaf:url(../img/tex/leaf-spots.svg) 0 0/100% 100%,url(../img/tex/leaf-grain.svg) 0 0/48px 48px,url(../img/tex/leaf-fibre.svg) 0 0/480px 160px,url(../img/tex/photo-fibre.webp) 0 0/336px 190px,linear-gradient(to right,color-mix(in srgb,var(--leaf-edge) 80%,transparent),transparent 2.2%,transparent 97.8%,color-mix(in srgb,var(--leaf-edge) 80%,transparent)),linear-gradient(to bottom,var(--leaf-edge),var(--leaf-centre) 17% 83%,var(--leaf-edge));
  --mat-leaf-v:url(../img/tex/leaf-spots-v.svg) 0 0/100% 100%,url(../img/tex/leaf-grain.svg) 0 0/48px 48px,url(../img/tex/leaf-fibre-v.svg) 0 0/160px 480px,linear-gradient(to bottom,var(--leaf-edge),transparent 3%,transparent 97%,var(--leaf-edge)),linear-gradient(to right,var(--leaf-edge),var(--leaf-centre) 11% 89%,var(--leaf-edge));
  --mat-leaf-blend:multiply,overlay,overlay,overlay,normal,normal;
  --mat-leaf-v-blend:multiply,overlay,overlay,normal,normal;
  --mat-bundle:url(../img/tex/bundle-edges.svg) 0 0/480px 100%,linear-gradient(to right,var(--shade-strong),transparent 6%,transparent 94%,var(--shade-strong)),linear-gradient(to bottom,color-mix(in srgb,var(--leaf-bundle) 75%,var(--leaf-edge)),var(--leaf-bundle) 35% 65%,color-mix(in srgb,var(--leaf-bundle) 70%,var(--ink-soot)));
  --mat-bundle-blend:overlay,normal,normal;
  --mat-leaf-fan:url(../img/tex/leaf-spots.svg) 0 0/100% 100%,url(../img/tex/leaf-grain.svg) 0 0/48px 44%,url(../img/tex/leaf-fibre.svg) 0 0/480px 145%,url(../img/tex/photo-fibre.webp) 0 0/336px 173%,linear-gradient(to right,color-mix(in srgb,var(--leaf-edge) 80%,transparent),transparent 2.2%,transparent 97.8%,color-mix(in srgb,var(--leaf-edge) 80%,transparent)),linear-gradient(to bottom,var(--leaf-edge),var(--leaf-centre) 17% 83%,var(--leaf-edge)); /* P6: the mat-leaf layers seen from above at a grazing angle (open bundle): sizes along the leaf as on a leaf strip, across it a fraction of the drawn height */
  --mat-leaf-fan-blend:var(--mat-leaf-blend);
  --tx-leaf:linear-gradient(to right,var(--leaf-edge),transparent 4%,transparent 96%,var(--leaf-edge)),linear-gradient(to bottom,transparent 9%,var(--leaf-centre) 15% 85%,transparent 91%),repeating-linear-gradient(to bottom,transparent 0 3px,color-mix(in srgb,var(--leaf-bundle) 18%,transparent) 3px 4px,transparent 4px 7px),linear-gradient(to bottom,var(--leaf-edge),var(--leaf-centre) 14% 86%,var(--leaf-edge)); /* Prompt 1 texture: "before" specimens only */
  --tx-leaf-v:linear-gradient(to bottom,var(--leaf-edge),transparent 4%,transparent 96%,var(--leaf-edge)),linear-gradient(to right,transparent 5%,var(--leaf-centre) 10% 90%,transparent 95%),repeating-linear-gradient(to right,transparent 0 3px,color-mix(in srgb,var(--leaf-bundle) 18%,transparent) 3px 4px,transparent 4px 7px),linear-gradient(to right,var(--leaf-edge),var(--leaf-centre) 10% 90%,var(--leaf-edge)); /* Prompt 1 texture: "before" specimens only */
  --tx-bundle:linear-gradient(to right,var(--shade-strong),transparent 6%,transparent 94%,var(--shade-strong)),repeating-linear-gradient(to bottom,transparent 0 2px,color-mix(in srgb,var(--ink-soot) 60%,transparent) 2px 3px),repeating-linear-gradient(to bottom,transparent 0 5px,color-mix(in srgb,var(--leaf-edge) 35%,transparent) 5px 6px,transparent 6px 11px),linear-gradient(to bottom,color-mix(in srgb,var(--leaf-bundle) 75%,var(--leaf-edge)),var(--leaf-bundle) 35% 65%,color-mix(in srgb,var(--leaf-bundle) 70%,var(--ink-soot))); /* Prompt 1 texture: "before" specimens only */
  /* ---- stone: Stone (granite, temple wall) - gate: adopt 3D (eval/gates/stone.json) ---- */
  --stone-light:#B9B4A8;
  --stone-mid:#8A857A;
  --stone-dark:#4B4842;
  --stone-shadow:#2B2925; /* warm shadow; also body text on stone */
  --stone-highlight:#DCD8CF; /* light top-left edge of carved letters */
  --temple-stone:#C8BBA6;
  --temple-shadow:#5A4D3E; /* Copper plate + seals — kings */
  --t4-stone-p5:#33424A; /* T4 tuned stage albedo ramp, materials/stone.params.json (CIELAB converted to sRGB) */
  --t4-stone-p50:#A59682;
  --t4-stone-p95:#FFDE9C;
  --mat-t4-stone:linear-gradient(150deg,var(--t4-stone-p95) -60%,var(--t4-stone-p50) 40%,var(--t4-stone-p5) 160%); /* flat stand-in for the tuned stage (no-WebGL fallbacks) */
  --stone-cut:color-mix(in srgb,var(--stone-dark) 88%,var(--stone-shadow)); /* shallow cut letters on a smoothed cave bed (Tamil-Brahmi) */
  --mat-stone:url(../img/tex/stone-chisel.svg) 0 0/300px,url(../img/tex/stone-stain.svg) 0 0/720px 540px,url(../img/tex/stone-grain.svg) 0 0/400px,url(../img/tex/photo-stone.webp) 0 0/320px,linear-gradient(140deg,var(--stone-light),var(--stone-mid) 70%,color-mix(in srgb,var(--stone-mid) 70%,var(--stone-dark)));
  --mat-temple:url(../img/tex/stone-chisel.svg) 0 0/300px,url(../img/tex/stone-stain.svg) 120px 80px/720px 540px,url(../img/tex/stone-grain.svg) 0 0/340px,url(../img/tex/photo-stone.webp) 90px 40px/280px,linear-gradient(160deg,var(--temple-stone),color-mix(in srgb,var(--temple-stone) 72%,var(--temple-shadow)));
  --mat-stone-blend:overlay,multiply,overlay,overlay,normal;
  --mat-stone-face:linear-gradient(color-mix(in srgb,var(--stone-light) 64%,transparent) 0 0),url(../img/tex/stone-grain.svg) 0 0/400px,url(../img/tex/photo-stone.webp) 0 0/320px,linear-gradient(var(--stone-light) 0 0);
  --mat-temple-face:linear-gradient(color-mix(in srgb,var(--temple-stone) 64%,transparent) 0 0),url(../img/tex/stone-grain.svg) 0 0/340px,url(../img/tex/photo-stone.webp) 0 0/280px,linear-gradient(var(--temple-stone) 0 0);
  --mat-face-blend:normal,overlay,overlay,normal;
  --mat-carved-text:url(../img/tex/groove-dust.svg) 0 0/140px,linear-gradient(to bottom,color-mix(in srgb,var(--stone-dark) 78%,var(--stone-shadow)) 15%,var(--stone-dark) 55%,color-mix(in srgb,var(--stone-dark) 88%,var(--stone-mid)) 90%) 0 0/100% 1lh; /* carved letters (background-clip:text): shaded groove, dark at the top of each line, dust in the groove */
  --mat-carved-text-temple:url(../img/tex/groove-dust.svg) 0 0/140px,linear-gradient(to bottom,color-mix(in srgb,var(--temple-shadow) 78%,var(--stone-shadow)) 15%,var(--temple-shadow) 55%,color-mix(in srgb,var(--temple-shadow) 90%,var(--temple-stone)) 90%) 0 0/100% 1lh; /* the same on temple-wall stone */
  --tx-stone:var(--tx-noise-dark),var(--tx-noise-light),linear-gradient(140deg,var(--stone-light),var(--stone-mid) 70%,color-mix(in srgb,var(--stone-mid) 70%,var(--stone-dark))); /* Prompt 1 texture: "before" specimens only */
  --tx-temple:var(--tx-noise-dark),var(--tx-noise-light),linear-gradient(160deg,var(--temple-stone),color-mix(in srgb,var(--temple-stone) 72%,var(--temple-shadow))); /* Prompt 1 texture: "before" specimens only */
  /* ---- copper_plate: Copper plate - gate: adopt 3D (eval/gates/copper_plate.json) ---- */
  --copper:#8C5A3C;
  --copper-sheen:#D4A27F; /* polished flat area that carries text */
  --copper-patina:#56705E; /* adjusted from #5E7A66: paper on it was 4.09:1 */
  --copper-dark:#3E2A1E; /* Coins + rings — trade */
  --t4-copper-plate-p5:#1E323A; /* T4 tuned stage albedo ramp, materials/copper_plate.params.json (CIELAB converted to sRGB) */
  --t4-copper-plate-p50:#69564A;
  --t4-copper-plate-p95:#E2735C;
  --mat-t4-copper-plate:linear-gradient(150deg,var(--t4-copper-plate-p95) -60%,var(--t4-copper-plate-p50) 40%,var(--t4-copper-plate-p5) 160%); /* flat stand-in for the tuned stage (no-WebGL fallbacks) */
  --copper-edge:color-mix(in srgb,var(--copper-dark) 70%,var(--copper)); /* a thin plate seen on its edge (stack thickness) */
  --copper-engrave-lip:color-mix(in srgb,var(--copper-patina) 55%,transparent); /* green patina settled along the lower lip of an engraved groove */
  --copper-glint:color-mix(in srgb,var(--copper-sheen) 32%,transparent); /* dull highlight band on hammered copper */
  --mat-copper:url(../img/tex/copper-hammer.svg) 0 0/360px,linear-gradient(135deg,color-mix(in srgb,var(--copper) 78%,var(--copper-sheen)),var(--copper) 32%,color-mix(in srgb,var(--copper) 72%,var(--copper-patina)) 70%,color-mix(in srgb,var(--copper) 58%,var(--copper-dark)));
  --mat-copper-blend:overlay,normal;
  --mat-copper-panel:linear-gradient(color-mix(in srgb,var(--copper-sheen) 72%,transparent) 0 0),url(../img/tex/copper-hammer.svg) 0 0/360px,linear-gradient(var(--copper-sheen) 0 0);
  --mat-panel-blend:normal,overlay,normal;
  --mat-copper-sheen:linear-gradient(105deg,transparent 40%,var(--copper-glint) 47%,color-mix(in srgb,var(--paper) 18%,transparent) 50%,var(--copper-glint) 53%,transparent 60%); /* the static highlight band (soft-light) on a copper plate; light from the top-left */
  --tx-copper:radial-gradient(ellipse at 0 100%,color-mix(in srgb,var(--copper-patina) 85%,transparent),transparent 45%),radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--copper-patina) 70%,transparent),transparent 40%),radial-gradient(circle at 88% 92%,color-mix(in srgb,var(--copper-patina) 55%,transparent),transparent 22%),var(--tx-noise-dark),linear-gradient(135deg,var(--copper),color-mix(in srgb,var(--copper) 65%,var(--copper-patina))); /* Prompt 1 texture: "before" specimens only */
  /* ---- pottery: Pottery sherd (fired clay) - gate: keep 2D and improve its shading (eval/gates/pottery.json) ---- */
  --terracotta:#A84E34; /* adjusted from #B5553A: paper on it was 4.21:1 */
  --terracotta-deep:#8F3F29; /* hover / pressed / link text */
  --terracotta-soft:#E8C9B0;
  --terracotta-light:#C8704F; /* lighter clay in sherd texture — no text */
  --t4-pottery-p5:#171613; /* T4 tuned stage albedo ramp, materials/pottery.params.json (CIELAB converted to sRGB) */
  --t4-pottery-p50:#503E33;
  --t4-pottery-p95:#97573C;
  --mat-t4-pottery:linear-gradient(150deg,var(--t4-pottery-p95) -60%,var(--t4-pottery-p50) 40%,var(--t4-pottery-p5) 160%); /* flat stand-in for the tuned stage (no-WebGL fallbacks) */
  --clay-impression-rim:color-mix(in srgb,var(--terracotta) 22%,transparent); /* the pressed rim of a seal impression in clay */
  --terracotta-shadow:color-mix(in srgb,var(--terracotta-deep) 70%,var(--stone-dark)); /* a sherd's broken edge in shade */
  --brw-slip-black:color-mix(in srgb,var(--ink-soot) 88%,var(--terracotta-deep)); /* black-and-red ware: the black slip (by eye, estimate) */
  --brw-slip-mid:color-mix(in srgb,var(--ink-soot) 55%,var(--terracotta-deep)); /* black-and-red ware: where black meets red */
  --brw-edge-dark:color-mix(in srgb,var(--stone-dark) 70%,var(--terracotta-deep)); /* black-and-red ware: broken edge in shade */
  --brw-mark:var(--stone-highlight); /* a mark scratched after firing reads pale on the black slip */
  --brw-mark-shadow:var(--ink-soot); /* its shadow */
  --mat-clay:repeating-linear-gradient(172deg,transparent 0 21%,color-mix(in srgb,var(--terracotta-deep) 30%,transparent) 21% 23.5%,transparent 23.5% 39%,color-mix(in srgb,var(--terracotta-light) 28%,transparent) 39% 44%,transparent 44% 60%),url(../img/tex/clay-grain.svg) 0 0/320px,url(../img/tex/photo-clay.webp) 0 0/408px 204px,radial-gradient(ellipse at 50% 50%,var(--terracotta) 0 30%,transparent 60%),linear-gradient(160deg,var(--terracotta-light),var(--terracotta) 55%,var(--terracotta-deep));
  --mat-clay-blend:multiply,overlay,overlay,normal,normal;
  --mat-clay-edge:linear-gradient(135deg,var(--terracotta-light),var(--terracotta-shadow)); /* a sherd's broken thickness, seen below-right (light from top-left) */
  --mat-clay-brw:url(../img/tex/clay-grain.svg) 0 0/320px,linear-gradient(174deg,var(--brw-slip-black) 0 36%,var(--brw-slip-mid) 44%,var(--terracotta) 52%,var(--terracotta-deep)); /* black-and-red ware sherd face */
  --mat-clay-brw-blend:overlay,normal;
  --mat-clay-brw-edge:linear-gradient(135deg,var(--brw-edge-dark),var(--terracotta-deep)); /* black-and-red ware broken edge */
  --mat-clay-impression:url(../img/tex/clay-grain.svg) 0 0/320px,url(../img/tex/photo-clay.webp) 0 0/408px 204px,radial-gradient(circle at 40% 35%,var(--terracotta-soft) 0 45%,color-mix(in srgb,var(--terracotta-soft) 65%,var(--terracotta))); /* seal impression pressed into soft clay */
  --mat-clay-impression-blend:overlay,overlay,normal;
  --tx-sherd:radial-gradient(ellipse at 50% 50%,var(--terracotta) 0 32%,transparent 58%),var(--tx-noise-dark),var(--tx-noise-light),linear-gradient(160deg,var(--terracotta-light),var(--terracotta) 55%,var(--terracotta-deep)); /* Prompt 1 texture: "before" specimens only */
  --tx-clay:radial-gradient(circle at 40% 35%,var(--terracotta-soft) 0 45%,color-mix(in srgb,var(--terracotta-soft) 65%,var(--terracotta))); /* Prompt 1 texture: "before" specimens only */
  /* ---- coins: Coins - gate: adopt 3D (eval/gates/coins.json) ---- */
  --coin-gold:#C9A24A;
  --coin-gold-light:#E4C97E;
  --coin-gold-dark:#8E6D24;
  --coin-silver:#B7B9BC;
  --coin-silver-light:#E1E2E4;
  --coin-silver-dark:#7D8084;
  --coin-ink:#2E2412; /* struck legend on a coin face */
  --t4-coins-p5:#212D30; /* T4 tuned stage albedo ramp, materials/coins.params.json (CIELAB converted to sRGB) */
  --t4-coins-p50:#5A5249;
  --t4-coins-p95:#A17F60;
  --mat-t4-coins:linear-gradient(150deg,var(--t4-coins-p95) -60%,var(--t4-coins-p50) 40%,var(--t4-coins-p5) 160%); /* flat stand-in for the tuned stage (no-WebGL fallbacks) */
  --coin-gold-edge:color-mix(in srgb,var(--coin-gold-dark) 75%,var(--ink)); /* a gold coin's thickness, seen below-right */
  --coin-silver-edge:color-mix(in srgb,var(--coin-silver-dark) 80%,var(--ink)); /* a silver coin's thickness */
  --coin-gold-rim:color-mix(in srgb,var(--coin-gold-dark) 85%,transparent); /* raised rim line, gold */
  --coin-gold-rim-soft:color-mix(in srgb,var(--coin-gold-dark) 22%,transparent); /* inner rim shading, gold */
  --coin-silver-rim:color-mix(in srgb,var(--coin-silver-dark) 85%,transparent); /* raised rim line, silver */
  --coin-silver-rim-soft:color-mix(in srgb,var(--coin-silver-dark) 22%,transparent); /* inner rim shading, silver */
  --coin-silver-dent:color-mix(in srgb,var(--coin-silver-dark) 22%,transparent); /* the floor of a punch mark */
  --mat-gold:radial-gradient(circle at 34% 28%,color-mix(in srgb,var(--paper) 38%,transparent),transparent 42%),url(../img/tex/metal-worn.svg) 0 0/220px,var(--tx-coin-gold);
  --mat-silver:radial-gradient(circle at 34% 28%,color-mix(in srgb,var(--paper) 38%,transparent),transparent 42%),url(../img/tex/metal-worn.svg) 30px 60px/220px,var(--tx-coin-silver);
  --mat-metal-blend:soft-light,overlay,normal;
  --tx-coin-gold:radial-gradient(circle at 38% 32%,var(--coin-gold-light),var(--coin-gold) 48%,var(--coin-gold-dark)); /* Prompt 1 texture: "before" specimens only */
  --tx-coin-silver:radial-gradient(circle at 38% 32%,var(--coin-silver-light),var(--coin-silver) 48%,var(--coin-silver-dark)); /* Prompt 1 texture: "before" specimens only */
  /* ---- rings: Signet ring - gate: keep 2D and improve its shading (eval/gates/rings.json) ---- */
  --t4-rings-p5:#001418; /* T4 tuned stage albedo ramp, materials/rings.params.json (CIELAB converted to sRGB) */
  --t4-rings-p50:#5F420D;
  --t4-rings-p95:#FD6700;
  --mat-t4-rings:linear-gradient(150deg,var(--t4-rings-p95) -60%,var(--t4-rings-p50) 40%,var(--t4-rings-p5) 160%); /* flat stand-in for the tuned stage (no-WebGL fallbacks) */
  --ring-gold:var(--coin-gold); /* hoop and bezel - the 2D signet ring is drawn in the Prompt 1 coin gold (DESIGN_SYSTEM.md); the T4 rings ramp is not used in 2D: 16 photos (below the 20 floor) and 0 of 16 real ring photos pass its colour rows */
  --ring-gold-light:var(--coin-gold-light); /* lit edge - the 2D signet ring is drawn in the Prompt 1 coin gold (DESIGN_SYSTEM.md); the T4 rings ramp is not used in 2D: 16 photos (below the 20 floor) and 0 of 16 real ring photos pass its colour rows */
  --ring-gold-dark:var(--coin-gold-dark); /* rim and shade - the 2D signet ring is drawn in the Prompt 1 coin gold (DESIGN_SYSTEM.md); the T4 rings ramp is not used in 2D: 16 photos (below the 20 floor) and 0 of 16 real ring photos pass its colour rows */
  --ring-ink:var(--coin-ink); /* the cut legend - the 2D signet ring is drawn in the Prompt 1 coin gold (DESIGN_SYSTEM.md); the T4 rings ramp is not used in 2D: 16 photos (below the 20 floor) and 0 of 16 real ring photos pass its colour rows */
  --mat-ring:var(--mat-gold); /* the ring metal = the gold coin stack (see ring-gold) */
  --mat-ring-blend:var(--mat-metal-blend);
  /* ---- seals: Seal (cast bronze) - gate: keep 2D and improve its shading (eval/gates/seals.json) ---- */
  --seal-bronze:#C3A378; /* base, CIELAB [69.0, 5.4, 26.8] = T4 seals p50 */
  --seal-bronze-dark:#7A7563; /* midpoint of T4 seals p5 and p50 */
  --seal-bronze-sheen:#FFED84; /* T4 seals p95 */
  --seal-bronze-patina:#32494D; /* T4 seals p5 */
  --t4-seals-p5:#32494D; /* T4 tuned stage albedo ramp, materials/seals.params.json (CIELAB converted to sRGB) */
  --t4-seals-p50:#C3A378;
  --t4-seals-p95:#FFED84;
  --mat-t4-seals:linear-gradient(150deg,var(--t4-seals-p95) -60%,var(--t4-seals-p50) 40%,var(--t4-seals-p5) 160%); /* flat stand-in for the tuned stage (no-WebGL fallbacks) */
  --seal-field:color-mix(in srgb,var(--seal-bronze) 80%,var(--seal-bronze-dark)); /* the recessed field inside the legend band */
  /* ---- cotton_thread: Cotton binding thread - no reference photos, no gate ---- */
  --thread-cotton:#E6DDC8; /* undyed cotton binding thread, as on the SHIP bundle photos (PAL-083/084/088/090) */
  --thread-cotton-shade:color-mix(in srgb,var(--thread-cotton) 68%,var(--ink-soot)); /* the shaded ply of a twisted cord */
  --mat-thread-cord:repeating-linear-gradient(-58deg,var(--thread-cotton) 0 2.2px,var(--thread-cotton-shade) 2.2px 3.2px); /* a twisted two-ply cotton cord, 3.2 px per turn */
  /* ---- wood_board: Wooden cover board - no reference photos, no gate ---- */
  --wood:#7A5436; /* bundle boards */
  --wood-dark:#553823; /* Stone + terracotta — origins */
  --mat-wood:url(../img/tex/wood-grain.svg) 0 0/600px 100%,url(../img/tex/photo-fibre.webp) 0 0/336px 190px,linear-gradient(to bottom,var(--wood),var(--wood-dark));
  --mat-wood-blend:overlay,overlay,normal;
  --tx-wood:repeating-linear-gradient(to bottom,transparent 0 3px,color-mix(in srgb,var(--wood-dark) 45%,transparent) 3px 4px),linear-gradient(to bottom,var(--wood),var(--wood-dark)); /* Prompt 1 texture: "before" specimens only */
  /* ---- shared: alpha-only noise tiles of the Prompt 1 stacks ---- */
  --tx-noise-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.3 0 0 0 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  --tx-noise-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.4 0 0 0 -.65'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
:root[data-quality="low"]{--mat-leaf:linear-gradient(var(--leaf-centre) 0 0);--mat-leaf-v:linear-gradient(var(--leaf-centre) 0 0);--mat-bundle:linear-gradient(var(--leaf-bundle) 0 0);--mat-leaf-fan:linear-gradient(var(--leaf-centre) 0 0);--mat-stone:linear-gradient(var(--stone-mid) 0 0);--mat-temple:linear-gradient(var(--temple-stone) 0 0);--mat-stone-face:linear-gradient(var(--stone-light) 0 0);--mat-temple-face:linear-gradient(var(--temple-stone) 0 0);--mat-copper:linear-gradient(var(--copper) 0 0);--mat-copper-panel:linear-gradient(var(--copper-sheen) 0 0);--mat-clay:linear-gradient(var(--terracotta) 0 0);--mat-clay-edge:linear-gradient(var(--terracotta-deep) 0 0);--mat-clay-brw:linear-gradient(var(--ink-soot) 0 0);--mat-clay-brw-edge:linear-gradient(var(--terracotta-deep) 0 0);--mat-clay-impression:linear-gradient(var(--terracotta-soft) 0 0);--mat-gold:linear-gradient(var(--coin-gold) 0 0);--mat-silver:linear-gradient(var(--coin-silver) 0 0);--mat-thread-cord:linear-gradient(var(--thread-cotton) 0 0);--mat-wood:linear-gradient(var(--wood) 0 0)}
@media (prefers-reduced-data:reduce){:root{--mat-leaf:linear-gradient(var(--leaf-centre) 0 0);--mat-leaf-v:linear-gradient(var(--leaf-centre) 0 0);--mat-bundle:linear-gradient(var(--leaf-bundle) 0 0);--mat-leaf-fan:linear-gradient(var(--leaf-centre) 0 0);--mat-stone:linear-gradient(var(--stone-mid) 0 0);--mat-temple:linear-gradient(var(--temple-stone) 0 0);--mat-stone-face:linear-gradient(var(--stone-light) 0 0);--mat-temple-face:linear-gradient(var(--temple-stone) 0 0);--mat-copper:linear-gradient(var(--copper) 0 0);--mat-copper-panel:linear-gradient(var(--copper-sheen) 0 0);--mat-clay:linear-gradient(var(--terracotta) 0 0);--mat-clay-edge:linear-gradient(var(--terracotta-deep) 0 0);--mat-clay-brw:linear-gradient(var(--ink-soot) 0 0);--mat-clay-brw-edge:linear-gradient(var(--terracotta-deep) 0 0);--mat-clay-impression:linear-gradient(var(--terracotta-soft) 0 0);--mat-gold:linear-gradient(var(--coin-gold) 0 0);--mat-silver:linear-gradient(var(--coin-silver) 0 0);--mat-thread-cord:linear-gradient(var(--thread-cotton) 0 0);--mat-wood:linear-gradient(var(--wood) 0 0)}}
/* END GENERATED material registry */

:root{
  /* ---------- Material palette ----------
     Moved to the material registry (Prompt 6): the generated block above this :root, built from
     design/realism/registry/registry.json by node design/realism/tools/build_registry.mjs. The UI
     tokens below may reference those names; nothing outside the registry block defines them. */
  --thread:#E9A23B;           /* orange-yellow thread colour — decorative UI accent (footer rule), not the binding cord */
  --catalogue-red:#A33A2A;    /* catalogue numbers, on paper only */

  /* Page ground — day */
  --paper:#F6EEDD;
  --paper-deep:#EFE3CB;
  --paper-raise:#FFFBF2;      /* a card lifted off the page */
  --ink:#241B14;
  --ink-muted:#5E4E40;
  --day-rule:#D8C7A6;         /* hairlines — decorative, no meaning */
  --day-edge:#87734F;         /* borders that carry meaning (inputs, dividers) — 3.15:1 on the lightest ground */
  --rule:var(--day-rule);
  --edge:var(--day-edge);

  /* Page ground — night (dark mode). The material colours above never change:
     they are measured from the objects. Only the page ground and the roles do. */
  --night:#16120E;
  --night-deep:#201A14;
  --night-raise:#2A2219;      /* a card lifted off the night page */
  --night-text:#F1E7D6;
  --night-muted:#C3B49E;
  --night-rule:#4A3E30;       /* hairlines — decorative */
  --night-edge:#8F7A5C;       /* borders that carry meaning — 3.57:1 on the darkest ground */
  --terracotta-bright:#E08A62;/* terracotta lifted for a dark ground */
  --terracotta-brighter:#EFA079;
  --copper-bright:#D89C74;
  --coin-gold-bright:#E0BE6A;
  --leaf-bright:#E0AE6A;
  --stone-bright:#C9C3B5;
  --temple-bright:#CFC0A6;

  /* Mask helpers: alpha only, never seen as colour */
  --mask-on:#000;
  --mask-off:transparent;

  /* ---------- Semantic roles (default = paper page) ---------- */
  --bg:var(--paper);
  --bg-alt:var(--paper-deep);
  --surface:var(--paper-raise);         /* card / panel ground */
  --text:var(--ink);
  --text-muted:var(--ink-muted);
  --accent:var(--terracotta);          /* rules, icons, large type */
  --accent-text:var(--terracotta-deep);/* accent as body-size text, links */
  --on-accent:var(--paper);
  --button-bg:var(--terracotta);
  --button-bg-hover:var(--terracotta-deep);
  --button-text:var(--paper);
  --focus-ring:var(--ink);
  --focus-ring-on-dark:var(--paper);

  /* ---------- Shadows ---------- */
  /* One light for the whole site: top-left, soft. Shadows fall down and to the right. */
  --shadow-rest:1px 1px 2px rgb(43 41 37 / .14),2px 3px 8px rgb(43 41 37 / .10);
  --shadow-lift:2px 3px 6px rgb(43 41 37 / .16),4px 10px 22px rgb(43 41 37 / .16);
  --drop-rest:drop-shadow(1px 2px 3px rgb(43 41 37 / .28));
  --drop-lift:drop-shadow(3px 6px 8px rgb(43 41 37 / .30));
  /* Shadow by object thickness (filter form for masked shapes, box form for boxes) */
  --drop-thin:drop-shadow(.5px 1px .5px rgb(43 41 37 / .38)) drop-shadow(1px 2px 3px rgb(43 41 37 / .16));     /* leaf, copper plate */
  --drop-mid:drop-shadow(1px 2px 1px rgb(43 41 37 / .38)) drop-shadow(2px 4px 6px rgb(43 41 37 / .2));        /* coin, sherd, seal */
  --drop-thick:drop-shadow(2px 3px 2px rgb(43 41 37 / .38)) drop-shadow(5px 9px 14px rgb(43 41 37 / .24));    /* slab, bundle */
  --box-thin:.5px 1px 1px rgb(43 41 37 / .3),1px 2px 4px rgb(43 41 37 / .14);
  --box-thick:2px 3px 3px rgb(43 41 37 / .3),5px 9px 16px rgb(43 41 37 / .22);
  --carve-light:rgb(255 255 255 / .55);
  --carve-dark:rgb(20 18 15 / .55);
  --inset-rim:inset 0 0 0 2px rgb(255 226 196 / .35),inset 0 0 0 4px rgb(62 42 30 / .55);
  --shade-soft:rgb(30 23 18 / .18);    /* soft darkening inside textures */
  --shade-strong:rgb(30 23 18 / .38);

  /* ---------- Typography ---------- */
  --font-tamil:"Noto Serif Tamil","Noto Sans Tamil","Tamil Sangam MN","Tamil MN","Nirmala UI","Latha",serif;
  --font-display:"Fraunces","Noto Serif Tamil",Georgia,"Times New Roman",serif;
  --font-body:"Fraunces","Noto Serif Tamil",Georgia,"Times New Roman",serif;
  --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Serif Tamil",sans-serif;
  --font-brahmi:"Semmozhi Brahmi","Noto Sans Brahmi",sans-serif;
  --font-grantha:"Semmozhi Grantha","Noto Sans Grantha",serif;
  --font-vatteluttu:"Semmozhi Vatteluttu",serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --text-xs:.875rem;                               /* 14px — credits, captions (Latin) */
  --text-sm:.9375rem;                              /* 15px — UI labels (Latin) */
  --text-base:1.0625rem;                           /* 17px — Latin body */
  --text-md:1.25rem;                               /* 20px */
  --text-lg:clamp(1.375rem,1.2rem + .8vw,1.75rem); /* 22 → 28px */
  --text-xl:clamp(1.75rem,1.4rem + 1.6vw,2.5rem);  /* 28 → 40px */
  --text-2xl:clamp(2.25rem,1.6rem + 3vw,3.75rem);  /* 36 → 60px */
  --tamil-min:1.125rem;                            /* 18px — Tamil never smaller */
  --lh-latin:1.55;
  --lh-tamil:1.75;                                 /* ≥ 1.7: room for Tamil marks */
  --lh-display:1.15;
  --measure:68ch;

  /* ---------- Spacing (4 8 12 16 24 32 48 64 px at 16px root) ---------- */
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;
  --space-7:3rem;
  --space-8:4rem;
  --gutter:var(--space-4);                 /* page side padding; 24px from 768 */
  --page-max:75rem;                        /* 1200px */
  --touch:2.75rem;                         /* 44px minimum target */

  /* ---------- Radii ---------- */
  --radius-1:4px;
  --radius-2:8px;
  --radius-3:16px;
  --radius-pill:999px;

  /* ---------- Motion (Prompt 6: only a state change the visitor asked for moves; nothing moves on hover) ---------- */
  --dur-flip:240ms;           /* leaf flip, CSS fallback: half out, half in */
  --dur-open:200ms;           /* copper-set fan, CSS fallback */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  /* Breakpoints (for reference; CSS vars cannot be used in @media):
     mobile-first 360 → 48rem (768px) → 75rem (1200px) */
}

/* ---------- Section surfaces: one colour set per material ---------- */
.surface-leaf{   /* literature — palm leaf */
  --bg:#F7EAD3;--bg-alt:#EDD5AE;--text:var(--ink);--text-muted:var(--ink-muted);
  --accent:var(--leaf-edge);--accent-text:#7E4A1C;--on-accent:var(--paper)}
.surface-origins{ /* stone + pottery sherds */
  --bg:#EEEBE5;--bg-alt:#DEDAD1;--text:var(--ink);--text-muted:#524E47;
  --accent:var(--terracotta);--accent-text:var(--terracotta-deep);--on-accent:var(--paper)}
.surface-kings{  /* copper plate + seals */
  --bg:#F5E9DE;--bg-alt:#E9D3C1;--text:var(--ink);--text-muted:#5A4536;
  --accent:var(--copper);--accent-text:#76492F;--on-accent:var(--paper)}
.surface-chola{  /* temple-wall stone */
  --bg:#EFE9DF;--bg-alt:#DFD5C5;--text:var(--ink);--text-muted:#544A3F;
  --accent:var(--temple-shadow);--accent-text:var(--temple-shadow);--on-accent:var(--paper)}
.surface-trade{  /* coins + rings */
  --bg:#F7EFD8;--bg-alt:#ECDFB8;--text:var(--ink);--text-muted:#584A32;
  --accent:var(--coin-gold-dark);--accent-text:#6E520E;--on-accent:var(--paper)}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:var(--text-base)/var(--lh-latin) var(--font-body);
  font-optical-sizing:auto;overflow-wrap:break-word}
@media (min-width:48rem){:root{--gutter:var(--space-5)}}

/* Tamil: right font, ≥18px, ≥1.7 line height — wherever lang="ta" is set.
   Zero specificity so headings keep their larger sizes; components that set
   their own size use max(size, var(--ta-floor)) and max(lh, var(--ta-lh)). */
:root{--ta-floor:0px;--ta-lh:0}
:where(:lang(ta)){--ta-floor:var(--tamil-min);--ta-lh:var(--lh-tamil);
  font-family:var(--font-tamil);font-size:max(1em,var(--tamil-min));line-height:var(--lh-tamil)}
.script-brahmi{font-family:var(--font-brahmi);font-feature-settings:"ccmp","locl","mark","mkmk","liga","clig"}
.script-grantha{font-family:var(--font-grantha)}
.script-vatteluttu{font-family:var(--font-vatteluttu)}

/* Keyboard focus: 3px ring, offset, high contrast on every surface */
:focus-visible,.is-focus{outline:3px solid var(--focus-ring);outline-offset:3px}
:focus:not(:focus-visible){outline:none}

/* Reduced motion: every duration becomes 0 — instant state changes */
@media (prefers-reduced-motion:reduce){
  :root{--dur-flip:0ms;--dur-open:0ms}
  *,*::before,*::after{animation-duration:0s!important;animation-delay:0s!important;animation-iteration-count:1!important;
    transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
}
@media (forced-colors:active){:focus-visible,.is-focus{outline-color:Highlight}}

/* ==========================================================================
   Dark mode. Three states, like the older pages (css/style.css):
     no attribute          → follow the operating system
     data-theme="dark"     → night, whatever the system says
     data-theme="light"    → day,  whatever the system says
   Only the page ground and the semantic roles change. Every material colour
   (--leaf-centre, --stone-light, --copper-sheen, --coin-gold, --paper, --ink …)
   is measured from the objects and is the SAME in both modes, so a leaf still
   looks like a leaf and every material contrast pair keeps its day number.
   Contrast tables for both modes: ../DESIGN_SYSTEM.md
   ========================================================================== */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:var(--night);--bg-alt:var(--night-deep);--surface:var(--night-raise);
  --text:var(--night-text);--text-muted:var(--night-muted);
  --rule:var(--night-rule);--edge:var(--night-edge);
  --accent:var(--terracotta-bright);--accent-text:var(--terracotta-bright);--on-accent:var(--ink);
  --button-bg:var(--terracotta-bright);--button-bg-hover:var(--terracotta-brighter);--button-text:var(--ink);
  --focus-ring:var(--night-text);--focus-ring-on-dark:var(--night-text);
  --shadow-rest:1px 1px 2px rgb(0 0 0 / .5),2px 3px 8px rgb(0 0 0 / .4);
  --shadow-lift:2px 3px 6px rgb(0 0 0 / .55),4px 10px 22px rgb(0 0 0 / .45);
  --carve-light:rgb(255 255 255 / .28);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:var(--night);--bg-alt:var(--night-deep);--surface:var(--night-raise);
  --text:var(--night-text);--text-muted:var(--night-muted);
  --rule:var(--night-rule);--edge:var(--night-edge);
  --accent:var(--terracotta-bright);--accent-text:var(--terracotta-bright);--on-accent:var(--ink);
  --button-bg:var(--terracotta-bright);--button-bg-hover:var(--terracotta-brighter);--button-text:var(--ink);
  --focus-ring:var(--night-text);--focus-ring-on-dark:var(--night-text);
  --shadow-rest:1px 1px 2px rgb(0 0 0 / .5),2px 3px 8px rgb(0 0 0 / .4);
  --shadow-lift:2px 3px 6px rgb(0 0 0 / .55),4px 10px 22px rgb(0 0 0 / .45);
  --carve-light:rgb(255 255 255 / .28);
}

/* Previewing one mode inside the other: any subtree may carry .theme-night or
   .theme-day to take that mode's roles whatever the page mode is. The style guide
   uses them to show a component in both modes side by side.
   contrast_components.py asserts .theme-night resolves to the same colours as
   :root[data-theme="dark"], so the two lists cannot drift apart. */
.theme-night{
  color-scheme:dark;
  --bg:var(--night);--bg-alt:var(--night-deep);--surface:var(--night-raise);
  --text:var(--night-text);--text-muted:var(--night-muted);
  --rule:var(--night-rule);--edge:var(--night-edge);
  --accent:var(--terracotta-bright);--accent-text:var(--terracotta-bright);--on-accent:var(--ink);
  --button-bg:var(--terracotta-bright);--button-bg-hover:var(--terracotta-brighter);--button-text:var(--ink);
  --focus-ring:var(--night-text);--focus-ring-on-dark:var(--night-text);
  --shadow-rest:1px 1px 2px rgb(0 0 0 / .5),2px 3px 8px rgb(0 0 0 / .4);
  --shadow-lift:2px 3px 6px rgb(0 0 0 / .55),4px 10px 22px rgb(0 0 0 / .45);
  --carve-light:rgb(255 255 255 / .28);
  background:var(--bg);color:var(--text)}
.theme-day{
  color-scheme:light;
  --bg:var(--paper);--bg-alt:var(--paper-deep);--surface:var(--paper-raise);
  --text:var(--ink);--text-muted:var(--ink-muted);
  --rule:var(--day-rule);--edge:var(--day-edge);
  --accent:var(--terracotta);--accent-text:var(--terracotta-deep);--on-accent:var(--paper);
  --button-bg:var(--terracotta);--button-bg-hover:var(--terracotta-deep);--button-text:var(--paper);
  --focus-ring:var(--ink);--focus-ring-on-dark:var(--paper);
  background:var(--bg);color:var(--text)}

/* Section surfaces at night: the same five materials, each as a dark tint of its
   own colour, with that material's accent lifted until it reads on the tint. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --dk-leaf-bg:#1C150D;--dk-leaf-alt:#261C11;--dk-leaf-raise:#302415;
  --dk-origins-bg:#171613;--dk-origins-alt:#201F1B;--dk-origins-raise:#292823;
  --dk-kings-bg:#1D140E;--dk-kings-alt:#271A12;--dk-kings-raise:#312218;
  --dk-chola-bg:#1A170F;--dk-chola-alt:#241F15;--dk-chola-raise:#2D281B;
  --dk-trade-bg:#1B1608;--dk-trade-alt:#251E0C;--dk-trade-raise:#2E2611;
}}
:root[data-theme="dark"]{
  --dk-leaf-bg:#1C150D;--dk-leaf-alt:#261C11;--dk-leaf-raise:#302415;
  --dk-origins-bg:#171613;--dk-origins-alt:#201F1B;--dk-origins-raise:#292823;
  --dk-kings-bg:#1D140E;--dk-kings-alt:#271A12;--dk-kings-raise:#312218;
  --dk-chola-bg:#1A170F;--dk-chola-alt:#241F15;--dk-chola-raise:#2D281B;
  --dk-trade-bg:#1B1608;--dk-trade-alt:#251E0C;--dk-trade-raise:#2E2611;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .surface-leaf,
  :root:not([data-theme="light"]) .surface-origins,:root:not([data-theme="light"]) .surface-kings,
  :root:not([data-theme="light"]) .surface-chola,:root:not([data-theme="light"]) .surface-trade{
  --text:var(--night-text);--text-muted:var(--night-muted);--on-accent:var(--ink);--button-text:var(--ink)}
  :root:not([data-theme="light"]) .surface-leaf{--bg:var(--dk-leaf-bg);--bg-alt:var(--dk-leaf-alt);--surface:var(--dk-leaf-raise);--accent:var(--leaf-bright);--accent-text:var(--leaf-bright);--button-bg:var(--leaf-bright)}
  :root:not([data-theme="light"]) .surface-origins{--bg:var(--dk-origins-bg);--bg-alt:var(--dk-origins-alt);--surface:var(--dk-origins-raise);--accent:var(--terracotta-bright);--accent-text:var(--terracotta-bright);--button-bg:var(--terracotta-bright)}
  :root:not([data-theme="light"]) .surface-kings{--bg:var(--dk-kings-bg);--bg-alt:var(--dk-kings-alt);--surface:var(--dk-kings-raise);--accent:var(--copper-bright);--accent-text:var(--copper-bright);--button-bg:var(--copper-bright)}
  :root:not([data-theme="light"]) .surface-chola{--bg:var(--dk-chola-bg);--bg-alt:var(--dk-chola-alt);--surface:var(--dk-chola-raise);--accent:var(--temple-bright);--accent-text:var(--temple-bright);--button-bg:var(--temple-bright)}
  :root:not([data-theme="light"]) .surface-trade{--bg:var(--dk-trade-bg);--bg-alt:var(--dk-trade-alt);--surface:var(--dk-trade-raise);--accent:var(--coin-gold-bright);--accent-text:var(--coin-gold-bright);--button-bg:var(--coin-gold-bright)}
}
:root[data-theme="dark"] :is(.surface-leaf,.surface-origins,.surface-kings,.surface-chola,.surface-trade){
  --text:var(--night-text);--text-muted:var(--night-muted);--on-accent:var(--ink);--button-text:var(--ink)}
:root[data-theme="dark"] .surface-leaf{--bg:var(--dk-leaf-bg);--bg-alt:var(--dk-leaf-alt);--surface:var(--dk-leaf-raise);--accent:var(--leaf-bright);--accent-text:var(--leaf-bright);--button-bg:var(--leaf-bright)}
:root[data-theme="dark"] .surface-origins{--bg:var(--dk-origins-bg);--bg-alt:var(--dk-origins-alt);--surface:var(--dk-origins-raise);--accent:var(--terracotta-bright);--accent-text:var(--terracotta-bright);--button-bg:var(--terracotta-bright)}
:root[data-theme="dark"] .surface-kings{--bg:var(--dk-kings-bg);--bg-alt:var(--dk-kings-alt);--surface:var(--dk-kings-raise);--accent:var(--copper-bright);--accent-text:var(--copper-bright);--button-bg:var(--copper-bright)}
:root[data-theme="dark"] .surface-chola{--bg:var(--dk-chola-bg);--bg-alt:var(--dk-chola-alt);--surface:var(--dk-chola-raise);--accent:var(--temple-bright);--accent-text:var(--temple-bright);--button-bg:var(--temple-bright)}
:root[data-theme="dark"] .surface-trade{--bg:var(--dk-trade-bg);--bg-alt:var(--dk-trade-alt);--surface:var(--dk-trade-raise);--accent:var(--coin-gold-bright);--accent-text:var(--coin-gold-bright);--button-bg:var(--coin-gold-bright)}