/*
Theme Name: The Magic Shop
Theme URI: https://themagicshop.digital
Author: The Magic Shop
Author URI: https://themagicshop.digital
Description: Custom theme for The Magic Shop — video post-production, niche apps, 360 VR, and live magic performances. Design system driven by Google Stitch.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
License URI: https://themagicshop.digital/terms
Text Domain: magicshop
*/

/* ==========================================================================
   DESIGN TOKENS — Source of truth: Google Stitch project 8780209662106897273
   "The Prestidigitator's Atelier" design system
   ========================================================================== */

:root {
  /* ---- Surface & Background ---- */
  --ms-background:               #111317;
  --ms-surface:                  #111317;
  --ms-surface-dim:              #111317;
  --ms-surface-bright:           #37393d;
  --ms-surface-container-lowest: #0c0e12;
  --ms-surface-container-low:    #1a1c20;
  --ms-surface-container:        #1e2024;
  --ms-surface-container-high:   #282a2e;
  --ms-surface-container-highest:#333539;
  --ms-surface-variant:          #333539;
  --ms-surface-tint:             #ffb59b;

  /* ---- Primary (Orange) — overridden dynamically by magicshop_dynamic_accent_css() ---- */
  --ms-accent-1:                 #fd5a05;
  --ms-accent-2:                 #ffb59b;
  --ms-accent-1-rgb:             253, 90, 5;
  --ms-accent-2-rgb:             255, 181, 155;
  --ms-accent-gradient:          linear-gradient(135deg, var(--ms-accent-1), var(--ms-accent-2));
  --ms-primary:                  #ffb59b;
  --ms-primary-container:        #fd5a05;
  --ms-on-primary:               #5b1b00;
  --ms-on-primary-container:     #501600;
  --ms-primary-fixed:            #ffdbcf;
  --ms-primary-fixed-dim:        #ffb59b;
  --ms-on-primary-fixed:         #380d00;
  --ms-on-primary-fixed-variant: #812900;
  --ms-inverse-primary:          #a93800;

  /* ---- Secondary (Purple) ---- */
  --ms-secondary:                #cdbdff;
  --ms-secondary-container:      #5203d5;
  --ms-on-secondary:             #370096;
  --ms-on-secondary-container:   #c0acff;
  --ms-secondary-fixed:          #e8deff;
  --ms-secondary-fixed-dim:      #cdbdff;
  --ms-on-secondary-fixed:       #20005f;
  --ms-on-secondary-fixed-variant:#4f00d0;

  /* ---- Tertiary (Cyan) ---- */
  --ms-tertiary:                 #44d8f1;
  --ms-tertiary-container:       #009fb4;
  --ms-on-tertiary:              #00363e;
  --ms-on-tertiary-container:    #002f36;
  --ms-tertiary-fixed:           #a1efff;
  --ms-tertiary-fixed-dim:       #44d8f1;
  --ms-on-tertiary-fixed:        #001f25;
  --ms-on-tertiary-fixed-variant:#004e59;

  /* ---- Error ---- */
  --ms-error:                    #ffb4ab;
  --ms-error-container:          #93000a;
  --ms-on-error:                 #690005;
  --ms-on-error-container:       #ffdad6;

  /* ---- On-surface & Text ---- */
  --ms-on-background:            #e2e2e7;
  --ms-on-surface:               #e2e2e7;
  --ms-on-surface-variant:       #e4beb2;
  --ms-inverse-on-surface:       #2e3035;
  --ms-inverse-surface:          #e2e2e7;

  /* ---- Outline ---- */
  --ms-outline:                  #ab897e;
  --ms-outline-variant:          #5b4137;

  /* ---- Typography ---- */
  --ms-font-display:  'Plus Jakarta Sans', sans-serif;
  --ms-font-headline: 'Plus Jakarta Sans', sans-serif;
  --ms-font-body:     'Inter', sans-serif;
  --ms-font-label:    'Manrope', sans-serif;

  /* ---- Type Scale ---- */
  --ms-display-lg:   3.5625rem;  /* 57px */
  --ms-display-md:   2.8125rem;  /* 45px */
  --ms-display-sm:   2.25rem;    /* 36px */
  --ms-headline-lg:  2rem;       /* 32px */
  --ms-headline-md:  1.75rem;    /* 28px */
  --ms-headline-sm:  1.5rem;     /* 24px */
  --ms-title-lg:     1.375rem;   /* 22px */
  --ms-title-md:     1rem;       /* 16px */
  --ms-title-sm:     0.875rem;   /* 14px */
  --ms-body-lg:      1rem;       /* 16px */
  --ms-body-md:      0.875rem;   /* 14px */
  --ms-body-sm:      0.75rem;    /* 12px */
  --ms-label-lg:     0.875rem;   /* 14px */
  --ms-label-md:     0.75rem;    /* 12px */
  --ms-label-sm:     0.6875rem;  /* 11px */

  /* ---- Spacing (2x scale) ---- */
  --ms-spacing-1:  0.25rem;   /* 4px */
  --ms-spacing-2:  0.5rem;    /* 8px */
  --ms-spacing-3:  0.75rem;   /* 12px */
  --ms-spacing-4:  1rem;      /* 16px */
  --ms-spacing-5:  1.25rem;   /* 20px */
  --ms-spacing-6:  1.5rem;    /* 24px */
  --ms-spacing-8:  2rem;      /* 32px */
  --ms-spacing-10: 2.5rem;    /* 40px */
  --ms-spacing-12: 3rem;      /* 48px */
  --ms-spacing-16: 4rem;      /* 64px */
  --ms-spacing-20: 5rem;      /* 80px */
  --ms-spacing-24: 6rem;      /* 96px */

  /* ---- Roundness ---- */
  --ms-rounded-sm:   0.5rem;
  --ms-rounded-md:   0.75rem;
  --ms-rounded-lg:   1rem;
  --ms-rounded-xl:   1.5rem;
  --ms-rounded-full: 9999px;

  /* ---- Elevation (ambient glow, not drop shadow) ---- */
  --ms-shadow-sm:  0 0 20px rgba(var(--ms-accent-2-rgb), 0.04);
  --ms-shadow-md:  0 0 40px rgba(var(--ms-accent-2-rgb), 0.06);
  --ms-shadow-lg:  0 0 60px rgba(var(--ms-accent-2-rgb), 0.08);

  /* ---- Layout ---- */
  --ms-max-width:  1280px;
  --ms-glass-blur: blur(20px);
}

/* ==========================================================================
   BASE RESET & GLOBALS
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  background-color: #000;
}

[id] {
  scroll-margin-top: 50px;
}

body {
  font-family: var(--ms-font-body);
  font-size: var(--ms-body-md);
  line-height: 1.6;
  color: var(--ms-on-surface);
  background-color: var(--ms-background);
  max-width: var(--ms-max-width);
  margin-inline: auto;
  overflow-x: hidden;
}

/* No pure white — use on-surface-variant for softer text */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ms-font-headline);
  color: var(--ms-on-surface);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h1 { font-size: var(--ms-display-lg); }
h2 { font-size: var(--ms-display-sm); }
h3 { font-size: var(--ms-headline-lg); }
h4 { font-size: var(--ms-headline-sm); }
h5 { font-size: var(--ms-title-lg); }
h6 { font-size: var(--ms-title-md); }

p {
  color: var(--ms-on-surface-variant);
  margin-bottom: var(--ms-spacing-4);
}

a {
  color: var(--ms-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--ms-primary-fixed);
}

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

/* ==========================================================================
   UTILITY: LABELS (Manrope, uppercase, tracked)
   ========================================================================== */

.ms-label {
  font-family: var(--ms-font-label);
  font-size: var(--ms-label-md);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ms-on-surface-variant);
}

.ms-label--sm {
  font-size: var(--ms-label-sm);
}

.ms-label--lg {
  font-size: var(--ms-label-lg);
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.ms-container {
  width: 100%;
  max-width: var(--ms-max-width);
  margin-inline: auto;
  padding-inline: var(--ms-spacing-6);
}

.ms-section {
  padding-block: var(--ms-spacing-20);
}

/* ==========================================================================
   BUTTONS — per design system
   ========================================================================== */

.ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ms-spacing-2);
  font-family: var(--ms-font-label);
  font-size: var(--ms-label-lg);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--ms-spacing-3) var(--ms-spacing-6);
  border: none;
  border-radius: var(--ms-rounded-full);
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
}

.ms-btn--primary {
  background: linear-gradient(135deg, var(--ms-primary), var(--ms-primary-container));
  color: var(--ms-on-primary);
}

.ms-btn--primary:hover {
  box-shadow: 0 0 20px rgba(var(--ms-accent-1-rgb), 0.4), 0 0 40px rgba(var(--ms-accent-1-rgb), 0.15);
  filter: brightness(1.08);
  color: #fff;
}

.ms-btn--secondary {
  background-color: var(--ms-surface-container-highest);
  color: var(--ms-on-surface);
}

.ms-btn--secondary:hover {
  background-color: var(--ms-surface-bright);
}

.ms-btn--ghost {
  background: transparent;
  color: var(--ms-primary);
  border: 1px solid rgba(var(--ms-accent-1-rgb), 0.15);
}

.ms-btn--ghost:hover {
  background: rgba(var(--ms-accent-2-rgb), 0.06);
}

/* ==========================================================================
   CARDS — no borders, tonal layering
   ========================================================================== */

.ms-card {
  background-color: var(--ms-surface-container-low);
  border-radius: var(--ms-rounded-xl);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.ms-card:hover {
  box-shadow: var(--ms-shadow-md);
  transform: translateY(-2px);
}

.ms-card__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.ms-card__body {
  padding: var(--ms-spacing-6);
}

.ms-card__title {
  font-size: var(--ms-title-lg);
  margin-bottom: var(--ms-spacing-2);
}

.ms-card__desc {
  font-size: var(--ms-body-md);
  color: var(--ms-on-surface-variant);
}

/* ==========================================================================
   GLASSMORPHISM — for nav, floating elements
   ========================================================================== */

.ms-glass {
  background: rgba(30, 32, 36, 0.7);
  backdrop-filter: var(--ms-glass-blur);
  -webkit-backdrop-filter: var(--ms-glass-blur);
}

/* ==========================================================================
   MYSTIC CHIP — glassmorphic tags/filters
   ========================================================================== */

.ms-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--ms-spacing-1) var(--ms-spacing-3);
  font-family: var(--ms-font-label);
  font-size: var(--ms-label-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--ms-rounded-full);
  background: rgba(205, 189, 255, 0.1);
  backdrop-filter: blur(8px);
  color: var(--ms-secondary);
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.ms-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--ms-max-width);
  z-index: 100;
  background: rgba(30, 32, 36, 0.65);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: var(--ms-glass-blur);
  -webkit-backdrop-filter: var(--ms-glass-blur);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* Push header below WP admin bar when logged in */
.admin-bar .ms-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .ms-header {
    top: 46px;
  }
}

.ms-header.is-scrolled {
  background: rgba(30, 32, 36, 0.6);
  box-shadow: var(--ms-shadow-sm);
}

.ms-header__inner {
  display: flex;
  align-items: center;
  padding-block: var(--ms-spacing-4);
}

.ms-header__brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.ms-header__wordmark {
  display: flex;
  align-items: center;
  gap: var(--ms-spacing-2);
  overflow: visible;
}

.ms-header__wand {
  height: 22px;
  width: auto;
  flex-shrink: 0;
}

/* Custom logos may have different proportions than the default wand.
   Safari clips child elements inside backdrop-filter containers at subpixel
   boundaries. translateZ(0) promotes the logo to its own compositing layer,
   preventing the header's backdrop-filter from clipping the SVG edges. */
.ms-header__wand--custom {
  height: 28px;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  overflow: visible;
}

/* Inline SVG logo: the <span> wrapper needs to size the inner <svg> properly.
   Inline SVGs respect overflow: visible, preventing Safari's backdrop-filter
   from clipping the spade tip — unlike <img> which clips at the content box. */
.ms-header__wand--svg {
  display: inline-flex;
  align-items: center;
}
.ms-header__wand--svg svg {
  height: 28px;
  width: auto;
  overflow: visible;
}

.ms-header__wordmark-text {
  font-family: var(--ms-font-label);
  font-size: var(--ms-label-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ms-on-surface);
  white-space: nowrap;
}

.ms-header__wordmark-accent {
  color: var(--ms-primary-container);
}

.ms-header__wordmark-text::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: var(--ms-primary-container);
  transition: width 0.3s ease;
  margin-top: 2px;
}

.ms-header__brand:hover .ms-header__wordmark-text::after,
.ms-header__brand.is-animating .ms-header__wordmark-text::after {
  width: 100%;
}

.ms-nav__list {
  display: flex;
  align-items: center;
  gap: var(--ms-spacing-8);
  list-style: none;
}

.ms-nav__list a {
  font-family: var(--ms-font-label);
  font-size: var(--ms-label-md);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ms-on-surface-variant);
  transition: color 0.2s ease;
}

.ms-nav__list a:hover {
  color: var(--ms-primary-container);
}

.ms-nav__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.ms-nav__cta {
  flex-shrink: 0;
}

/* Hamburger toggle */
.ms-nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--ms-spacing-2);
  z-index: 110;
}

.ms-nav__toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ms-on-surface);
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.ms-nav__toggle.is-open .ms-nav__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.ms-nav__toggle.is-open .ms-nav__toggle-bar:nth-child(2) {
  opacity: 0;
}
.ms-nav__toggle.is-open .ms-nav__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Offset body for fixed header */
.ms-main {
  padding-top: 80px;
}

/* ==========================================================================
   HERO — Full-screen with smoke background (from Stitch)
   ========================================================================== */

.ms-hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background: var(--ms-surface-container-lowest);
  padding-top: 100px;
  padding-bottom: 140px;
}

/* Remove main padding on homepage hero */
.home .ms-main {
  padding-top: 0;
}

.ms-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.ms-hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  filter: hue-rotate(180deg) brightness(0.8) contrast(1.2);
}

