/* Artisanal Indie — shared design system
   Extracted from 8 previously self-contained pages (blog.php, how-to.php,
   interviews.php, song-by-song.php, accessibility.html, catalog.html,
   homepage/index.html, artisanalindie-user-manual.html).

   Fix included in this extraction: [data-mode="focus"] (the high-contrast
   accessibility mode) was previously only defined on 3 of 8 pages
   (accessibility.html, homepage, user manual). blog.php, how-to.php,
   interviews.php, song-by-song.php, and catalog.html applied the saved
   data-mode="focus" attribute via JS but never defined its colors, so the
   mode silently had no effect on those 5 pages. Now defined once, here,
   so it's structurally impossible to define it on some pages and not others.
*/

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&family=Atkinson+Hyperlegible:wght@400;700&display=swap');

:root{
  --bg:#F8F6FC; --surface:#FFFFFF; --border:#E2DCF0;
  --text:#2C2A33; --text-2:#6B6470;
  --indigo:#524F96; --indigo-dim:#E3DEF2; --gold:#A9503E; --gold-dim:#FBE9E4;
  --radius:16px;
  --font-display:'Quicksand',Arial,sans-serif; --font-body:'Atkinson Hyperlegible',Arial,sans-serif;
}
[data-mode="light"]{ --bg:#FFFFFF; --surface:#FAFAFA; --border:#E5E5E5; --text:#1A1A1A; --text-2:#5A5A5A; --indigo:#3D3A7A; --indigo-dim:#EDEDF2; --gold:#8A3F2F; --gold-dim:#F2E9E6; }
[data-mode="glare"]{ --bg:#171522; --surface:#211E2E; --border:#37324A; --text:#F1EEF9; --text-2:#B7B0C9; --indigo:#B9B4EE; --indigo-dim:#2E2A47; --gold:#E8A38F; --gold-dim:#3A241F; }
/* Dark theme fix: --indigo flips to a light lavender here (so it reads as text on a dark
   page), but .btn-teal and .dial button.active use --indigo as a *background* with
   hardcoded white text — that combination is nearly invisible in this theme. Swap to the
   same background/text pairing already used elsewhere for active states (--indigo-dim +
   --indigo, see .rail a.active above) so it stays readable here too. */
[data-mode="glare"] .btn-teal,
[data-mode="glare"] .dial button.active{ background:var(--indigo-dim); color:var(--indigo); }
[data-mode="focus"]{ --bg:#FFFFFF; --surface:#EFEFEF; --text:#000000; --text-2:#1A1A1A; --border:#000000; --indigo:#0B4A3B; --indigo-dim:#D8EDE6; --gold:#7A2E1E; --gold-dim:#F6DCD3; }

body[data-dyslexia="true"]{ letter-spacing:0.02em; word-spacing:0.12em; line-height:1.7; }

*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:1.65;}
a{color:var(--indigo);}

.page{display:flex;}

/* Desktop rail nav */
.rail{width:64px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);min-height:100vh;padding:20px 0;display:flex;flex-direction:column;align-items:center;gap:18px;position:sticky;top:0;}
.rail a{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:var(--text-2);font-size:9.5px;width:52px;text-align:center;padding:6px 0;border-radius:12px;}
.rail a.active{background:var(--indigo-dim);color:var(--indigo);}
.rail .rail-icon{font-size:16px;}
.rail-logo{height:16px;width:auto;vertical-align:-3px;margin-right:2px;}
.btn-teal{background:var(--indigo);color:#fff;border:none;border-radius:999px;padding:10px 20px;font-family:var(--font-display);font-weight:600;font-size:13px;cursor:pointer;}
.btn-outline{background:transparent;color:var(--indigo);border:1.5px solid var(--indigo);border-radius:999px;padding:9px 19px;font-family:var(--font-display);font-weight:600;font-size:13px;cursor:pointer;}
@media (max-width:900px){ .rail{display:none;} }

/* Mobile bottom nav (replaces the rail under 900px) */
.mobile-nav{display:none;}
@media (max-width:900px){
  .mobile-nav{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:100;
    background:var(--surface); border-top:1px solid var(--border);
    justify-content:space-around; padding:6px 2px calc(6px + env(safe-area-inset-bottom));
  }
  .mobile-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--text-2);text-decoration:none;font-size:8.5px;padding:5px 4px;border-radius:10px;flex:1;text-align:center;}
  .mobile-nav a.active{background:var(--indigo-dim);color:var(--indigo);}
  .mobile-nav .rail-icon{font-size:16px;}
  /* 80px (not 64px) leaves safe room for a wrapped two-line label like
     "Accessibility" in the narrow mobile nav column, instead of shrinking
     the font to fit — illegible text is a worse outcome than a slightly
     taller reserved footer gap. */
  body{padding-bottom:80px;}
}

.top-strip{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-2);padding:14px 24px;border-bottom:1px solid var(--border);}
.top-strip a{color:inherit;text-decoration:none;}

footer{border-top:1px solid var(--border);margin-top:44px;padding-top:18px;font-size:12px;color:var(--text-2);}
footer .links{ display:flex; gap:16px; flex-wrap:wrap; }
footer .links a{ color:inherit; text-decoration:none; }
footer .links a:hover{ text-decoration:underline; }

.masthead-row{display:flex;align-items:flex-end;justify-content:space-between;padding:0 0 20px;gap:24px;flex-wrap:wrap;}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:28px;color:var(--indigo);line-height:1;}
.masthead-tagline{font-size:12px;color:var(--text-2);letter-spacing:0.02em;margin-top:8px;max-width:340px;}

.dial{display:flex;align-items:center;flex-wrap:wrap;border:2px solid var(--indigo);border-radius:999px;overflow:hidden;background:var(--surface);}
.dial button{font-family:var(--font-display);font-weight:600;font-size:12px;background:transparent;border:none;padding:9px 13px;cursor:pointer;color:var(--indigo);border-right:1px solid var(--border);}
.dial button:last-child{border-right:none;}
.dial button.active{background:var(--indigo);color:#fff;}

/* Shared theme-apply script — every page runs this on load so saved
   accessibility settings (mode + dyslexia toggle) take effect immediately,
   not just on the accessibility page itself. Pages include this inline
   (see manual, section 3) since it's JS, not CSS, but documented here
   since it's part of the same shared system. */