/* ============================================================
   INDIE Music School — page-level styles
   Layered on top of /design/colors_and_type.css
   ============================================================ */

:root {
  /* IMS lane — red as the brand accent, used sparingly */
  --ims-red:        var(--indie-red-500);     /* #D03020 */
  --ims-red-soft:   #E8D6D2;                  /* dusty wash */
  --ims-red-deep:   #A52416;
  --ims-red-tint:   #FBEEEB;                  /* tinted off-white wash */

  /* Tunable surface (Tweaks may override) */
  --page-bg:        var(--ink-50);            /* washi off-white */
  --page-ink:       var(--indie-navy-900);
  --page-ink-2:     var(--ink-700);
  --page-ink-3:     var(--ink-500);
  --page-surface:   var(--ink-0);
  --page-border:    var(--ink-200);
  --page-border-strong: var(--ink-300);

  /* Page-level red intensity (Tweaks sets this) */
  --accent-ims:     var(--ims-red);

  /* Tracking utilities */
  --caps-sm: 0.16em;
  --caps-lg: 0.20em;
}

/* Dark mode — navy ground */
html[data-theme="dark"] {
  --page-bg:        var(--indie-navy-900);
  --page-ink:       #F4F1EA;
  --page-ink-2:     #C9C6BC;
  --page-ink-3:     #9A968A;
  --page-surface:   #061F3D;
  --page-border:    #143559;
  --page-border-strong: #1E4373;
  --ims-red-tint:   #1A2A3F;
  --ims-red-soft:   #2B3853;
}

* { box-sizing: border-box; }

html, body {
  background: var(--page-bg);
  color: var(--page-ink);
  font-family: var(--font-sans);
  transition: background 240ms var(--ease-out), color 240ms var(--ease-out);
}

img { display: block; max-width: 100%; }

/* ============================================================
   Tokenized building blocks reused everywhere
   ============================================================ */

.ims-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--caps-lg);
  font-weight: 600;
  color: var(--page-ink-3);
}
.ims-eyebrow::before {
  content: "「";
  font-family: var(--font-jp);
  color: var(--accent-ims);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
}
.ims-eyebrow::after {
  content: "」";
  font-family: var(--font-jp);
  color: var(--accent-ims);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
}
.ims-eyebrow.plain::before,
.ims-eyebrow.plain::after { content: none; }

.ims-display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.92;
  color: var(--page-ink);
  margin: 0;
  text-wrap: balance;
}

.ims-heading {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--page-ink);
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

.ims-lede {
  color: var(--page-ink-2);
  line-height: 1.6;
  font-size: 18px;
  max-width: 56ch;
  text-wrap: pretty;
}

.ims-section {
  padding: 96px 32px;
  max-width: 1240px;
  margin: 0 auto;
}
.ims-section.tight { padding: 64px 32px; }