.ms-hero__gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ms-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-inline: var(--ms-spacing-6);
  max-width: 1000px;
}

.ms-hero__eyebrow {
  display: inline-block;
  margin-bottom: var(--ms-spacing-6);
}

.ms-hero__title {
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: var(--ms-spacing-8);
}

.ms-gradient-text {
  --ms-accent: var(--ms-accent-1, var(--ms-primary));
  --ms-accent-end: var(--ms-accent-2, #ffb59b);
  color: var(--ms-accent);
  background: linear-gradient(135deg, var(--ms-accent), var(--ms-accent-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ms-hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--ms-on-surface-variant);
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--ms-spacing-10);
  line-height: 1.7;
}

.ms-hero__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--ms-spacing-6);
  flex-wrap: wrap;
}

.ms-btn--glass {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-spacing-2);
  padding: var(--ms-spacing-4) var(--ms-spacing-8);
  border-radius: var(--ms-rounded-full);
  background: rgba(26, 28, 32, 0.7);
  backdrop-filter: var(--ms-glass-blur);
  -webkit-backdrop-filter: var(--ms-glass-blur);
  border: 1px solid rgba(var(--ms-accent-1-rgb), 0.2);
  color: #fff;
  font-family: var(--ms-font-label);
  font-size: var(--ms-label-lg);
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease;
}

.ms-btn--glass:hover {
  background: rgba(255, 255, 255, 0.1);
}

.ms-btn--glass .material-symbols-outlined {
  font-size: 1rem;
}

.ms-btn--lg {
  padding: var(--ms-spacing-4) var(--ms-spacing-10);
  font-size: var(--ms-label-lg);
}

/* Scroll indicator */
.ms-hero__scroll-indicator {
  position: absolute;
  bottom: var(--ms-spacing-10);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ms-spacing-4);
  opacity: 0.4;
  z-index: 2;
}

.ms-hero__scroll-line {
  width: 1px;
  height: 64px;
  background: linear-gradient(to bottom, var(--ms-primary), transparent);
}

/* ---------- Hero Split Layout (video, image, gallery, showcase) ---------- */

.ms-hero--split .ms-hero__split {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--ms-spacing-12);
  max-width: var(--ms-max-width);
  width: 100%;
  padding-inline: var(--ms-spacing-16);
}

.ms-hero--split .ms-hero__text {
  text-align: left;
}

.ms-hero--split .ms-hero__subtitle {
  margin-inline: 0;
}

.ms-hero--split .ms-hero__actions {
  justify-content: flex-start;
}

/* Hero media container */
.ms-hero__media {
  border-radius: var(--ms-rounded-xl);
  overflow: hidden;
}

.ms-hero__featured-img {
  width: 100%;
  height: auto;
  border-radius: var(--ms-rounded-xl);
  object-fit: cover;
  max-height: 70vh;
}

.ms-hero__media .ms-video-embed {
  border-radius: var(--ms-rounded-xl);
  overflow: hidden;
}

.ms-hero__media .ms-video-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--ms-rounded-xl);
}

/* Hero gallery */
.ms-hero-gallery {
  position: relative;
  border-radius: var(--ms-rounded-xl);
  overflow: hidden;
}

.ms-hero-gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ms-hero-gallery__track::-webkit-scrollbar {
  display: none;
}

.ms-hero-gallery__img {
  flex: 0 0 100%;
  width: 100%;
  object-fit: cover;
  scroll-snap-align: start;
  aspect-ratio: 16 / 9;
}

.ms-hero-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(30, 32, 36, 0.7);
  backdrop-filter: blur(20px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background 0.2s ease;
}

.ms-hero-gallery__nav:hover {
  background: var(--ms-primary-container);
}

.ms-hero-gallery__nav--prev {
  left: var(--ms-spacing-3);
}

.ms-hero-gallery__nav--next {
  right: var(--ms-spacing-3);
}

/* ── Hero Aspect Ratio Variants ── */

/* Portrait: narrower media column, taller container */
.ms-hero--portrait .ms-hero__split {
  grid-template-columns: 1.4fr 0.6fr;
  max-width: calc(var(--ms-max-width) - 4rem);
}

.ms-hero--portrait .ms-hero__media .ms-video-embed {
  padding-bottom: 0;
  height: auto;
}

.ms-hero--portrait .ms-hero__media .ms-video-embed iframe {
  position: relative;
  aspect-ratio: 9 / 16;
  max-height: 65vh;
}

.ms-hero--portrait .ms-hero-gallery__img {
  aspect-ratio: 9 / 16;
}

.ms-hero--portrait .ms-hero__media {
  max-height: 65vh;
}

/* App showcase — phone frame */
.ms-hero--showcase .ms-hero__split {
  grid-template-columns: 1.3fr 0.7fr;
}

.ms-hero--showcase .ms-hero__media {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  border-radius: 0;
  perspective: 1000px;
}

.ms-hero__phone-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: rotateY(var(--ms-phone-pan, -15deg)) rotateX(var(--ms-phone-tilt, 4deg));
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.ms-hero__phone-wrap:hover {
  transform: rotateY(0deg) rotateX(0deg);
}

.ms-hero__phone-frame {
  position: relative;
  width: 280px;
  border-radius: 42px;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  isolation: isolate;
}

.ms-hero__phone-bezel {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.5));
}

.ms-hero__phone-screen {
  position: absolute;
  top: 2%;
  left: 4.3%;
  right: 4.3%;
  bottom: 2%;
  border-radius: 36px;
  overflow: hidden;
  z-index: 3;
}

.ms-hero__phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ms-hero__badge {
  display: block;
  margin-top: var(--ms-spacing-2);
  padding: var(--ms-spacing-2) var(--ms-spacing-5);
  background: rgba(26, 28, 32, 0.7);
  backdrop-filter: var(--ms-glass-blur);
  -webkit-backdrop-filter: var(--ms-glass-blur);
  border: 1px solid rgba(var(--ms-accent-1-rgb), 0.2);
  color: #fff;
  border-radius: var(--ms-rounded-full);
  font-family: var(--ms-font-label);
  font-size: var(--ms-label-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease;
}

a.ms-hero__badge:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* ==========================================================================
   POST-LEVEL PHONE MOCKUP (single pages + modals)
   ========================================================================== */

.ms-single-post__hero--showcase {
  display: flex;
  justify-content: center;
  padding: var(--ms-spacing-6) 0;
  perspective: 1000px;
}

.ms-post-phone-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: rotateY(var(--ms-phone-pan, -15deg)) rotateX(var(--ms-phone-tilt, 4deg));
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.ms-post-phone-wrap:hover {
  transform: rotateY(0deg) rotateX(0deg);
}

.ms-post-phone-frame {
  position: relative;
  width: 280px;
  border-radius: 42px;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  isolation: isolate;
}

.ms-post-phone-bezel {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
  pointer-events: none;
  display: block;
  filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.5));
}

.ms-post-phone-screen {
  position: absolute;
  top: 2%;
  left: 4.3%;
  right: 4.3%;
  bottom: 2%;
  border-radius: 36px;
  overflow: hidden;
  z-index: 3;
}

.ms-post-phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Showcase split layout — text left, phone right */
.ms-showcase-split {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--ms-spacing-16);
  align-items: center;
  margin-top: var(--ms-spacing-8);
  max-width: 900px;
  margin-inline: auto;
}

.ms-showcase-split__text {
  min-width: 0;
}

.ms-showcase-split__media {
  perspective: 1000px;
  display: flex;
  justify-content: center;
}

/* ==========================================================================
   DISCIPLINES — Services section (from Stitch)
   ========================================================================== */

.ms-disciplines__header {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--ms-spacing-10);
  gap: var(--ms-spacing-8);
}

.ms-disciplines__header h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  color: #fff;
  margin-bottom: var(--ms-spacing-6);
}

.ms-disciplines__intro {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  color: var(--ms-on-surface-variant);
  max-width: 560px;
}

.ms-disciplines__counter {
  border-left: 1px solid rgba(var(--ms-accent-1-rgb), 0.3);
  padding-left: var(--ms-spacing-6);
  padding-bottom: var(--ms-spacing-2);
  color: var(--ms-primary);
  white-space: nowrap;
}

.ms-disciplines__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ms-spacing-8);
}

.ms-discipline-card {
  padding: var(--ms-spacing-10);
  border-radius: var(--ms-rounded-xl);
  background: var(--ms-surface-container-low);
  border: 1px solid transparent;
  transition: background 0.5s ease, border-color 0.5s ease;
  overflow: hidden;
}

.ms-discipline-card:hover {
  background: var(--ms-surface-container-high);
  border-color: rgba(var(--ms-accent-1-rgb), 0.1);
}

.ms-discipline-card__icon {
  font-size: 2.25rem;
  margin-bottom: var(--ms-spacing-8);
  display: block;
}

.ms-discipline-card__icon--primary  { color: var(--ms-primary); }
.ms-discipline-card__icon--tertiary { color: var(--ms-tertiary); }
.ms-discipline-card__icon--secondary { color: var(--ms-secondary); }
.ms-discipline-card__icon--muted    { color: rgba(255, 255, 255, 0.5); }

.ms-discipline-card__title {
  font-size: var(--ms-headline-sm);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--ms-spacing-4);
}

.ms-discipline-card__desc {
  color: var(--ms-on-surface-variant);
  line-height: 1.7;
  margin-bottom: var(--ms-spacing-6);
}

/* Hover line animation */
.ms-discipline-card__line {
  height: 1px;
  width: 0;
  transition: width 0.7s ease;
}

.ms-discipline-card:hover .ms-discipline-card__line {
  width: 100%;
}

.ms-discipline-card__line--primary   { background: var(--ms-primary); }
.ms-discipline-card__line--tertiary  { background: var(--ms-tertiary); }
.ms-discipline-card__line--secondary { background: var(--ms-secondary); }
.ms-discipline-card__line--white     { background: #fff; }

/* Wide card (Live Magic — spans 2 columns) */
.ms-discipline-card--wide {
  grid-column: span 2;
}

.ms-discipline-card__row {
  display: flex;
  flex-direction: row;
  gap: var(--ms-spacing-8);
  align-items: center;
}

.ms-discipline-card__text {
  flex: 1;
}

.ms-discipline-card__media {
  width: 33%;
  aspect-ratio: 16 / 9;
  border-radius: var(--ms-rounded-lg);
  overflow: hidden;
}

.ms-discipline-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   ARTIFACTS — Tilted perspective portfolio grid (from Stitch)
   ========================================================================== */

.ms-artifacts {
  background: var(--ms-surface-container-lowest);
  overflow: hidden;
}

.ms-artifacts__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-spacing-6);
  margin-bottom: var(--ms-spacing-10);
  position: relative;
}

.ms-artifacts__heading {
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 900;
  color: #fff;
  text-align: center;
  letter-spacing: -0.03em;
}

.ms-artifacts__view-all {
  position: absolute;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--ms-spacing-1);
  font-size: 0.7rem;
  padding: var(--ms-spacing-2) var(--ms-spacing-4);
  white-space: nowrap;
}

.ms-artifacts__view-all .material-symbols-outlined {
  font-size: 0.9em;
  transition: transform 0.2s ease;
}

.ms-artifacts__view-all:hover .material-symbols-outlined {
  transform: translateX(3px);
}

.ms-artifacts__tilted-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ms-spacing-6);
  padding-inline: var(--ms-spacing-12);
  transform: perspective(1000px) rotateX(4deg) rotateY(-8deg) rotateZ(2deg);
}

.ms-artifact-tile {
  position: relative;
  background: var(--ms-surface-container);
  overflow: hidden;
  border-radius: var(--ms-rounded-xl);
  cursor: pointer;
  text-decoration: none;
  display: block;
}

.ms-artifact-tile__img,
.ms-artifact-tile__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.7s ease, transform 0.7s ease;
}

.ms-artifact-tile__placeholder {
  background: var(--ms-surface-container-high);
}

.ms-artifact-tile:hover .ms-artifact-tile__img {
  filter: grayscale(0%);
  transform: scale(1.1);
}

.ms-artifact-tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(17, 19, 23, 0.9), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--ms-spacing-6);
}

.ms-artifact-tile:hover .ms-artifact-tile__overlay {
  opacity: 1;
}

.ms-artifact-tile__category {
  margin-bottom: var(--ms-spacing-2);
}

.ms-artifact-tile--primary .ms-artifact-tile__category  { color: var(--ms-primary); }
.ms-artifact-tile--tertiary .ms-artifact-tile__category  { color: var(--ms-tertiary); }
.ms-artifact-tile--secondary .ms-artifact-tile__category { color: var(--ms-secondary); }

.ms-artifact-tile__title {
  font-family: var(--ms-font-headline);
  font-size: var(--ms-title-lg);
  font-weight: 700;
  color: #fff;
}

/* Aspect ratio and offset variations */
.ms-artifact-tile--tall     { aspect-ratio: 3 / 4; }
.ms-artifact-tile--square   { aspect-ratio: 1 / 1; }
.ms-artifact-tile--portrait { aspect-ratio: 4 / 5; }

.ms-artifact-tile--offset-down { margin-top: var(--ms-spacing-12); }
.ms-artifact-tile--offset-up   { margin-top: calc(-1 * var(--ms-spacing-8)); }
.ms-artifact-tile--offset-sm   { margin-top: var(--ms-spacing-4); }

/* ==========================================================================
   PORTFOLIO MODAL
   ========================================================================== */

.ms-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--ms-spacing-4);
}

.ms-modal[aria-hidden="false"] {
  display: flex;
}

.ms-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 19, 23, 0.95);
  backdrop-filter: blur(40px);
}

.ms-modal__panel {
  position: relative;
  width: 100%;
  max-width: 1200px;
  max-height: 100%;
  background: var(--ms-surface-container-low);
  border-radius: var(--ms-rounded-xl);
  overflow-y: auto;
  border: 1px solid rgba(var(--ms-accent-1-rgb), 0.2);
}

