/* ==========================================================================
   MUL 2010 · "Nocturne Terrazzo" — base tokens + shared primitives
   (Terrazzo Atelier architecture from MUL 2720; cool slate/indigo palette.
   Token NAMES are kept from 2720 so site.css/week.css apply unchanged:
   --clay slot = indigo primary accent, --ocean slot = coral links.)
   Loaded on every page (homepage, weeks index, week pages, listening).
   Page-specific chrome lives in site.css (shell pages) and week.css.
   ========================================================================== */

:root{
  --font-display:"Fraunces",serif;
  --font-body:"Manrope",sans-serif;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;

  --radius-sm:8px; --radius-md:14px; --radius-lg:24px; --radius-xl:36px;

  --speed-fast:140ms; --speed-base:320ms;

  --canvas:#eef1f6;
  --paper:#fafbfe;
  --ink:#232633;
  --muted:#575c6e;
  --stone:#c6cbdb;
  --clay:#3b3f8c;
  --sage:#5f8272;
  --sun:#d9a441;
  --ocean:#a03d2e;
  --line:rgba(35,38,51,0.18);

  --shadow-cut:0 2px 0 rgba(35,38,51,0.5);
  --shadow-soft:0 14px 34px rgba(35,38,51,0.12);
  --shadow-lift:0 20px 48px rgba(35,38,51,0.18);

  /* Overridden per page-type (site.css / week.css) */
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--canvas);line-height:1.6;position:relative}

/* Decorative terrazzo speckle — fixed, non-interactive */
.terrazzo{position:fixed;inset:0;background-image:
    radial-gradient(circle at 8% 15%, rgba(59,63,140,0.18) 0 6px, transparent 6px),
    radial-gradient(circle at 78% 25%, rgba(95,130,114,0.2) 0 5px, transparent 5px),
    radial-gradient(circle at 30% 68%, rgba(160,61,46,0.16) 0 5px, transparent 5px),
    radial-gradient(circle at 60% 82%, rgba(217,164,65,0.26) 0 5px, transparent 5px);
  background-size:240px 240px, 280px 280px, 260px 260px, 300px 300px;
  opacity:0.5; pointer-events:none; z-index:0;
}

a{color:var(--ocean);text-decoration:none}
a:hover{color:var(--clay)}

h1,h2,h3,h4{font-family:var(--font-display);line-height:1.15;font-weight:600;margin:0}

.shell{width:min(var(--max),calc(100% - 2.5rem));margin-inline:auto;position:relative;z-index:1}

/* Dashed "route" divider used across pages */
.route-divider{height:2px;margin:var(--space-5) 0;background-image:repeating-linear-gradient(90deg,var(--clay) 0 6px,transparent 6px 14px);opacity:.5}

/* Shared dark footer */
.site-footer{padding:var(--space-4) 0;color:var(--canvas);background:var(--ink);font-size:.78rem;text-align:center}
.site-footer a{color:var(--canvas)}