/* ==========================================================================
   MUL 2720 · "Terrazzo Atelier" — base tokens + shared primitives
   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:#f7f1e6;
  --paper:#fff7ed;
  --ink:#2b2a25;
  --muted:#6f6a5d;
  --stone:#d7c8b6;
  --clay:#d07a5f;
  --sage:#7ca38b;
  --sun:#f2c36b;
  --ocean:#2f6f8d;
  --line:rgba(43,42,37,0.18);

  --shadow-cut:0 2px 0 rgba(43,42,37,0.5);
  --shadow-soft:0 14px 34px rgba(43,42,37,0.12);
  --shadow-lift:0 20px 48px rgba(43,42,37,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(208,122,95,0.22) 0 6px, transparent 6px),
    radial-gradient(circle at 78% 25%, rgba(124,163,139,0.2) 0 5px, transparent 5px),
    radial-gradient(circle at 30% 68%, rgba(47,111,141,0.18) 0 5px, transparent 5px),
    radial-gradient(circle at 60% 82%, rgba(242,195,107,0.24) 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)}