.ms-modal__content {
  padding: var(--ms-spacing-8);
}

/* ==========================================================================
   HOME — SINGLE-CARD SECTIONS (Current Event + Latest Journal)
   ========================================================================== */

.ms-home-section__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ms-spacing-8);
  margin-bottom: var(--ms-spacing-10);
  position: relative;
}

.ms-home-section__header h2 {
  font-family: var(--ms-font-headline);
  font-size: var(--ms-headline-lg);
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.ms-home-section__header .ms-btn--glass {
  position: absolute;
  right: 0;
  font-size: 0.7rem;
  padding: var(--ms-spacing-2) var(--ms-spacing-4);
  white-space: nowrap;
}

.ms-home-section__header .ms-btn--glass .material-symbols-outlined {
  font-size: 0.9em;
  transition: transform 0.2s ease;
}

.ms-home-section__header .ms-btn--glass:hover .material-symbols-outlined {
  transform: translateX(3px);
}

.ms-home-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--ms-rounded-xl);
  background: var(--ms-surface-container-low);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s ease;
  border: 1px solid transparent;
}

.ms-home-card:hover {
  border-color: rgba(var(--ms-accent-1-rgb), 0.15);
}

.ms-home-card__media {
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.ms-home-card__media a {
  display: block;
  height: 100%;
}

.ms-home-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.7s ease;
}

.ms-home-card:hover .ms-home-card__img {
  transform: scale(1.05);
}

.ms-home-card__body {
  padding: var(--ms-spacing-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--ms-spacing-3);
}

.ms-home-card__title {
  font-family: var(--ms-font-headline);
  font-size: var(--ms-headline-md);
  font-weight: 700;
  color: #fff;
}

.ms-home-card__title a {
  color: inherit;
  text-decoration: none;
}

.ms-home-card__excerpt {
  font-size: var(--ms-body-md);
  color: var(--ms-on-surface-variant);
  line-height: 1.6;
}

.ms-home-card__meta {
  margin-bottom: var(--ms-spacing-1);
}

.ms-home-card__venue {
  display: flex;
  align-items: center;
  gap: var(--ms-spacing-2);
  font-family: var(--ms-font-label);
  font-size: var(--ms-label-sm);
  color: rgba(255, 255, 255, 0.6);
  margin-top: auto;
}

.ms-home-card__venue .material-symbols-outlined {
  font-size: 1rem;
  color: var(--ms-primary);
}

.ms-home-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-spacing-2);
  font-family: var(--ms-font-label);
  font-size: var(--ms-label-lg);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ms-primary);
  text-decoration: none;
  margin-top: auto;
  transition: gap 0.2s ease;
}

.ms-home-card__link:hover {
  gap: var(--ms-spacing-3);
}

.ms-home-card__link .material-symbols-outlined {
  font-size: 1rem;
}

/* Academy featured card — needs visual weight against smoke background */
.ms-home-card--academy {
  background: rgba(30, 32, 36, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ms-on-surface);
}
.ms-home-card--academy:hover {
  border-color: rgba(var(--ms-accent-1-rgb), 0.25);
  color: var(--ms-on-surface);
}
.ms-home-card--academy:not(:has(.ms-home-card__media)) {
  grid-template-columns: 1fr;
}
.ms-home-card--academy .ms-home-card__body {
  padding: var(--ms-spacing-8) var(--ms-spacing-10);
}
.ms-home-card--academy .ms-home-card__title {
  font-size: var(--ms-headline-lg);
  color: var(--ms-on-surface);
}
.ms-home-card--academy .ms-home-card__excerpt {
  color: var(--ms-on-surface-variant);
}

/* Home event card */
.ms-home-card__time {
  font-family: var(--ms-font-label);
  font-size: var(--ms-label-sm);
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
  .ms-home-card {
    grid-template-columns: 1fr;
  }

  .ms-home-card__media {
    max-height: 240px;
  }

  .ms-home-section__header,
  .ms-artifacts__header {
    flex-direction: column;
    align-items: center;
    gap: var(--ms-spacing-4);
  }

  .ms-home-section__header .ms-btn--glass,
  .ms-artifacts__view-all {
    position: static;
  }
}

/* ==========================================================================
   SECONDARY CTA — Rounded card with ambient glow (from Stitch)
   ========================================================================== */

.ms-secondary-cta__card {
  position: relative;
  overflow: hidden;
  background: var(--ms-surface-container-low);
  border: 1px solid rgba(var(--ms-accent-1-rgb), 0.1);
  border-radius: var(--ms-rounded-xl);
  padding: var(--ms-spacing-12);
  text-align: center;
  max-width: 1000px;
  margin-inline: auto;
}

.ms-secondary-cta__glow {
  position: absolute;
  width: 256px;
  height: 256px;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}

.ms-secondary-cta__glow--primary {
  top: -96px;
  right: -96px;
  background: rgba(var(--ms-accent-1-rgb), 0.1);
}

.ms-secondary-cta__glow--tertiary {
  bottom: -96px;
  left: -96px;
  background: rgba(68, 216, 241, 0.1);
}

.ms-secondary-cta__card h2 {
  position: relative;
  font-size: clamp(2rem, 4vw, 3.75rem);
  color: #fff;
  margin-bottom: var(--ms-spacing-8);
  letter-spacing: -0.02em;
}

.ms-secondary-cta__emphasis {
  color: var(--ms-primary);
  font-style: italic;
}

/* Italic gradient text needs extra inline padding so background-clip: text
   doesn't clip the trailing glyph that leans past the element box */
em.ms-gradient-text {
  padding-inline-end: 0.15em;
}

.ms-secondary-cta__card p {
  position: relative;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--ms-on-surface-variant);
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--ms-spacing-12);
}

/* ==========================================================================
   GRIDS (portfolio, blog, events)
   ========================================================================== */

.ms-grid--portfolio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--ms-spacing-6);
}

.ms-grid--blog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--ms-spacing-6);
}

.ms-grid--events {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--ms-spacing-6);
}

/* ==========================================================================
   PAGE HEADERS
   ========================================================================== */

.ms-page-header {
  margin-bottom: var(--ms-spacing-12);
}

.ms-page-header h1 {
  margin-top: var(--ms-spacing-3);
}

.ms-section__cta {
  margin-top: var(--ms-spacing-12);
  text-align: center;
}

/* ==========================================================================
   FILTER BAR
   ========================================================================== */

.ms-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-spacing-2);
  margin-bottom: var(--ms-spacing-10);
}

/* Filter chip buttons — reset browser defaults, match Mystic Chip */
.ms-filter-bar .ms-chip {
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.ms-filter-bar .ms-chip:hover {
  background: rgba(205, 189, 255, 0.2);
  color: #fff;
}

.ms-chip--active {
  background: rgba(205, 189, 255, 0.25);
  color: #fff;
}

/* ==========================================================================
   SINGLE POST / ARTIFACT
   ========================================================================== */

.ms-container--narrow {
  max-width: 800px;
}

.ms-post-header,
.ms-artifact-header,
.ms-event-header {
  margin-bottom: var(--ms-spacing-10);
}

.ms-post-header h1,
.ms-artifact-header h1,
.ms-event-header h1 {
  margin-top: var(--ms-spacing-3);
  margin-bottom: var(--ms-spacing-4);
}

.ms-post-meta {
  margin-top: var(--ms-spacing-3);
  color: var(--ms-on-surface-variant);
  font-size: var(--ms-body-sm);
}

.ms-post-hero,
.ms-artifact-hero,
.ms-event-hero {
  margin-bottom: var(--ms-spacing-10);
  border-radius: var(--ms-rounded-xl);
  overflow: hidden;
}

.ms-post-hero img,
.ms-artifact-hero__img img,
.ms-event-hero img {
  width: 100%;
  height: auto;
}

.ms-post__content,
.ms-artifact__content,
.ms-event__content {
  font-size: var(--ms-body-lg);
  line-height: 1.75;
  color: var(--ms-on-surface-variant);
}

.ms-post__content p,
.ms-artifact__content p,
.ms-event__content p {
  margin-bottom: var(--ms-spacing-6);
}

.ms-artifact__tags {
  display: flex;
  gap: var(--ms-spacing-2);
  flex-wrap: wrap;
  margin-top: var(--ms-spacing-10);
}

.ms-artifact__cta {
  margin-top: var(--ms-spacing-8);
}

.ms-post-nav {
  margin-top: var(--ms-spacing-16);
  padding-top: var(--ms-spacing-8);
  border-top: 1px solid rgba(var(--ms-accent-1-rgb), 0.15);
}

/* ==========================================================================
   EVENT META
   ========================================================================== */

.ms-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-spacing-8);
  margin-top: var(--ms-spacing-6);
}

.ms-event-meta__item {
  display: flex;
  flex-direction: column;
  gap: var(--ms-spacing-1);
}

.ms-event-meta__item--push {
  margin-left: auto;
  padding-right: var(--ms-spacing-4);
}

.ms-event-meta__address {
  font-size: var(--ms-body-sm);
  color: var(--ms-on-surface-variant);
}

/* ==========================================================================
   CTA SECTION
   ========================================================================== */

.ms-cta {
  text-align: center;
  background: var(--ms-surface-container-low);
}

.ms-cta__inner {
  max-width: 700px;
}

.ms-cta h2 {
  margin-top: var(--ms-spacing-3);
  margin-bottom: var(--ms-spacing-4);
}

.ms-cta p {
  margin-bottom: var(--ms-spacing-8);
}

/* ==========================================================================
   404
   ========================================================================== */

.ms-404 {
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.ms-404__inner {
  text-align: center;
  max-width: 600px;
}

.ms-404 h1 {
  margin-top: var(--ms-spacing-3);
  margin-bottom: var(--ms-spacing-4);
}

.ms-404 p {
  margin-bottom: var(--ms-spacing-8);
}

/* ==========================================================================
   FORM INPUTS — per design system (no borders, tonal shift on focus)
   ========================================================================== */

.ms-input {
  width: 100%;
  font-family: var(--ms-font-body);
  font-size: var(--ms-body-md);
  color: var(--ms-on-surface);
  background: var(--ms-surface-container-low);
  border: none;
  border-radius: var(--ms-rounded-md);
  padding: var(--ms-spacing-3) var(--ms-spacing-4);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.ms-input::placeholder {
  color: var(--ms-outline);
}

.ms-input:focus {
  outline: none;
  background: var(--ms-surface-container-high);
  box-shadow: var(--ms-shadow-sm);
}

.ms-input--textarea {
  resize: vertical;
  min-height: 120px;
}

/* ==========================================================================
   FOOTER — canonical from homepage: contact form + flat link row
   ========================================================================== */

.ms-footer {
  background: var(--ms-surface-container-lowest);
}

.ms-footer__form-section {
  padding-block: var(--ms-spacing-20);
}

/* Two-column footer layout */
.ms-footer__columns {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--ms-spacing-16);
  align-items: start;
}

.ms-footer__col-form h2 {
  margin-bottom: var(--ms-spacing-2);
}

.ms-footer__col-form p {
  margin-bottom: var(--ms-spacing-8);
  color: var(--ms-on-surface-variant);
}

/* Right column: contact info + social */
.ms-footer__col-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--ms-spacing-8);
  background: var(--ms-surface-container-low);
  border-radius: var(--ms-rounded-xl);
  height: fit-content;
}

.ms-footer__contact-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ms-spacing-6);
  padding-bottom: var(--ms-spacing-8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: var(--ms-spacing-8);
}

.ms-footer__contact-item {
  display: flex;
  flex-direction: column;
  gap: var(--ms-spacing-2);
}

.ms-footer__phone {
  color: #fff;
  text-decoration: none;
  font-size: var(--ms-body-lg);
  font-weight: 600;
  transition: color 0.2s ease;
}

.ms-footer__phone:hover {
  color: var(--ms-primary);
}

.ms-footer__address {
  color: var(--ms-on-surface-variant);
  font-size: var(--ms-body-sm);
  line-height: 1.7;
}

/* Anti-scraping: reverse text visually */
.ms-obfuscated {
  direction: rtl;
  unicode-bidi: bidi-override;
}

/* Social links */
.ms-footer__social h3 {
  margin-bottom: var(--ms-spacing-6);
}

.ms-footer__social-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-spacing-2) var(--ms-spacing-6);
}

.ms-footer__social-list li {
  display: inline;
}

.ms-footer__social-list a {
  color: var(--ms-on-surface-variant);
  text-decoration: none;
  font-family: var(--ms-font-label);
  font-size: var(--ms-label-md);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 0.2s ease;
  position: relative;
}

.ms-footer__social-list a::after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: var(--ms-primary);
  transition: width 0.3s ease;
  margin-top: 2px;
}

.ms-footer__social-list a:hover {
  color: var(--ms-primary);
}

.ms-footer__social-list a:hover::after {
  width: 100%;
}

/* Settings-based social icon links */
.ms-footer__social-icons {
  display: flex;
  gap: var(--ms-spacing-4);
  margin-top: var(--ms-spacing-6);
}

.ms-footer__social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ms-rounded-md);
  background: var(--ms-surface-container-high);
  color: var(--ms-on-surface-variant);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.ms-footer__social-icon:hover {
  background: var(--ms-primary-container);
  color: var(--ms-primary);
}

.ms-footer__social-icon .material-symbols-outlined {
  font-size: 20px;
}

.ms-footer__form {
  display: flex;
  flex-direction: column;
  gap: var(--ms-spacing-4);
}

.ms-footer__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ms-spacing-4);
}

.ms-footer__form .ms-btn {
  align-self: flex-start;
}

.ms-form__footer {
  display: flex;
  align-items: center;
  gap: var(--ms-spacing-4);
  flex-wrap: wrap;
}

.ms-form__status {
  font-family: var(--ms-font-label);
  font-size: var(--ms-label-md);
  min-height: 1.5em;
}

.ms-form__status--success {
  color: var(--ms-tertiary);
}

.ms-form__status--error {
  color: var(--ms-error);
}