.ims-rule {
  height: 1px;
  background: var(--page-border);
  border: 0;
  margin: 0;
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 22px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
  line-height: 1;
}
.btn-primary {
  background: var(--accent-ims);
  color: #fff;
  border: 1.5px solid var(--page-ink);
  box-shadow: 4px 4px 0 var(--page-ink);
  padding: 13px 24px;
}
.btn-primary:hover { background: var(--ims-red-deep); }
.btn-primary:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--page-ink);
}
.btn-ghost {
  background: transparent;
  color: var(--page-ink);
  border: 1px solid var(--page-border-strong);
}
.btn-ghost:hover { background: var(--ink-100); }
html[data-theme="dark"] .btn-ghost:hover { background: #102747; }
.btn-link {
  background: transparent;
  padding: 13px 0;
  color: var(--accent-ims);
  font-weight: 600;
}
.btn-link:hover { color: var(--ims-red-deep); }
html[data-theme="dark"] .btn-link:hover { color: #F08070; }

/* ============================================================
   Card primitive
   ============================================================ */

.card {
  background: var(--page-surface);
  border: 1px solid var(--page-border);
  border-radius: 10px;
  padding: 24px;
  transition: border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.card.hoverable:hover {
  border-color: var(--page-ink);
  box-shadow: var(--shadow-2);
}

/* Stamp / sticker style frame */
.stampframe {
  border: 1.5px solid var(--page-ink);
  background: var(--page-surface);
  border-radius: 10px;
  box-shadow: 4px 4px 0 var(--page-ink);
}

/* ============================================================
   Animations
   ============================================================ */

@keyframes eq-bar {
  0%, 100% { transform: scaleY(0.35); }
  50%      { transform: scaleY(1); }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Numbers — JetBrains Mono accent
   ============================================================ */

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* JP accent class */
.jp {
  font-family: var(--font-jp);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* selection */
::selection {
  background: var(--accent-ims);
  color: #fff;
}

/* Hide scrollbars for horizontal scrollers */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ============================================================
   Responsive layout classes
   - .r-grid-2     →  2 columns desktop  → stack < 880
   - .r-grid-3     →  3 columns desktop  → 2 cols < 1100, 1 col < 700
   - .r-grid-4     →  4 columns desktop  → 2 cols < 1100, 1 col < 560
   - .r-grid-5     →  5 columns desktop  → 3 cols < 900, 2 cols < 540
   - .r-grid-6     →  6 columns desktop  → 3 cols < 900, 2 cols < 540
   - .r-grid-8     →  8 cols              → 6 cols < 900, 5 cols < 560
   - .r-stack-md   →  flex row             → flex column < 880
   ============================================================ */

.r-grid-2 { display: grid; grid-template-columns: 1fr 1fr; }
.r-grid-2[data-ratio="hero"]     { grid-template-columns: 1.05fr 1fr; }
.r-grid-2[data-ratio="copy-art"] { grid-template-columns: 1.2fr 1fr; }
.r-grid-2[data-ratio="art-copy"] { grid-template-columns: 1.1fr 1fr; }
.r-grid-2[data-ratio="sticky"]   { grid-template-columns: 1fr 1.4fr; }
.r-grid-2[data-ratio="enroll"]   { grid-template-columns: 1fr 1.6fr; }
.r-grid-2[data-ratio="quote"]    { grid-template-columns: 1.6fr 1fr; }
.r-grid-2[data-ratio="founder"]  { grid-template-columns: 1fr 1.1fr; }

.r-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.r-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.r-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); }
.r-grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); }
.r-grid-8 { display: grid; grid-template-columns: repeat(8, 1fr); }

/* Bento (Studio mosaic) */
.r-bento-studio {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 220px 220px 220px;
}

/* Footer row: 2fr 1fr 1fr 1fr 1fr → 2x2 → 1col */
.r-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
}

