/* ─────────────────────────────────────────────────────────────────────────
   stem-shell.css — the cinematic skin for every non-cinematic page.

   The sub-pages (pricing, plans, courses, policies, SEO landers) were each
   hand-built on an older doc template: magenta + cyan, Bahnschrift, and a
   "STEMMUSIC ACADEMY" wordmark. They all happen to route every colour and
   both fonts through the same twelve CSS variables, so redefining those
   twelve re-skins the whole set without touching one line of page layout.

   Load this AFTER the page's own <style> block. It wins on cascade order.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  /* cinematic tokens, mapped onto the doc template's variable names */
  --bg:#0b0b0f;
  --bg2:#050507;
  --card:#16161f;
  --line:#2c2c3a;
  --text:#e8e8ee;
  --mut:#a6a6b8;
  --dim:#75758a;
  --mag:#ff8a3d;          /* was magenta  */
  --cyn:#ff5e2c;          /* was cyan     */
  --grad:linear-gradient(120deg,#ff8a3d,#ff5e2c);
  --disp:'Unbounded','Archivo',system-ui,sans-serif;
  --body:'Archivo',system-ui,-apple-system,sans-serif;

  /* extra tokens the shell itself uses */
  --accent:#ff8a3d;
  --border:#2c2c3a;
  --bg3:#050507;
  --ease:cubic-bezier(.16,1,.3,1);
}

body{background:var(--bg);color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased}

/* ── Nav ─────────────────────────────────────────────────────────────── */
nav.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(11,11,15,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
nav.nav .nav-in{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px 24px;max-width:1240px;margin:0 auto;
  /* The doc template pinned this to height:60px. On a phone the links wrap to
     a second row, and a fixed height let them spill out of the bar and land
     on top of the H1. Let the bar grow instead. */
  height:auto;min-height:60px;
}
nav.nav .logo{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--disp);font-weight:900;font-size:19px;letter-spacing:.02em;
  color:var(--text);text-decoration:none;background:none;-webkit-text-fill-color:currentColor;
}
nav.nav .logo svg{color:var(--accent);flex-shrink:0}
nav.nav .logo .dot{color:var(--accent)}
nav.nav .nav-links{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
nav.nav .nav-links a{
  font-size:14px;color:var(--mut);text-decoration:none;
  transition:color .3s var(--ease);
}
nav.nav .nav-links a:hover{color:var(--text)}
nav.nav .nav-cta{
  font-family:'Martian Mono','Archivo',monospace;font-size:12.5px;font-weight:700;
  background:var(--accent);color:#111;padding:9px 16px;border-radius:3px;
  text-decoration:none;white-space:nowrap;transition:opacity .3s var(--ease);
}
nav.nav .nav-cta:hover{opacity:.88}
nav.nav .back{font-size:14px;color:var(--mut);text-decoration:none}
nav.nav .back:hover{color:var(--text)}

/* Phones: one row, never two. A wrapped second row made the sticky bar 145px
   tall, which is a quarter of the screen. Keep Home, Sessions and the booking
   button; the rest of the site is reachable from the footer. */
@media(max-width:860px){
  nav.nav .nav-in{flex-wrap:nowrap;padding:10px 14px;gap:10px;min-height:54px}
  nav.nav .logo{font-size:17px}
  nav.nav .logo svg{width:21px;height:21px}
  nav.nav .nav-links{gap:14px;flex-wrap:nowrap}
  nav.nav .nav-links a{font-size:13px;white-space:nowrap}
  nav.nav .nav-links a[href="/#studio"],
  nav.nav .nav-links a[href="/#courses"],
  nav.nav .nav-links a[href="/#community"]{display:none}
  nav.nav .nav-cta{padding:8px 12px;font-size:11.5px}
}
/* Below ~400px the booking button was running off the right edge.
   Logo and the button only. */
@media(max-width:400px){
  nav.nav .nav-links a[href="/"],
  nav.nav .nav-links a[href="/book.html"]{display:none}
  nav.nav .logo{font-size:16px}
}

/* ── Type, so the content reads like the homepage ────────────────────── */
h1,h2,h3,h4{font-family:var(--disp);letter-spacing:-.015em}
h1{font-weight:900}
h2,h3{font-weight:700}
a{color:var(--accent)}
a:hover{color:#ffb072}
table th{font-family:var(--disp);font-weight:700}
code,kbd,samp{font-family:'Martian Mono',ui-monospace,monospace;font-size:.92em}

/* ── Footer ──────────────────────────────────────────────────────────── */
footer.stem-foot{
  background:var(--bg3);border-top:1px solid var(--border);
  padding:34px 24px;margin-top:64px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:13px;color:var(--dim);
}
footer.stem-foot .fl{display:flex;align-items:center;gap:10px;color:var(--mut)}
footer.stem-foot .fl svg{color:var(--accent)}
footer.stem-foot .fr{display:flex;gap:18px;flex-wrap:wrap}
footer.stem-foot a{color:var(--dim);text-decoration:none}
footer.stem-foot a:hover{color:var(--accent)}

/* ── Wide tables on phones ───────────────────────────────────────────────
   The pricing and plans tables are five columns wide. At 375px they pushed
   the whole page to 631px and the body scrolled sideways. Now the table
   scrolls inside its own box and the page does not. */
@media(max-width:760px){
  main table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  main table th,main table td{white-space:normal;min-width:92px}
  main table th:last-child,main table td:last-child{min-width:180px}
}