.ms-footer__form .ms-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.ms-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--ms-spacing-6);
  border-top: 1px solid rgba(var(--ms-accent-1-rgb), 0.1);
  font-size: var(--ms-body-sm);
  color: var(--ms-on-surface-variant);
}

.ms-footer__links {
  display: flex;
  gap: var(--ms-spacing-6);
}

.ms-footer__links a,
.ms-footer__bottom p {
  font-family: var(--ms-font-label);
  font-size: var(--ms-label-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ms-on-surface-variant);
  transition: color 0.2s ease;
}

.ms-footer__links a:hover {
  color: var(--ms-primary);
}

/* ==========================================================================
   SMOKE OVERLAYS — rotating set from Stitch, vary per page/post
   Use one class per section: ms-smoke-1 through ms-smoke-5
   ========================================================================== */

.ms-smoke-1 {
  background-image: radial-gradient(ellipse at 50% 50%, rgba(68, 216, 241, 0.08) 0%, transparent 70%);
}

.ms-smoke-2 {
  background-image:
    radial-gradient(ellipse at 30% 40%, rgba(68, 216, 241, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 60%, rgba(var(--ms-accent-1-rgb), 0.04) 0%, transparent 50%);
}

.ms-smoke-3 {
  background-image: radial-gradient(ellipse at 60% 30%, rgba(68, 216, 241, 0.15) 0%, transparent 65%);
}

.ms-smoke-4 {
  background-image:
    radial-gradient(ellipse at 20% 70%, rgba(205, 189, 255, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 30%, rgba(68, 216, 241, 0.05) 0%, transparent 60%);
}

.ms-smoke-5 {
  background-image: radial-gradient(ellipse at 50% 50%, rgba(30, 32, 36, 0.9) 0%, var(--ms-background) 70%);
}

/* Text glow — unified class name */
.ms-text-glow {
  text-shadow: 0 0 30px rgba(var(--ms-accent-1-rgb), 0.3);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.ms-pagination {
  margin-top: var(--ms-spacing-12);
  text-align: center;
}

.ms-pagination .nav-links {
  display: flex;
  justify-content: center;
  gap: var(--ms-spacing-2);
}

.ms-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border-radius: var(--ms-rounded-md);
  background: var(--ms-surface-container-high);
  color: var(--ms-on-surface);
  font-size: var(--ms-body-md);
}

.ms-pagination .page-numbers.current {
  background: var(--ms-primary-container);
  color: var(--ms-on-primary);
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.ms-empty {
  text-align: center;
  padding: var(--ms-spacing-16);
  color: var(--ms-on-surface-variant);
  font-size: var(--ms-body-lg);
}

/* ==========================================================================
   VISION PRO — Spatial Web
   ========================================================================== */

.has-spatial-only {
  display: none;
}

.no-spatial-only {
  display: block;
}

html.has-spatial .has-spatial-only {
  display: block;
}

html.has-spatial .no-spatial-only {
  display: none;
}

/* ==========================================================================
   PAGE SMOKE BACKGROUNDS — image-based per Stitch, per-page variants
   ========================================================================== */

.ms-gallery,
.ms-events-feed,
.ms-vault,
.ms-academy-archive,
.ms-academy-topic {
  position: relative;
  overflow: hidden;
}

.ms-page-smoke {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.ms-page-smoke__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.ms-page-smoke__gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Make all content sit above smoke */
.ms-gallery > .ms-container,
.ms-events-feed > .ms-container,
.ms-vault > .ms-container,
.ms-academy-archive > .ms-container,
.ms-academy-topic > .ms-container {
  position: relative;
  z-index: 2;
}

/* ---- Gallery variant: mix-blend screen, hue-rotated, with floating accents ---- */
.ms-page-smoke--gallery {
  height: 90vh;
}

.ms-page-smoke--gallery .ms-page-smoke__img {
  filter: hue-rotate(180deg) brightness(0.8) contrast(1.2);
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 88%);
  mask-image: linear-gradient(to bottom, black 40%, transparent 88%);
}

.ms-page-smoke--gallery .ms-page-smoke__gradient {
  background:
    linear-gradient(to bottom, rgba(17, 19, 23, 0.45) 0%, rgba(17, 19, 23, 0.25) 25%, rgba(17, 19, 23, 0.15) 40%, rgba(17, 19, 23, 0.5) 60%, rgba(17, 19, 23, 0.85) 75%, var(--ms-background) 88%),
    linear-gradient(to right, rgba(17, 19, 23, 0.4), transparent 30%, transparent 70%, rgba(17, 19, 23, 0.4));
}

.ms-page-smoke--academy {
  max-height: 90vh;
}

.ms-page-smoke--academy .ms-page-smoke__img {
  filter: hue-rotate(180deg) brightness(0.6) contrast(1.1);
  -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 70%);
  mask-image: linear-gradient(to bottom, black 30%, transparent 70%);
}

.ms-page-smoke--academy .ms-page-smoke__gradient {
  background:
    linear-gradient(to bottom, rgba(17, 19, 23, 0.4) 0%, rgba(17, 19, 23, 0.2) 20%, rgba(17, 19, 23, 0.15) 35%, rgba(17, 19, 23, 0.4) 52%, rgba(17, 19, 23, 0.75) 66%, rgba(17, 19, 23, 0.95) 78%, var(--ms-background) 86%),
    linear-gradient(to right, rgba(17, 19, 23, 0.4), transparent 30%, transparent 70%, rgba(17, 19, 23, 0.4));
}

.ms-page-smoke__accent {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.ms-page-smoke__accent--left {
  top: 25%;
  left: -80px;
  width: 384px;
  height: 384px;
  background: radial-gradient(circle, rgba(68, 216, 241, 0.08) 0%, transparent 70%);
  filter: blur(48px);
  opacity: 0.5;
}

.ms-page-smoke__accent--right {
  bottom: 25%;
  right: -80px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(68, 216, 241, 0.06) 0%, transparent 70%);
  filter: blur(48px);
  opacity: 0.3;
}

/* ---- Events variant: blue tint overlay, subtle pulse glow ---- */
.ms-page-smoke--events .ms-page-smoke__img {
  height: 1200px;
  transform: scale(1.1);
  filter: hue-rotate(180deg) brightness(0.8) contrast(1.2);
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 88%);
  mask-image: linear-gradient(to bottom, black 40%, transparent 88%);
}

.ms-page-smoke--events .ms-page-smoke__gradient {
  background:
    linear-gradient(to bottom, rgba(17, 19, 23, 0.45) 0%, rgba(17, 19, 23, 0.25) 25%, rgba(17, 19, 23, 0.15) 40%, rgba(17, 19, 23, 0.5) 60%, rgba(17, 19, 23, 0.85) 75%, var(--ms-background) 88%),
    linear-gradient(to right, rgba(17, 19, 23, 0.4), transparent 30%, transparent 70%, rgba(17, 19, 23, 0.4));
}

.ms-page-smoke__pulse {
  position: absolute;
  top: 0;
  left: 25%;
  width: 100%;
  height: 700px;
  background: rgba(68, 216, 241, 0.05);
  filter: blur(150px);
  animation: smokePulse 4s ease-in-out infinite alternate;
}

@keyframes smokePulse {
  from { opacity: 0.3; }
  to { opacity: 0.6; }
}

/* ---- Vault (blog) variant: subtle, bottom-fading ---- */
.ms-page-smoke--vault .ms-page-smoke__img {
  filter: hue-rotate(180deg) brightness(0.8) contrast(1.2);
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 88%);
  mask-image: linear-gradient(to bottom, black 40%, transparent 88%);
  height: 80vh;
}

.ms-page-smoke--vault .ms-page-smoke__gradient {
  background:
    linear-gradient(to bottom, rgba(17, 19, 23, 0.45) 0%, rgba(17, 19, 23, 0.25) 25%, rgba(17, 19, 23, 0.15) 40%, rgba(17, 19, 23, 0.5) 60%, rgba(17, 19, 23, 0.85) 75%, var(--ms-background) 88%),
    linear-gradient(to right, rgba(17, 19, 23, 0.4), transparent 30%, transparent 70%, rgba(17, 19, 23, 0.4));
}

/* ==========================================================================
   GALLERY PAGE (Artifacts Gallery)
   ========================================================================== */

.ms-gallery__header {
  margin-bottom: var(--ms-spacing-16);
}

.ms-gallery__eyebrow {
  display: block;
  margin-bottom: var(--ms-spacing-4);
}

.ms-gallery__title {
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1.1;
  margin-bottom: var(--ms-spacing-6);
}

.ms-gallery__intro {
  max-width: 560px;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  color: var(--ms-on-surface-variant);
  line-height: 1.7;
}

/* ==========================================================================
   BENTO GRIDS — shared layout for portfolio, events, blog
   ========================================================================== */

.ms-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--ms-spacing-6);
  grid-auto-rows: 280px;
  transition: opacity 0.3s ease;
}

.ms-grid--fading {
  opacity: 0;
}

.ms-bento__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--ms-rounded-xl);
  background: var(--ms-surface-container-low);
  text-decoration: none;
  display: block;
}

.ms-bento__item--featured {
  grid-column: span 8;
  grid-row: span 2;
}

.ms-bento__item--standard {
  grid-column: span 4;
}

.ms-bento__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  transition: transform 0.7s ease;
}

.ms-bento__item:hover .ms-bento__img {
  transform: scale(1.1);
}

.ms-bento__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--ms-spacing-8);
  background: linear-gradient(to top, var(--ms-surface) 0%, rgba(17, 19, 23, 0.4) 60%, transparent 100%);
  z-index: 1;
}

.ms-bento__title {
  font-family: var(--ms-font-headline);
  font-size: var(--ms-headline-md);
  font-weight: 700;
  color: #fff;
  margin-top: var(--ms-spacing-2);
  margin-bottom: var(--ms-spacing-2);
}

.ms-bento__desc {
  font-size: var(--ms-body-sm);
  color: var(--ms-on-surface-variant);
  opacity: 0;
  transition: opacity 0.5s ease;
  max-width: 400px;
}

.ms-bento__item:hover .ms-bento__desc {
  opacity: 1;
}

.ms-chip--sm {
  font-size: var(--ms-label-sm);
  padding: var(--ms-spacing-1) var(--ms-spacing-2);
  background: rgba(var(--ms-accent-1-rgb), 0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--ms-accent-1-rgb), 0.2);
  color: var(--ms-primary);
}

/* ==========================================================================
   EVENTS FEED PAGE
   ========================================================================== */

.ms-events-feed__header {
  margin-bottom: var(--ms-spacing-20);
}

.ms-events-feed__header h1 {
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1.1;
  margin-bottom: var(--ms-spacing-6);
}

.ms-events-feed__accent {
  color: var(--ms-primary);
}

.ms-events-feed__intro {
  max-width: 560px;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  color: var(--ms-on-surface-variant);
  line-height: 1.7;
}

.ms-bento--events {
  grid-auto-rows: auto;
}

a.ms-event-bento {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.ms-event-bento {
  position: relative;
  overflow: hidden;
  border-radius: var(--ms-rounded-xl);
  background: var(--ms-surface-container-low);
  border: 1px solid rgba(var(--ms-accent-1-rgb), 0.1);
}

.ms-event-bento--featured {
  grid-column: span 8;
  aspect-ratio: 16 / 9;
}

.ms-event-bento--standard {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
}

.ms-event-bento__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  transition: transform 0.7s ease;
}

.ms-event-bento:hover .ms-event-bento__img {
  transform: scale(1.05);
}

.ms-event-bento__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--ms-background), rgba(17, 19, 23, 0.4), transparent);
}

.ms-event-bento__content {
  padding: var(--ms-spacing-8);
  flex: 1;
}

.ms-event-bento__content--over {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: var(--ms-spacing-10);
}

.ms-event-bento__meta {
  display: flex;
  align-items: center;
  gap: var(--ms-spacing-4);
  margin-bottom: var(--ms-spacing-4);
}

.ms-chip--date {
  display: inline-block;
  background: rgba(var(--ms-accent-1-rgb), 0.2);
  backdrop-filter: blur(12px);
  white-space: nowrap;
}

.ms-event-bento__time {
  font-family: var(--ms-font-label);
  font-size: var(--ms-label-sm);
  color: rgba(255, 255, 255, 0.4);
}

.ms-event-bento__title {
  font-family: var(--ms-font-headline);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--ms-spacing-2);
}

.ms-event-bento--featured .ms-event-bento__title {
  font-size: var(--ms-display-sm);
  margin-bottom: var(--ms-spacing-4);
}

.ms-event-bento--featured .ms-event-bento__title a { color: #fff; }

.ms-event-bento--standard .ms-event-bento__title {
  font-size: var(--ms-headline-sm);
  margin-top: var(--ms-spacing-4);
}

.ms-event-bento--standard .ms-event-bento__title a { color: #fff; }

.ms-event-bento__desc {
  font-size: var(--ms-body-sm);
  color: var(--ms-on-surface-variant);
  line-height: 1.6;
  margin-bottom: var(--ms-spacing-8);
}

.ms-btn--white {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-spacing-2);
  padding: var(--ms-spacing-3) var(--ms-spacing-8);
  background: #fff;
  color: #0f1115;
  font-family: var(--ms-font-label);
  font-size: var(--ms-label-lg);
  font-weight: 700;
  text-transform: uppercase;
  border-radius: var(--ms-rounded-full);
  text-decoration: none;
  transition: background 0.2s ease;
}

.ms-btn--white:hover {
  background: var(--ms-primary);
}

.ms-btn--white .material-symbols-outlined {
  font-size: 1rem;
  transition: transform 0.2s ease;
}

.ms-btn--white:hover .material-symbols-outlined {
  transform: translateX(4px);
}

.ms-event-bento__footer {
  padding: var(--ms-spacing-6) var(--ms-spacing-8);
  border-top: 1px solid rgba(var(--ms-accent-1-rgb), 0.1);
}

.ms-event-bento--featured .ms-event-bento__footer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  border-top: none;
  padding: var(--ms-spacing-6) var(--ms-spacing-8);
}