/* Enrollment stepper bar header */
.r-step-head {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

/* Level journey rail */
.r-level-rail {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

/* Tablet ≤ 1100px */
@media (max-width: 1100px) {
  .r-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .r-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .r-bento-studio { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
}

/* Tablet / Small laptop ≤ 900 — main stack break */
@media (max-width: 900px) {
  .ims-section { padding: 64px 20px; }
  .ims-section.tight { padding: 48px 20px; }

  .r-grid-2,
  .r-grid-2[data-ratio="hero"],
  .r-grid-2[data-ratio="copy-art"],
  .r-grid-2[data-ratio="art-copy"],
  .r-grid-2[data-ratio="sticky"],
  .r-grid-2[data-ratio="enroll"],
  .r-grid-2[data-ratio="quote"],
  .r-grid-2[data-ratio="founder"] {
    grid-template-columns: 1fr;
  }

  .r-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .r-grid-6 { grid-template-columns: repeat(3, 1fr); }
  .r-grid-8 { grid-template-columns: repeat(6, 1fr); }

  .r-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px !important;
  }

  /* Headings reduce */
  .ims-heading      { font-size: 38px !important; }
  .ims-heading.sm   { font-size: 28px !important; }
  .ims-display      { font-size: clamp(48px, 11vw, 80px) !important; }

  /* Hide sticky on stacked */
  .r-unstick { position: static !important; top: auto !important; }
}

/* Phone ≤ 700 */
@media (max-width: 700px) {
  .r-grid-3 { grid-template-columns: 1fr; }
  .r-grid-4 { grid-template-columns: 1fr; }
  .r-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .r-grid-6 { grid-template-columns: repeat(2, 1fr); }

  .r-bento-studio { grid-template-columns: 1fr; }
  .r-bento-studio > * {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 180px !important;
  }

  .r-footer-grid { grid-template-columns: 1fr; }

  /* Hide non-essential on phone */
  .r-hide-mobile { display: none !important; }
}

/* Tiny phone ≤ 540 */
@media (max-width: 540px) {
  .r-grid-5,
  .r-grid-6 { grid-template-columns: repeat(2, 1fr); }
  .r-grid-8 { grid-template-columns: repeat(5, 1fr); }

  .ims-heading    { font-size: 32px !important; }
  .ims-display    { font-size: clamp(40px, 12vw, 68px) !important; }
}

/* ============================================================
   Mobile NavBar — hamburger drawer
   ============================================================ */
.nav-mobile-toggle { display: none; }
.nav-desktop       { display: flex; }
.nav-cta-trial     { display: inline-flex; }
.nav-signin        { display: inline-flex; }

@media (max-width: 900px) {
  .nav-mobile-toggle { display: inline-flex; }
  .nav-desktop       { display: none; }
  .nav-signin        { display: none; }
}

@media (max-width: 540px) {
  .nav-cta-trial { display: none; }
}

.nav-drawer {
  position: fixed;
  top: 64px; left: 0; right: 0;
  background: var(--page-surface);
  border-bottom: 1px solid var(--page-border);
  padding: 20px 24px 32px;
  z-index: 28;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 12px 24px -16px rgba(0,0,0,.18);
  transform: translateY(-100%);
  transition: transform 240ms var(--ease-out);
}
.nav-drawer.open { transform: translateY(0); }
.nav-drawer a {
  padding: 14px 6px;
  font-size: 16px; font-weight: 600;
  color: var(--page-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--page-border);
}
.nav-drawer a:last-child { border-bottom: 0; }

/* ============================================================
   Misc mobile adjustments
   ============================================================ */
@media (max-width: 900px) {
  /* Hero placeholder: still readable */
  .hero-photo { aspect-ratio: 5 / 4 !important; }
  /* Reduce footer top padding */
  footer { padding: 56px 20px 28px !important; }
}

@media (max-width: 700px) {
  /* Level journey: scrollable rail */
  .r-level-rail {
    grid-template-columns: repeat(6, minmax(78px, 1fr));
  }
  .level-rail-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 24px !important;
    margin: 0 -8px;
  }
  .level-rail-wrap > .r-level-rail {
    min-width: 500px;
  }
  /* Stepper bar: only show numbers on tiny */
  .r-step-head .r-step-label { display: none; }
  .r-step-head .r-step-btn   { justify-content: center; }

  /* Founder spread: shrink photo block */
  .founder-photo { min-height: 320px !important; }
  .founder-bio   { padding: 32px 24px !important; }
  .founder-bio h3 { font-size: 44px !important; }

  /* Big card paddings */
  .card { padding: 20px !important; }

  /* Hero stats — collapse separators */
  .hero-dot-sep { display: none !important; }

  /* Stepper padding on small */
  .stepper-pad { padding: 24px 18px !important; }

  /* Pull quote padding */
  .quote-card { padding: 32px 24px !important; }

  /* Final CTA padding */
  .cta-card { padding: 40px 28px !important; }
  .cta-bg-word { font-size: 160px !important; right: -20px !important; bottom: -20px !important; }
}