.ms-event-bento__venue {
  display: flex;
  align-items: center;
  gap: var(--ms-spacing-2);
  font-family: var(--ms-font-label);
  font-size: var(--ms-label-sm);
  color: rgba(255, 255, 255, 0.6);
}

.ms-event-bento__venue .material-symbols-outlined {
  font-size: 1rem;
  color: var(--ms-primary);
}

/* ==========================================================================
   BLOG / THE VAULT PAGE
   ========================================================================== */

.ms-vault__header {
  margin-bottom: var(--ms-spacing-16);
}

.ms-vault__header h1 {
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: var(--ms-spacing-6);
}

.ms-vault__intro {
  max-width: 560px;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  color: var(--ms-on-surface-variant);
  line-height: 1.7;
}

.ms-bento--blog {
  grid-auto-rows: auto;
}

.ms-blog-card {
  border-radius: var(--ms-rounded-xl);
  background: var(--ms-surface-container-low);
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.ms-blog-card:hover {
  border-color: rgba(var(--ms-accent-1-rgb), 0.15);
}

.ms-blog-card--featured {
  grid-column: span 8;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.ms-blog-card--standard {
  grid-column: span 4;
}

.ms-blog-card__media {
  overflow: hidden;
}

.ms-blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.ms-blog-card:hover .ms-blog-card__img {
  transform: scale(1.05);
}

.ms-blog-card__body {
  padding: var(--ms-spacing-8);
  display: flex;
  flex-direction: column;
}

.ms-blog-card__meta {
  margin-bottom: var(--ms-spacing-3);
}

.ms-blog-card__title {
  font-family: var(--ms-font-headline);
  font-size: var(--ms-headline-sm);
  font-weight: 700;
  margin-bottom: var(--ms-spacing-3);
}

.ms-blog-card__title a {
  color: #fff;
  text-decoration: none;
}

.ms-blog-card__title a:hover {
  color: var(--ms-primary);
}

.ms-blog-card--featured .ms-blog-card__title {
  font-size: var(--ms-headline-lg);
}

.ms-blog-card__excerpt {
  font-size: var(--ms-body-md);
  color: var(--ms-on-surface-variant);
  line-height: 1.6;
  margin-bottom: var(--ms-spacing-6);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ms-blog-card__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  margin-top: auto;
  gap: var(--ms-spacing-2);
  font-family: var(--ms-font-label);
  font-size: var(--ms-label-md);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ms-primary);
  text-decoration: none;
  transition: color 0.2s ease, gap 0.2s ease;
}

.ms-blog-card__link:hover {
  gap: var(--ms-spacing-3);
}

.ms-blog-card__link .material-symbols-outlined {
  font-size: 1rem;
}

/* ==========================================================================
   404 PAGE — Giant number with broken wand (from Stitch)
   ========================================================================== */

.ms-404 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.ms-404__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: rgba(253, 90, 5, 0.05);
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

.ms-404__content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-inline: var(--ms-spacing-6);
}

.ms-404__icon {
  font-size: 5rem;
  color: var(--ms-primary);
  opacity: 0.2;
  margin-bottom: var(--ms-spacing-12);
  display: block;
}

.ms-404__number {
  font-family: var(--ms-font-headline);
  font-size: clamp(10rem, 20vw, 16rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.85;
  color: var(--ms-primary-container);
  user-select: none;
}

.ms-404__message {
  margin-top: -1rem;
}

.ms-404__message h2 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  color: var(--ms-on-surface);
  margin-bottom: var(--ms-spacing-4);
}

.ms-404__message p {
  color: rgba(228, 190, 178, 0.6);
  margin-bottom: var(--ms-spacing-8);
}

/* ==========================================================================
   LEGAL PAGES
   ========================================================================== */

.ms-legal__header {
  margin-bottom: var(--ms-spacing-12);
}

.ms-legal__header h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-top: var(--ms-spacing-3);
}

.ms-legal__layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--ms-spacing-12);
}

.ms-legal__sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
}

.ms-legal__meta {
  display: flex;
  flex-direction: column;
  gap: var(--ms-spacing-1);
  color: var(--ms-on-surface-variant);
  font-size: var(--ms-body-sm);
}

.ms-prose {
  font-size: var(--ms-body-lg);
  line-height: 1.8;
  color: var(--ms-on-surface-variant);
}

.ms-prose h2 {
  font-size: var(--ms-headline-md);
  font-weight: 700;
  color: var(--ms-on-surface);
  margin-top: var(--ms-spacing-12);
  margin-bottom: var(--ms-spacing-4);
}

.ms-prose h3 {
  font-size: var(--ms-title-lg);
  font-weight: 600;
  color: var(--ms-primary);
  margin-top: var(--ms-spacing-8);
  margin-bottom: var(--ms-spacing-3);
}

.ms-prose p {
  margin-bottom: var(--ms-spacing-6);
}

.ms-prose ul,
.ms-prose ol {
  margin-bottom: var(--ms-spacing-6);
  padding-left: var(--ms-spacing-6);
}

.ms-prose li {
  margin-bottom: var(--ms-spacing-2);
}

.ms-legal__cta {
  margin-top: var(--ms-spacing-20);
  padding: var(--ms-spacing-12);
  background: var(--ms-surface-container-low);
  border-radius: var(--ms-rounded-xl);
  text-align: center;
}

.ms-legal__cta h3 {
  font-size: var(--ms-headline-sm);
  color: #fff;
  margin-bottom: var(--ms-spacing-3);
}

.ms-legal__cta p {
  margin-bottom: var(--ms-spacing-6);
}

/* ==========================================================================
   VIDEO EMBED — Responsive 16:9
   ========================================================================== */

.ms-video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--ms-rounded-xl);
  background: var(--ms-surface-container-lowest);
}

.ms-video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Video in modal — responsive embed inside media panel */
.ms-modal__media .ms-video-embed {
  border-radius: 0;
  padding-bottom: 56.25%;
  min-height: 0;
}

/* ==========================================================================
   GALLERY CAROUSEL — Full post page
   ========================================================================== */

.ms-gallery-carousel {
  position: relative;
  border-radius: var(--ms-rounded-xl);
  overflow: hidden;
  background: var(--ms-surface-container-lowest);
}

.ms-gallery-carousel__track {
  position: relative;
}

.ms-gallery-carousel__slide {
  display: none;
  margin: 0;
}

.ms-gallery-carousel__slide.is-active {
  display: block;
}

.ms-gallery-carousel__slide img {
  width: 100%;
  display: block;
}

.ms-gallery-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-radius 0.3s ease;
}

.ms-gallery-carousel__nav:hover {
  background: var(--ms-primary-container);
  border-radius: 50%;
}

.ms-gallery-carousel__nav--prev {
  left: var(--ms-spacing-4);
}

.ms-gallery-carousel__nav--next {
  right: var(--ms-spacing-4);
}

.ms-gallery-carousel__dots {
  position: absolute;
  bottom: var(--ms-spacing-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--ms-spacing-2);
  z-index: 2;
}

.ms-gallery-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.ms-gallery-carousel__dot.is-active {
  background: var(--ms-primary);
  transform: scale(1.3);
}

/* ==========================================================================
   PAGE GALLERY — Smooth horizontal scroll (full-page posts)
   ========================================================================== */

.ms-page-gallery {
  position: relative;
  border-radius: var(--ms-rounded-xl);
  overflow: hidden;
  background: var(--ms-surface-container-lowest);
}

.ms-page-gallery__track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ms-page-gallery__track::-webkit-scrollbar {
  display: none;
}

.ms-page-gallery__img {
  flex: 0 0 100%;
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  display: block;
  scroll-snap-align: start;
}

.ms-page-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-radius 0.3s ease;
}

.ms-page-gallery__nav:hover {
  background: var(--ms-primary-container);
  border-radius: 50%;
}

.ms-page-gallery__nav--prev {
  left: var(--ms-spacing-4);
}

.ms-page-gallery__nav--next {
  right: var(--ms-spacing-4);
}

/* ==========================================================================
   MODAL GALLERY — Inside quick-view modal
   ========================================================================== */

.ms-modal-gallery {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ms-surface-container-lowest);
}

.ms-modal-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease;
}

.ms-modal-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-radius 0.3s ease;
}

.ms-modal-gallery__nav:hover {
  background: var(--ms-primary-container);
  border-radius: 50%;
}

.ms-modal-gallery__nav--prev {
  left: var(--ms-spacing-2);
}

.ms-modal-gallery__nav--next {
  right: var(--ms-spacing-2);
}

.ms-modal-gallery__dots {
  position: absolute;
  bottom: var(--ms-spacing-3);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--ms-spacing-2);
  z-index: 2;
}

.ms-modal-gallery__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.ms-modal-gallery__dot.is-active {
  background: var(--ms-primary);
  transform: scale(1.4);
}

/* ==========================================================================
   QUICK-VIEW MODAL
   ========================================================================== */

.ms-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.ms-modal.is-open {
  pointer-events: auto;
  opacity: 1;
}

.ms-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
}

.ms-modal__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-width: 640px;
  width: 90%;
  max-height: 85vh;
  background: var(--ms-surface-container);
  border-radius: var(--ms-rounded-xl);
  overflow: hidden;
  overflow-y: auto;
  transform: scale(0.92) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ms-modal__container.no-media {
  max-width: 500px;
}

.ms-modal.is-open .ms-modal__container {
  transform: scale(1) translateY(0);
}

.ms-modal__close {
  position: absolute;
  top: var(--ms-spacing-4);
  right: var(--ms-spacing-4);
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, border-radius 0.3s ease, border-color 0.25s ease;
}

.ms-modal__close .material-symbols-outlined {
  font-size: 16px;
}

.ms-modal__close:focus-visible {
  outline: none;
}

.ms-modal__close:hover,
.ms-modal__close.is-closing {
  background: var(--ms-primary-container);
  border-color: transparent;
  border-radius: 50%;
}

.ms-modal__media {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 1;
}

.ms-modal__media img {
  width: 100%;
  display: block;
  object-fit: cover;
  max-height: 50vh;
}


/* Gallery in modal — horizontal scroll strip */
.ms-modal-gallery {
  position: relative;
}

.ms-modal-gallery__track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ms-modal-gallery__track::-webkit-scrollbar {
  display: none;
}

.ms-modal-gallery__img {
  flex: 0 0 100%;
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
  border-radius: 0;
  scroll-snap-align: start;
}

.ms-modal-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, opacity 0.2s ease;
  opacity: 0.7;
  z-index: 2;
}

.ms-modal-gallery__nav:hover {
  background: var(--ms-primary-container);
  opacity: 1;
}

.ms-modal-gallery__nav .material-symbols-outlined {
  font-size: 20px;
}

.ms-modal-gallery__nav--prev {
  left: var(--ms-spacing-3);
}

.ms-modal-gallery__nav--next {
  right: var(--ms-spacing-3);
}

.ms-modal__body {
  padding: var(--ms-spacing-6) var(--ms-spacing-8) var(--ms-spacing-8);
  display: flex;
  flex-direction: column;
}

.ms-modal__chip {
  display: inline-block;
  margin-bottom: var(--ms-spacing-4);
  margin-right: var(--ms-spacing-12);
}

.has-media .ms-modal__body {
  padding-top: var(--ms-spacing-10);
}

.ms-modal__title {
  font-family: var(--ms-font-headline);
  font-size: var(--ms-headline-md);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--ms-spacing-2);
}

.ms-modal__subtitle {
  font-family: var(--ms-font-label);
  font-size: var(--ms-label-md);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ms-primary);
  margin-bottom: var(--ms-spacing-6);
}

.ms-modal__text {
  font-size: var(--ms-body-md);
  color: var(--ms-on-surface-variant);
  line-height: 1.7;
  margin-bottom: var(--ms-spacing-6);
}

.ms-modal__meta {
  display: flex;
  flex-direction: column;
  gap: var(--ms-spacing-2);
  margin-bottom: var(--ms-spacing-6);
  font-size: var(--ms-body-sm);
  color: var(--ms-on-surface-variant);
}

.ms-modal__meta-item {
  display: flex;
  align-items: center;
  gap: var(--ms-spacing-2);
}

.ms-modal__meta-item .material-symbols-outlined {
  font-size: 1.1rem;
  color: var(--ms-primary);
}

.ms-modal__actions {
  display: flex;
  gap: var(--ms-spacing-3);
  margin-top: auto;
  justify-content: flex-end;
}

.ms-modal__tags {
  display: flex;
  gap: var(--ms-spacing-2);
  margin-bottom: var(--ms-spacing-6);
  flex-wrap: wrap;
}

/* ==========================================================================
   SCROLL REVEAL ANIMATION
   ========================================================================== */

.ms-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.ms-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ms-reveal--delay-1 { transition-delay: 0.1s; }
.ms-reveal--delay-2 { transition-delay: 0.2s; }
.ms-reveal--delay-3 { transition-delay: 0.3s; }
.ms-reveal--delay-4 { transition-delay: 0.4s; }

/* ==========================================================================
   THE ACADEMY — Knowledge Base & Learning Center
   ========================================================================== */

/* ── Breadcrumbs ── */
.ms-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  font-family: var(--ms-font-label);
  font-size: var(--ms-label-sm);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ms-on-surface-variant);
  padding: var(--ms-spacing-4) 0;
}
.ms-breadcrumbs a { color: var(--ms-on-surface-variant); transition: color 0.2s; }
.ms-breadcrumbs a:hover { color: var(--ms-primary); text-decoration: none; }
.ms-breadcrumbs__sep { font-size: 1rem; opacity: 0.35; line-height: 1; }
.ms-breadcrumbs__current { color: var(--ms-on-surface); }

/* ── Academy Search ── */
.ms-academy-search { padding: var(--ms-spacing-8) 0 var(--ms-spacing-4); }
.ms-academy-search__wrapper { position: relative; max-width: 600px; margin: 0 auto; }
.ms-academy-search__input {
  width: 100%;
  padding: var(--ms-spacing-4) var(--ms-spacing-4) var(--ms-spacing-4) 3rem;
  background: rgba(30,32,36,0.7);
  backdrop-filter: var(--ms-glass-blur);
  -webkit-backdrop-filter: var(--ms-glass-blur);
  border: 1px solid rgba(91,65,55,0.15);
  border-radius: var(--ms-rounded-xl);
  color: var(--ms-on-surface);
  font-family: var(--ms-font-body);
  font-size: var(--ms-body-lg);
  outline: none;
  transition: border-color 0.2s;
}
.ms-academy-search__input::placeholder { color: var(--ms-outline); }
.ms-academy-search__input:focus { border-color: var(--ms-primary); }
.ms-academy-search__icon {
  position: absolute;
  left: var(--ms-spacing-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--ms-outline);
  font-size: 1.25rem;
}
.ms-academy-search__results {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0; right: 0;
  background: rgba(30,32,36,0.95);
  backdrop-filter: var(--ms-glass-blur);
  -webkit-backdrop-filter: var(--ms-glass-blur);
  border-radius: var(--ms-rounded-lg);
  border: 1px solid rgba(91,65,55,0.15);
  box-shadow: var(--ms-shadow-lg);
  z-index: 50;
  max-height: 400px;
  overflow-y: auto;
}
.ms-academy-search__result {
  display: flex;
  align-items: center;
  gap: var(--ms-spacing-3);
  padding: var(--ms-spacing-3) var(--ms-spacing-4);
  transition: background 0.15s;
  color: var(--ms-on-surface);
  text-decoration: none;
}
.ms-academy-search__result:hover { background: var(--ms-surface-container-high); text-decoration: none; }
.ms-academy-search__result-thumb {
  width: 40px; height: 40px;
  border-radius: var(--ms-rounded-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--ms-surface-container);
}
.ms-academy-search__result-title {
  font-family: var(--ms-font-headline);
  font-size: var(--ms-body-md);
  font-weight: 600;
}
.ms-academy-search__result-topic {
  font-family: var(--ms-font-label);
  font-size: var(--ms-label-sm);
  color: var(--ms-on-surface-variant);
}
.ms-academy-search__empty {
  padding: var(--ms-spacing-6) var(--ms-spacing-4);
  text-align: center;
  color: var(--ms-on-surface-variant);
  font-size: var(--ms-body-md);
}

/* ── Topic Cards ── */
.ms-academy-topics { padding: var(--ms-spacing-8) 0 var(--ms-spacing-16); }
.ms-academy-topics__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ms-spacing-5);
}
.ms-topic-card {
  background: var(--ms-surface-container-low);
  border-radius: var(--ms-rounded-xl);
  padding: var(--ms-spacing-6);
  border: 1px solid transparent;
  transition: background 0.5s ease, border-color 0.5s ease;
  color: var(--ms-on-surface);
  display: block;
}
.ms-topic-card:hover {
  background: var(--ms-surface-container-high);
  border-color: rgba(var(--ms-accent-1-rgb), 0.1);
  text-decoration: none;
  color: var(--ms-on-surface);
}
.ms-topic-card__icon {
  width: 48px; height: 48px;
  border-radius: var(--ms-rounded-md);
  background: rgba(var(--ms-accent-2-rgb),0.08);
  color: var(--ms-primary);
  display: flex;
  align-items: center; justify-content: center;
  margin-bottom: var(--ms-spacing-3);
  font-size: 1.5rem;
}
.ms-topic-card__icon--primary   { color: var(--ms-primary);   background: rgba(var(--ms-accent-2-rgb),0.08); }
.ms-topic-card__icon--secondary { color: var(--ms-secondary); background: rgba(124,77,255,0.08); }
.ms-topic-card__icon--tertiary  { color: var(--ms-tertiary);  background: rgba(68,216,241,0.08); }
.ms-topic-card__icon--muted     { color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.04); }
.ms-topic-card__name {
  font-family: var(--ms-font-headline);
  font-size: var(--ms-title-md);
  font-weight: 700;
  margin-bottom: 0.125rem;
}
.ms-topic-card__count {
  font-family: var(--ms-font-label);
  font-size: var(--ms-label-sm);
  font-weight: 600;
  color: var(--ms-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--ms-spacing-2);
}
.ms-topic-card__desc {
  font-size: var(--ms-body-md);
  color: var(--ms-on-surface-variant);
  line-height: 1.55;
  margin-bottom: var(--ms-spacing-4);
}
.ms-topic-card__line {
  height: 1px;
  width: 0;
  background: var(--ms-primary);
  transition: width 0.7s ease;
}
.ms-topic-card__line--primary   { background: var(--ms-primary); }
.ms-topic-card__line--secondary { background: var(--ms-secondary); }
.ms-topic-card__line--tertiary  { background: var(--ms-tertiary); }
.ms-topic-card__line--muted     { background: rgba(255,255,255,0.5); }
.ms-topic-card:hover .ms-topic-card__line {
  width: 100%;
}

/* ── Subtopic Cards ── */
.ms-academy-subtopics { padding: var(--ms-spacing-4) 0 var(--ms-spacing-8); }
.ms-academy-subtopics__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ms-spacing-4);
}
.ms-subtopic-card {
  background: var(--ms-surface-container-low);
  border-radius: var(--ms-rounded-lg);
  padding: var(--ms-spacing-4) var(--ms-spacing-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-spacing-3);
  border: 1px solid transparent;
  transition: background 0.5s ease, border-color 0.5s ease;
  color: var(--ms-on-surface);
}
.ms-subtopic-card:hover {
  background: var(--ms-surface-container-high);
  border-color: rgba(var(--ms-accent-1-rgb), 0.1);
  text-decoration: none;
  color: var(--ms-on-surface);
}
.ms-subtopic-card__icon {
  font-size: 1.25rem;
  color: var(--ms-tertiary);
  width: 40px; height: 40px;
  border-radius: var(--ms-rounded-sm);
  background: rgba(68,216,241,0.08);
  display: flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ms-subtopic-card__icon--primary   { color: var(--ms-primary);   background: rgba(var(--ms-accent-2-rgb),0.08); }
.ms-subtopic-card__icon--secondary { color: var(--ms-secondary); background: rgba(124,77,255,0.08); }
.ms-subtopic-card__icon--tertiary  { color: var(--ms-tertiary);  background: rgba(68,216,241,0.08); }
.ms-subtopic-card__icon--muted     { color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.04); }
.ms-subtopic-card__name {
  font-family: var(--ms-font-headline);
  font-size: var(--ms-body-lg);
  font-weight: 700;
}
.ms-subtopic-card__count {
  font-family: var(--ms-font-label);
  font-size: var(--ms-label-sm);
  color: var(--ms-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ms-subtopic-card__line {
  width: 0;
  height: 1px;
  background: var(--ms-tertiary);
  transition: width 0.7s ease;
  flex-basis: 100%;
}
.ms-subtopic-card__line--primary   { background: var(--ms-primary); }
.ms-subtopic-card__line--secondary { background: var(--ms-secondary); }
.ms-subtopic-card__line--tertiary  { background: var(--ms-tertiary); }
.ms-subtopic-card__line--muted     { background: rgba(255,255,255,0.5); }
.ms-subtopic-card:hover .ms-subtopic-card__line {
  width: 100%;
}

/* ── Academy Article Grid ── */
.ms-grid--academy {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--ms-spacing-6);
  padding: var(--ms-spacing-4) 0;
}

/* ── Academy Card (extends base .ms-card) ── */
.ms-card--academy .ms-card__media { aspect-ratio: 16 / 10; }
.ms-card--academy {
  border: 1px solid transparent;
  transition: background-color 0.5s ease, border-color 0.5s ease;
}
.ms-card--academy:hover {
  background-color: var(--ms-surface-container-high);
  border-color: rgba(var(--ms-accent-1-rgb), 0.1);
  box-shadow: none;
  transform: none;
}
.ms-card--academy .ms-card__line {
  height: 1px;
  width: 0;
  background: var(--ms-primary);
  transition: width 0.7s ease;
  margin-top: var(--ms-spacing-4);
}
.ms-card--academy:hover .ms-card__line {
  width: 100%;
}

/* ── Article Layout (sidebar + content) ── */
.ms-academy-article__layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--ms-spacing-10);
  padding-top: var(--ms-spacing-4);
}

/* ── Sidebar ── */
.ms-academy-sidebar { position: relative; }
.ms-academy-sidebar__toggle {
  display: none; /* Hidden on desktop, shown on mobile */
  width: 100%;
  padding: var(--ms-spacing-3) var(--ms-spacing-4);
  background: var(--ms-surface-container-low);
  border: none;
  border-radius: var(--ms-rounded-md);
  color: var(--ms-on-surface);
  font-family: var(--ms-font-label);
  font-size: var(--ms-body-md);
  font-weight: 600;
  cursor: pointer;
  align-items: center;
  gap: var(--ms-spacing-2);
  margin-bottom: var(--ms-spacing-4);
}
.ms-academy-sidebar__inner {
  position: sticky;
  top: 5.5rem;
  display: flex;
  flex-direction: column;
  gap: var(--ms-spacing-8);
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
}
.ms-sidebar-section__title {
  font-family: var(--ms-font-label);
  font-size: var(--ms-label-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ms-outline);
  margin-bottom: var(--ms-spacing-3);
}

/* Sidebar nav */
.ms-sidebar-nav { list-style: none; }
.ms-sidebar-nav__item { margin-bottom: 0.125rem; }
.ms-sidebar-nav__link {
  display: block;
  padding: 0.4rem 0.75rem;
  border-radius: var(--ms-rounded-sm);
  font-size: var(--ms-body-md);
  color: var(--ms-on-surface-variant);
  transition: background 0.15s, color 0.15s;
}
.ms-sidebar-nav__link:hover {
  background: var(--ms-surface-container);
  color: var(--ms-on-surface);
  text-decoration: none;
}
.ms-sidebar-nav__link--active {
  background: rgba(var(--ms-accent-2-rgb),0.08);
  color: var(--ms-primary);
  font-weight: 600;
}
.ms-sidebar-nav__children {
  list-style: none;
  padding-left: var(--ms-spacing-4);
  border-left: 2px solid var(--ms-surface-container-high);
  margin-left: 0.75rem;
}
.ms-sidebar-nav__children .ms-sidebar-nav__link {
  font-size: var(--ms-body-sm);
  padding: 0.3rem 0.75rem;
}

/* Table of Contents */
.ms-academy-toc { list-style: none; }
.ms-academy-toc__item { margin-bottom: 0.0625rem; }
.ms-academy-toc__link {
  display: block;
  padding: 0.3rem 0.75rem;
  border-radius: var(--ms-rounded-sm);
  font-size: var(--ms-body-sm);
  color: var(--ms-on-surface-variant);
  border-left: 2px solid transparent;
  transition: all 0.15s;
}
.ms-academy-toc__link:hover {
  color: var(--ms-on-surface);
  text-decoration: none;
}
.ms-academy-toc__link--active {
  border-left-color: var(--ms-primary);
  color: var(--ms-primary);
  font-weight: 600;
}
.ms-academy-toc__link--h3 {
  padding-left: 1.5rem;
  font-size: var(--ms-label-md);
}

/* ── Article Content ── */
.ms-academy-content { min-width: 0; }
.ms-academy-content__title {
  font-family: var(--ms-font-display);
  font-size: var(--ms-display-sm);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: var(--ms-spacing-6);
}

/* ── Prose (Gutenberg content styling) ── */
.ms-prose h2 {
  font-family: var(--ms-font-headline);
  font-size: var(--ms-headline-md);
  font-weight: 700;
  margin: var(--ms-spacing-10) 0 var(--ms-spacing-4);
  line-height: 1.3;
}
.ms-prose h3 {
  font-family: var(--ms-font-headline);
  font-size: var(--ms-title-lg);
  font-weight: 700;
  margin: var(--ms-spacing-8) 0 var(--ms-spacing-3);
  line-height: 1.35;
}
.ms-prose h4 {
  font-family: var(--ms-font-headline);
  font-size: var(--ms-title-md);
  font-weight: 700;
  margin: var(--ms-spacing-6) 0 var(--ms-spacing-2);
}
.ms-prose p { margin-bottom: var(--ms-spacing-5); }
.ms-prose a {
  color: var(--ms-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ms-prose ul, .ms-prose ol { margin-bottom: var(--ms-spacing-5); padding-left: var(--ms-spacing-6); }
.ms-prose li { margin-bottom: var(--ms-spacing-2); }
.ms-prose img {
  border-radius: var(--ms-rounded-lg);
  margin: var(--ms-spacing-6) 0;
}
.ms-prose code {
  background: var(--ms-surface-container);
  padding: 0.15em 0.4em;
  border-radius: var(--ms-rounded-sm);
  font-size: 0.9em;
}
.ms-prose pre {
  background: var(--ms-surface-container-lowest);
  border-radius: var(--ms-rounded-lg);
  padding: var(--ms-spacing-5);
  overflow-x: auto;
  margin: var(--ms-spacing-6) 0;
}
.ms-prose pre code { background: none; padding: 0; }
.ms-prose blockquote {
  border-left: 3px solid var(--ms-primary);
  padding-left: var(--ms-spacing-5);
  margin: var(--ms-spacing-6) 0;
  color: var(--ms-on-surface-variant);
  font-style: italic;
}
.ms-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--ms-spacing-6) 0;
}
.ms-prose th, .ms-prose td {
  padding: var(--ms-spacing-3) var(--ms-spacing-4);
  text-align: left;
  border-bottom: 1px solid rgba(91,65,55,0.1);
}
.ms-prose th {
  font-family: var(--ms-font-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--ms-label-md);
  color: var(--ms-on-surface-variant);
}

/* Gutenberg core block overrides in prose */
.ms-prose .wp-block-image { margin: var(--ms-spacing-6) 0; }
.ms-prose .wp-block-image img { border-radius: var(--ms-rounded-lg); }
.ms-prose .wp-block-embed { margin: var(--ms-spacing-6) 0; }
.ms-prose .wp-block-embed .wp-block-embed__wrapper {
  border-radius: var(--ms-rounded-lg);
  overflow: hidden;
}
.ms-prose .wp-block-gallery { gap: var(--ms-spacing-3); margin: var(--ms-spacing-6) 0; }
.ms-prose .wp-block-gallery .wp-block-image img { border-radius: var(--ms-rounded-md); }

/* ── Step Block ── */
.ms-step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--ms-spacing-4);
  margin: var(--ms-spacing-6) 0;
  padding-bottom: var(--ms-spacing-6);
  border-bottom: 1px solid rgba(91,65,55,0.08);
}
.ms-step:last-of-type { border-bottom: none; }
.ms-step__body { min-width: 0; }
.ms-step__number {
  width: 48px; height: 48px;
  border-radius: var(--ms-rounded-md);
  background: var(--ms-primary-container);
  color: #fff;
  display: flex;
  align-items: center; justify-content: center;
  font-family: var(--ms-font-headline);
  font-size: 1.25rem;
  font-weight: 800;
  flex-shrink: 0;
}
.ms-step__title {
  font-family: var(--ms-font-headline);
  font-size: var(--ms-title-lg);
  font-weight: 700;
  margin-bottom: var(--ms-spacing-2);
  line-height: 1.35;
  scroll-margin-top: 100px;
}
.ms-step__content {
  font-size: var(--ms-body-lg);
  color: var(--ms-on-surface-variant);
  line-height: 1.7;
  margin-bottom: var(--ms-spacing-4);
}
/* Split layout when step has media */
.ms-step__body--has-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ms-spacing-6);
  align-items: start;
}
.ms-step__body--media-left .ms-step__media { order: -1; }
.ms-step__body--has-media .ms-step__tip { grid-column: 1 / -1; }
.ms-step__text { min-width: 0; }

/* Step media — shared container */
.ms-step__media {
  min-width: 0;
  max-height: 400px;
  border-radius: var(--ms-rounded-lg);
  overflow: hidden;
}

/* ---- Image ---- */
.ms-step__media--image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- Video ---- */
.ms-step__media--video .ms-video-embed {
  position: relative;
  padding-bottom: 0;
  height: auto;
  overflow: hidden;
  background: none;
  border-radius: inherit;
}
.ms-step__media--video .ms-video-embed iframe {
  position: relative;
  top: auto;
  left: auto;
  display: block;
  border-radius: var(--ms-rounded-lg);
}

/* ---- Gallery ---- */
.ms-step__media--gallery {
  max-height: none;
  overflow: visible;
  border-radius: 0;
  background: none;
  display: flex;
  justify-content: center;
  padding: var(--ms-spacing-4);
}
.ms-step-gallery {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.ms-step-gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ms-step-gallery__track::-webkit-scrollbar { display: none; }
.ms-step-gallery__img {
  flex: 0 0 100%;
  width: 100%;
  max-height: 400px;
  object-fit: contain;
  scroll-snap-align: start;
  display: block;
  border-radius: var(--ms-rounded-lg);
}
.ms-step-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(30,32,36,0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ms-on-surface);
  cursor: pointer;
  transition: background 0.2s;
  z-index: 2;
}
.ms-step-gallery__nav:hover { background: rgba(30,32,36,0.9); }
.ms-step-gallery__nav--prev { left: var(--ms-spacing-2); }
.ms-step-gallery__nav--next { right: var(--ms-spacing-2); }
.ms-step-gallery__nav .material-symbols-outlined { font-size: 1.25rem; }

/* Reset .ms-prose img margins/radius inside step media (prose adds margin: 24px 0 and border-radius to all imgs) */
.ms-step__media img {
  margin: 0;
}

/* ---- Showcase ---- */
.ms-step__media--showcase {
  overflow: visible;
  max-height: none;
  border-radius: 0;
  background: none;
  display: flex;
  justify-content: center;
}
.ms-step__media--showcase .ms-post-phone-bezel {
  border-radius: 0;
}

.ms-step__tip {
  background: rgba(var(--ms-accent-2-rgb),0.06);
  border-radius: var(--ms-rounded-md);
  padding: var(--ms-spacing-3) var(--ms-spacing-4);
  font-size: var(--ms-body-sm);
  color: var(--ms-primary);
  display: flex;
  align-items: flex-start;
  gap: var(--ms-spacing-2);
}
.ms-step__tip .material-symbols-outlined {
  font-size: 1.125rem;
  flex-shrink: 0;
  margin-top: 0.0625rem;
}

/* ── FAQ Accordion ── */
.ms-faq { margin: var(--ms-spacing-2) 0; }
.ms-faq__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ms-surface-container-low);
  border: none;
  border-radius: var(--ms-rounded-md);
  padding: var(--ms-spacing-4) var(--ms-spacing-5);
  cursor: pointer;
  font-family: var(--ms-font-headline);
  font-size: var(--ms-body-lg);
  font-weight: 600;
  color: var(--ms-on-surface);
  text-align: left;
  transition: background 0.2s;
}
.ms-faq__toggle:hover { background: var(--ms-surface-container); }
.ms-faq__icon {
  color: var(--ms-on-surface-variant);
  transition: transform 0.25s ease;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.ms-faq__toggle[aria-expanded="true"] .ms-faq__icon { transform: rotate(180deg); }
.ms-faq__answer {
  padding: var(--ms-spacing-4) var(--ms-spacing-5) var(--ms-spacing-5);
  font-size: var(--ms-body-lg);
  color: var(--ms-on-surface-variant);
  line-height: 1.7;
  background: var(--ms-surface-container-lowest);
  border-radius: 0 0 var(--ms-rounded-md) var(--ms-rounded-md);
}

/* ── Callout Block ── */
.ms-callout {
  border-radius: var(--ms-rounded-lg);
  padding: var(--ms-spacing-5) var(--ms-spacing-6);
  margin: var(--ms-spacing-6) 0;
  border-left: 3px solid;
}
.ms-callout--note  { background: rgba(68,216,241,0.05);  border-color: var(--ms-tertiary); }
.ms-callout--tip   { background: rgba(var(--ms-accent-2-rgb),0.05); border-color: var(--ms-primary); }
.ms-callout--warning { background: rgba(255,180,171,0.05); border-color: var(--ms-error); }
.ms-callout--info  { background: rgba(205,189,255,0.05); border-color: var(--ms-secondary); }
.ms-callout__header {
  display: flex;
  align-items: center;
  gap: var(--ms-spacing-2);
  margin-bottom: var(--ms-spacing-2);
  font-family: var(--ms-font-label);
  font-size: var(--ms-label-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ms-callout--note .ms-callout__header  { color: var(--ms-tertiary); }
.ms-callout--tip .ms-callout__header   { color: var(--ms-primary); }
.ms-callout--warning .ms-callout__header { color: var(--ms-error); }
.ms-callout--info .ms-callout__header  { color: var(--ms-secondary); }
.ms-callout__header .material-symbols-outlined { font-size: 1.125rem; }
.ms-callout__body {
  font-size: var(--ms-body-lg);
  line-height: 1.65;
  color: var(--ms-on-surface-variant);
}

/* ── Showcase Block (inline) ── */
.ms-showcase-block {
  text-align: center;
  margin: var(--ms-spacing-8) 0;
}
.ms-showcase-block__phone {
  display: inline-block;
  perspective: 800px;
}
.ms-showcase-block__phone .ms-hero__phone-frame {
  transform: rotateY(var(--ms-phone-pan, -15deg)) rotateX(var(--ms-phone-tilt, 4deg));
  transition: transform 0.4s ease;
  max-width: 240px;
  border-radius: 42px;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.ms-showcase-block__phone .ms-hero__phone-screen {
  position: static;
  width: 100%; height: auto; display: block;
}
.ms-showcase-block__badges {
  display: flex;
  justify-content: center;
  gap: var(--ms-spacing-3);
  margin-top: var(--ms-spacing-4);
}
.ms-badge-btn__icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}

/* ── Prev/Next Navigation ── */
.ms-academy-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ms-spacing-4);
  padding: var(--ms-spacing-8) 0;
}
.ms-academy-nav__card {
  background: var(--ms-surface-container-low);
  border-radius: var(--ms-rounded-lg);
  padding: var(--ms-spacing-5) var(--ms-spacing-6);
  transition: transform 0.2s, box-shadow 0.3s;
  display: block;
  color: var(--ms-on-surface);
}
.ms-academy-nav__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ms-shadow-sm);
  text-decoration: none;
  color: var(--ms-on-surface);
}
.ms-academy-nav__card--next { text-align: right; }
.ms-academy-nav__title {
  font-family: var(--ms-font-headline);
  font-size: var(--ms-body-lg);
  font-weight: 700;
  color: var(--ms-primary);
  display: block;
  margin-top: var(--ms-spacing-1);
}

/* ── Related Articles ── */
.ms-academy-related { padding: var(--ms-spacing-8) 0; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* ── Tablet (769px – 1024px) ── */
@media (max-width: 1024px) {
  .ms-hero--split .ms-hero__split {
    gap: var(--ms-spacing-8);
    padding-inline: var(--ms-spacing-6);
  }

  .ms-hero--portrait .ms-hero__split {
    grid-template-columns: 1.2fr 0.8fr;
  }

  .ms-disciplines__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ms-artifacts__tilted-grid {
    grid-template-columns: repeat(2, 1fr);
    padding-inline: var(--ms-spacing-8);
    transform: perspective(1000px) rotateX(3deg) rotateY(-5deg) rotateZ(1deg);
  }

  .ms-bento {
    grid-template-columns: repeat(6, 1fr);
  }

  .ms-bento__item--featured,
  .ms-event-bento--featured,
  .ms-blog-card--featured {
    grid-column: span 6;
  }

  .ms-bento__item--standard,
  .ms-event-bento--standard,
  .ms-blog-card--standard {
    grid-column: span 3;
  }

  .ms-secondary-cta__card {
    padding: var(--ms-spacing-10);
  }

  /* Footer — reduce gap on tablets */
  .ms-footer__columns {
    gap: var(--ms-spacing-12);
  }

  /* Tilted grid — remove offset margins on tablets */
  .ms-artifact-tile--offset-1,
  .ms-artifact-tile--offset-2,
  .ms-artifact-tile--offset-3 {
    margin-top: 0;
  }

  /* Academy tablet */
  .ms-academy-article__layout { grid-template-columns: 220px 1fr; gap: var(--ms-spacing-8); }
  .ms-academy-topics__grid { grid-template-columns: repeat(2, 1fr); }
  .ms-academy-subtopics__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile (≤768px) ── */
@media (max-width: 768px) {
  h1 { font-size: var(--ms-display-sm); }
  h2 { font-size: var(--ms-headline-lg); }
  h3 { font-size: var(--ms-headline-md); }

  .ms-post-phone-wrap {
    transform: none;
  }

  .ms-post-phone-wrap:hover {
    transform: none;
  }

  .ms-post-phone-frame {
    width: 200px;
    border-radius: 30px;
  }

  .ms-showcase-split {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .ms-showcase-split__media {
    order: -1;
  }

  .ms-section {
    padding-block: var(--ms-spacing-12);
  }

  .ms-container {
    padding-inline: var(--ms-spacing-4);
  }

  /* Mobile header layout: brand — CTA — hamburger */
  .ms-header__inner {
    display: flex;
    align-items: center;
  }

  .ms-nav__toggle {
    display: flex;
    order: 3;
    margin-left: var(--ms-spacing-3);
  }

  .ms-nav__cta {
    order: 2;
    margin-left: auto;
    padding: var(--ms-spacing-2) var(--ms-spacing-5);
    font-size: var(--ms-label-sm);
  }

  /* Mobile nav panel — glassmorphic full-screen overlay */
  .ms-nav__menu {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: rgba(17, 19, 23, 0.92);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ms-spacing-3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 105;
  }

  .ms-nav__menu.is-open {
    opacity: 1;
    visibility: visible;
  }

  .ms-nav__list {
    flex-direction: column;
    align-items: center;
    gap: var(--ms-spacing-8);
  }

  .ms-nav__list a {
    font-family: var(--ms-font-headline);
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    opacity: 0.85;
    transition: opacity 0.2s ease, color 0.2s ease;
  }

  .ms-nav__list a:hover,
  .ms-nav__list a:focus {
    opacity: 1;
    color: var(--ms-primary);
  }

  /* (mobile nav underline override moved after base rule at end of file) */

  /* Hero */
  .ms-hero__title {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }

  .ms-hero__actions {
    flex-direction: column;
  }

  .ms-hero__actions .ms-btn,
  .ms-hero__actions .ms-btn--glass {
    width: 100%;
    justify-content: center;
  }

  /* Hero split layout — stack on mobile */
  .ms-hero--split .ms-hero__split,
  .ms-hero--portrait .ms-hero__split {
    grid-template-columns: 1fr;
    text-align: center;
    max-width: none;
    padding-inline: var(--ms-spacing-6);
  }

  .ms-hero--split .ms-hero__text {
    text-align: center;
  }

  .ms-hero--split .ms-hero__subtitle {
    margin-inline: auto;
  }

  .ms-hero--split .ms-hero__actions {
    justify-content: center;
  }

  .ms-hero--showcase .ms-hero__media {
    align-items: center;
    overflow: hidden;
    perspective: none;
  }

  .ms-hero__phone-frame {
    width: 200px;
    max-width: 200px;
  }

  .ms-hero__phone-wrap {
    transform: none;
    max-width: 100%;
  }

  .ms-hero__phone-wrap:hover {
    transform: none;
  }

  .ms-hero__badge {
    white-space: normal;
    max-width: 200px;
    font-size: var(--ms-label-xs, 0.65rem);
  }

  .ms-hero--portrait .ms-hero__media {
    max-width: min(60vw, 260px);
    margin-inline: auto;
  }

  .ms-hero--portrait .ms-hero__media .ms-video-embed {
    width: 100%;
  }

  .ms-hero--portrait .ms-hero__media .ms-video-embed iframe {
    width: 100%;
  }

  .ms-hero--portrait .ms-hero-gallery__img {
    max-height: none;
  }

  /* Portrait hero — don't center vertically, flow from top */
  .ms-hero.ms-hero--portrait {
    align-items: flex-start;
    min-height: auto;
    padding-top: 120px;
    padding-bottom: var(--ms-spacing-10);
  }

  /* Disciplines */
  .ms-disciplines__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .ms-disciplines__counter {
    border-left: none;
    padding-left: 0;
  }

  .ms-disciplines__grid {
    grid-template-columns: 1fr;
  }

  .ms-discipline-card--wide {
    grid-column: span 1;
  }

  .ms-discipline-card__row {
    flex-direction: column;
  }

  .ms-discipline-card__media {
    width: 100%;
  }

  /* Tilted grid — flatten on mobile */
  .ms-artifacts__tilted-grid {
    grid-template-columns: repeat(2, 1fr);
    transform: none;
    padding-inline: var(--ms-spacing-4);
  }

  .ms-artifact-tile--offset-down,
  .ms-artifact-tile--offset-up,
  .ms-artifact-tile--offset-sm {
    margin-top: 0;
  }

  /* Secondary CTA */
  .ms-secondary-cta__card {
    padding: var(--ms-spacing-8);
  }

  /* Footer */
  .ms-footer__columns {
    grid-template-columns: 1fr;
    gap: var(--ms-spacing-10);
  }

  .ms-footer__form-row {
    grid-template-columns: 1fr;
  }

  .ms-footer__bottom {
    flex-direction: column;
    gap: var(--ms-spacing-3);
    text-align: center;
  }

  .ms-footer__links {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ms-spacing-4);
  }

  /* Hero */
  .ms-hero {
    min-height: 60vh;
    padding-bottom: 100px;
  }

  /* Bento grids — stack on mobile */
  .ms-bento {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }

  .ms-bento,
  .ms-bento--events {
    grid-auto-rows: auto;
  }

  .ms-bento__item--featured,
  .ms-bento__item--standard,
  .ms-event-bento--featured,
  .ms-event-bento--standard,
  .ms-blog-card--featured,
  .ms-blog-card--standard {
    grid-column: span 1;
    grid-row: span 1;
  }

  /* Featured event card — switch from overlay to stacked layout on mobile */
  .ms-event-bento--featured {
    aspect-ratio: auto;
    min-height: auto;
    display: flex;
    flex-direction: column;
  }

  .ms-event-bento--featured .ms-event-bento__img {
    position: relative;
    inset: auto;
    height: 200px;
    opacity: 0.7;
  }

  .ms-event-bento--featured .ms-event-bento__gradient {
    display: none;
  }

  .ms-event-bento--featured .ms-event-bento__content--over {
    position: static;
    padding: var(--ms-spacing-6) var(--ms-spacing-8);
    flex: 1;
  }

  .ms-event-bento--featured .ms-event-bento__footer {
    position: static;
    padding: var(--ms-spacing-6) var(--ms-spacing-8);
    border-top: 1px solid rgba(var(--ms-accent-1-rgb), 0.1);
  }

  .ms-event-bento--featured .ms-event-bento__title {
    font-size: var(--ms-headline-sm);
  }

  .ms-event-bento--featured .ms-event-bento__desc {
    font-size: var(--ms-body-sm);
    margin-bottom: var(--ms-spacing-4);
  }

  .ms-blog-card--featured {
    grid-template-columns: 1fr;
  }

  /* Academy mobile */
  .ms-academy-article__layout { grid-template-columns: 1fr; }
  .ms-academy-sidebar__toggle { display: flex; }
  .ms-academy-sidebar__inner { display: none; }
  .ms-academy-sidebar.is-open .ms-academy-sidebar__inner { display: flex; }
  .ms-academy-sidebar {
    background: var(--ms-surface-container-low);
    border-radius: var(--ms-rounded-lg);
    padding: var(--ms-spacing-3);
  }
  .ms-academy-sidebar__inner { position: static; max-height: none; }
  .ms-academy-topics__grid { grid-template-columns: 1fr; }
  .ms-academy-subtopics__grid { grid-template-columns: 1fr; }
  .ms-academy-nav { grid-template-columns: 1fr; }
  .ms-academy-content__title { font-size: var(--ms-headline-lg); }
  .ms-step__body--has-media { grid-template-columns: 1fr; }
  .ms-step__body--media-left .ms-step__media { order: 0; }
  .ms-breadcrumbs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .ms-showcase-block__phone .ms-hero__phone-frame {
    transform: none;
    max-width: 200px;
  }

  /* Legal page */
  .ms-legal__layout {
    grid-template-columns: 1fr;
  }

  .ms-legal__sidebar {
    position: static;
  }

  /* 404 */
  .ms-404__number {
    font-size: 8rem;
  }

  /* Modal — tighten for mobile */
  .ms-modal__container {
    width: 95%;
    max-height: 90vh;
  }

  .ms-modal__body {
    padding: var(--ms-spacing-4) var(--ms-spacing-5) var(--ms-spacing-6);
  }

  /* Single pages mobile spacing */
  .ms-artifact-detail,
  .ms-event-detail {
    padding-top: var(--ms-spacing-8);
  }

  .ms-event-meta {
    flex-direction: column;
    gap: var(--ms-spacing-4);
  }

  .ms-event-meta__item--push {
    margin-left: 0;
    padding-right: 0;
  }

  .ms-post-nav .nav-links {
    flex-direction: column;
    gap: var(--ms-spacing-4);
  }

  /* Events smoke BG — cap height on mobile */
  .ms-page-smoke--events .ms-page-smoke__img {
    height: 60vh;
  }

  /* Page gallery images — cap height on mobile */
  .ms-page-gallery__img {
    max-height: 60vh;
  }

  /* Modal gallery images — reduce height on mobile */
  .ms-modal-gallery__img {
    height: 200px;
  }

  /* CTA glow circles — smaller on mobile */
  .ms-secondary-cta__glow {
    width: 150px;
    height: 150px;
  }
}

/* ── Small Mobile (≤480px) ── */
@media (max-width: 480px) {
  h1 { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  h2 { font-size: var(--ms-headline-md); }

  .ms-hero__title {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .ms-container {
    padding-inline: var(--ms-spacing-3);
  }

  .ms-section {
    padding-block: var(--ms-spacing-8);
  }

  .ms-artifacts__tilted-grid {
    gap: var(--ms-spacing-3);
    padding-inline: var(--ms-spacing-3);
  }

  .ms-discipline-card {
    padding: var(--ms-spacing-6);
  }

  .ms-bento {
    gap: var(--ms-spacing-4);
  }

  .ms-secondary-cta__card {
    padding: var(--ms-spacing-6);
  }

  .ms-modal__container {
    width: 100%;
    border-radius: 0;
  }

  .ms-modal__body {
    padding: var(--ms-spacing-3) var(--ms-spacing-4) var(--ms-spacing-5);
  }
}

/* ==========================================================================
   ACCESSIBILITY — Focus-visible styles
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--ms-primary);
  outline-offset: 3px;
  border-radius: var(--ms-rounded-md);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Skip-to-content link */
.ms-skip-link {
  position: absolute;
  top: -100%;
  left: var(--ms-spacing-4);
  z-index: 999;
  padding: var(--ms-spacing-3) var(--ms-spacing-6);
  background: var(--ms-primary-container);
  color: #fff;
  border-radius: var(--ms-rounded-md);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s ease;
}

.ms-skip-link:focus {
  top: var(--ms-spacing-4);
}

/* ==========================================================================
   REDUCED MOTION — respect user preferences
   ========================================================================== */

@media (max-height: 900px), (max-width: 768px) {
  .ms-hero__scroll-indicator {
    display: none;
  }
}

/* Landscape phone — compact hero for short viewports */
@media (max-height: 500px) and (orientation: landscape) {
  .ms-hero--split .ms-hero__split,
  .ms-hero--portrait .ms-hero__split {
    grid-template-columns: 1fr 1fr;
    gap: var(--ms-spacing-6);
    padding-inline: var(--ms-spacing-6);
  }

  .ms-hero {
    min-height: auto;
    padding-top: 80px;
    padding-bottom: var(--ms-spacing-6);
  }

  .ms-hero__title {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
  }

  .ms-hero__subtitle {
    font-size: var(--ms-body-sm);
    margin-bottom: var(--ms-spacing-3);
  }

  .ms-hero__eyebrow {
    margin-bottom: var(--ms-spacing-2);
  }

  .ms-hero__actions {
    flex-direction: row;
    gap: var(--ms-spacing-3);
  }

  .ms-hero__actions .ms-btn {
    width: auto;
    padding: var(--ms-spacing-2) var(--ms-spacing-6);
  }

  .ms-hero--portrait .ms-hero__media {
    max-width: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
  }

  .ms-hero--portrait .ms-hero__media .ms-video-embed {
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }

  .ms-hero--portrait .ms-hero__media .ms-video-embed iframe {
    aspect-ratio: 9 / 16;
    width: auto;
    height: calc(100vh - 100px);
    max-height: calc(100vh - 100px);
    border-radius: var(--ms-rounded-xl);
  }

  /* Nav menu — compact for landscape phones */
  .ms-nav__list {
    gap: var(--ms-spacing-3);
  }

  .ms-nav__list a {
    font-size: clamp(0.9rem, 3vw, 1.2rem);
  }

  .ms-nav__menu {
    gap: var(--ms-spacing-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .ms-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   ADDITIONAL POLISH — Smooth page feel
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

/* Image loading placeholder */
img:not(.ms-header__wand) {
  background: var(--ms-surface-container-low);
}

/* Selection color */
::selection {
  background: rgba(var(--ms-accent-1-rgb), 0.3);
  color: #fff;
}

/* Nav link underline hover effect */
.ms-nav__list a::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ms-primary-container);
  transform: scaleX(0);
  opacity: 0;
  transform-origin: left;
  transition: transform 0.3s ease, opacity 0.15s ease;
  margin-top: 2px;
}

.ms-nav__list a:hover::after,
.ms-nav__list a.is-animating::after {
  transform: scaleX(1);
  opacity: 1;
}

/* Center underline in mobile menu (must be after base rule to win cascade) */
@media (max-width: 768px) {
  .ms-nav__list a::after {
    margin-inline: auto;
    transform-origin: center;
  }
}

/* Pagination styling */

.ms-pagination .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ms-spacing-2);
}

.ms-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ms-rounded-md);
  background: var(--ms-surface-container-low);
  color: var(--ms-on-surface-variant);
  text-decoration: none;
  font-family: var(--ms-font-label);
  font-size: var(--ms-label-md);
  transition: background 0.2s ease, color 0.2s ease;
}

.ms-pagination .page-numbers.current,
.ms-pagination .page-numbers:hover {
  background: var(--ms-primary-container);
  color: #fff;
}

/* Post navigation (single pages) */
.ms-post-nav {
  margin-top: var(--ms-spacing-12);
  padding-top: var(--ms-spacing-8);
  border-top: 1px solid rgba(var(--ms-accent-1-rgb), 0.1);
}

.ms-post-nav .nav-links {
  display: flex;
  justify-content: space-between;
  gap: var(--ms-spacing-8);
}

.ms-post-nav .nav-links a {
  color: var(--ms-primary);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.ms-post-nav .nav-links a:hover {
  opacity: 0.8;
}

/* Single page content prose */
.ms-artifact__content,
.ms-event__content {
  max-width: 720px;
  font-size: var(--ms-body-lg);
  line-height: 1.8;
  color: var(--ms-on-surface-variant);
  margin-top: var(--ms-spacing-10);
  margin-bottom: var(--ms-spacing-8);
}

/* Artifact tags */
.ms-artifact__tags {
  display: flex;
  gap: var(--ms-spacing-2);
  flex-wrap: wrap;
  margin-bottom: var(--ms-spacing-8);
}

/* Artifact CTA */
.ms-artifact__cta {
  margin-bottom: var(--ms-spacing-8);
}

/* Event meta layout */
.ms-event-meta {
  display: flex;
  gap: var(--ms-spacing-12);
  margin-top: var(--ms-spacing-6);
  margin-bottom: var(--ms-spacing-8);
}

.ms-event-meta__item {
  display: flex;
  flex-direction: column;
  gap: var(--ms-spacing-1);
  color: var(--ms-on-surface-variant);
}

.ms-event-meta__address {
  font-size: var(--ms-body-sm);
  opacity: 0.7;
}

/* Event hero image */
.ms-event-hero {
  border-radius: var(--ms-rounded-xl);
  overflow: hidden;
  margin-bottom: var(--ms-spacing-10);
}

.ms-event-hero img {
  width: 100%;
  display: block;
}

/* Artifact hero image */
.ms-artifact-hero {
  border-radius: var(--ms-rounded-xl);
  overflow: hidden;
  margin-top: var(--ms-spacing-8);
}

.ms-artifact-hero img {
  width: 100%;
  display: block;
}

/* Single blog post styling */
.ms-single-post {
  padding-top: var(--ms-spacing-16);
}

.ms-single-post__header {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--ms-spacing-10);
}

.ms-single-post__header h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-top: var(--ms-spacing-3);
  margin-bottom: var(--ms-spacing-4);
}

.ms-single-post__hero {
  max-width: 720px;
  margin-inline: auto;
  border-radius: var(--ms-rounded-xl);
  overflow: hidden;
  margin-bottom: var(--ms-spacing-10);
}

.ms-single-post__hero img {
  width: 100%;
  display: block;
}

.ms-single-post__content {
  max-width: 720px;
  margin-inline: auto;
}

/* Empty state */
.ms-empty {
  text-align: center;
  padding: var(--ms-spacing-20);
  color: var(--ms-on-surface-variant);
  font-size: var(--ms-body-lg);
}