/**
 * =========================================================================
 * 🌸 ATMOS DIGITAL ATELIER — SOFT PINK & WHITE MINIMALIST DESIGN SYSTEM
 * =========================================================================
 * Inspired by https://atmos.leeroy.ca/
 * Creative Web Design • Experimental Typography • Soft Pink Aesthetic
 * Palette: #FF8FB8, #FFC4D9, #FFF0F5, #FFFFFF, #C94F7C, #242024
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root {
  /* ====================================================
   * 🌸 COLOR PALETTE (Atmos Light Mode - Soft Editorial Warm Pearl)
   * ==================================================== */
  --pink-primary: #E882A7;       /* Refined, sophisticated rose-pink */
  --pink-soft: #F0DCE4;          /* Soft blush highlight */
  --pink-pale: #F7EFF3;          /* Delicate whisper blush */
  --white: #FFFFFF;
  --rose-deep: #B83E6C;          /* Deep rose for punch & readable accents (WCAG AA compliant) */
  --rose-accent: #C94F7C;

  /* Typography Colors (WCAG AAA & AA compliant) */
  --text-ink: #292426;           /* Deep editorial ink charcoal (rich contrast > 12:1, non-harsh) */
  --text-muted: #655B5F;         /* Warm muted charcoal (high contrast, WCAG AA > 5.5:1) */
  --text-faint: #8C7F84;         /* Secondary telemetry & inactive indicators */

  /* Surfaces & Canvas (Warm Pearl & Soft Off-White - gentle on the eyes) */
  --bg-canvas: #F7F4F3;          /* Warm off-white pearl canvas */
  --bg-canvas-subtle: #F1EAE9;   /* Secondary warm section background */
  --bg-gradient-mesh: radial-gradient(at 12% 15%, rgba(240, 220, 228, 0.40) 0%, transparent 60%),
                      radial-gradient(at 88% 22%, rgba(232, 130, 167, 0.15) 0%, transparent 55%),
                      radial-gradient(at 50% 88%, rgba(240, 220, 228, 0.22) 0%, transparent 65%);
  --surface-card: #FCFAF9;       /* Soft warm surface card (reduces harsh pure-white glare) */
  --surface-card-hover: #FFFFFF; /* Subtle lift to crisp white on intentional hover */
  --surface-card-elevated: #FCFAF9;
  --surface-tint: #F3EAEF;       /* Delicate blush secondary background for tags & inner blocks */
  --surface-tint-hover: #EEDFE6;

  /* Hairlines & Accents (Warm, soft and restrained) */
  --border-subtle: #E4DAD9;      /* Gentle warm hairline */
  --border-medium: #D5C7C6;
  --border-hover: #C94F7C;
  --border-active: #B83E6C;
  --border-light: rgba(41, 36, 38, 0.06);

  /* Shadows (Multi-layered, warm, soft depth - never flat, never muddy) */
  --shadow-subtle: 0 1px 3px rgba(41, 36, 38, 0.03), 0 8px 24px -6px rgba(184, 62, 108, 0.05);
  --shadow-hover: 0 4px 14px rgba(41, 36, 38, 0.04), 0 16px 36px -8px rgba(184, 62, 108, 0.12);
  --shadow-card: 0 1px 2px rgba(41, 36, 38, 0.02), 0 8px 20px -6px rgba(184, 62, 108, 0.05);
  --shadow-glow: 0 0 28px rgba(232, 130, 167, 0.18);

  /* Custom Cursor Tokens (Light Mode) */
  --cursor-dot: #B83E6C;
  --cursor-ring-border: rgba(184, 62, 108, 0.50);
  --cursor-ring-bg: rgba(240, 220, 228, 0.25);
  --cursor-ring-hover-border: #B83E6C;
  --cursor-ring-hover-bg: rgba(232, 130, 167, 0.22);
  --cursor-label-bg: #B83E6C;
  --cursor-label-text: #FCFAF9;
  --cursor-label-shadow: 0 6px 20px rgba(184, 62, 108, 0.28);

  /* Typography */
  --font-serif: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 0.25s var(--ease-out);
  --transition-smooth: 0.45s var(--ease-out);
  --transition-slow: 0.8s var(--ease-out);

  /* Radius */
  --radius-pill: 9999px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 8px;
}

[data-theme="dark"] {
  --pink-primary: #FF8FB8;
  --pink-soft: #FFC4D9;
  --pink-pale: #231724;
  --white: #FFFFFF;
  --rose-deep: #FF8FB8;
  --rose-accent: #C94F7C;

  /* Typography Colors */
  --text-ink: #FDF4F8;
  --text-muted: #BBA9B5;
  --text-faint: #786874;

  /* Surfaces & Canvas */
  --bg-canvas: #120D13;
  --bg-canvas-subtle: #19121B;
  --bg-gradient-mesh: radial-gradient(at 15% 15%, rgba(201, 79, 124, 0.15) 0%, transparent 65%),
                      radial-gradient(at 85% 20%, rgba(255, 143, 184, 0.1) 0%, transparent 55%),
                      radial-gradient(at 50% 85%, rgba(255, 196, 217, 0.08) 0%, transparent 60%);
  --surface-card: rgba(26, 18, 27, 0.85);
  --surface-card-hover: rgba(36, 25, 38, 0.95);
  --surface-card-elevated: #201722;
  --surface-tint: rgba(38, 26, 39, 0.7);
  --surface-tint-hover: rgba(52, 34, 54, 0.85);

  /* Hairlines & Accents */
  --border-subtle: rgba(255, 196, 217, 0.18);
  --border-medium: rgba(255, 196, 217, 0.28);
  --border-hover: rgba(255, 143, 184, 0.45);
  --border-active: #FF8FB8;
  --border-light: rgba(255, 255, 255, 0.08);

  /* Shadows */
  --shadow-subtle: 0 16px 36px -12px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 24px 50px -15px rgba(255, 143, 184, 0.22);
  --shadow-card: 0 12px 30px -10px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 50px rgba(255, 143, 184, 0.2);

  /* Custom Cursor Tokens (Dark Mode) */
  --cursor-dot: #FF8FB8;
  --cursor-ring-border: rgba(255, 143, 184, 0.75);
  --cursor-ring-bg: rgba(255, 143, 184, 0.16);
  --cursor-ring-hover-border: #FF8FB8;
  --cursor-ring-hover-bg: rgba(255, 143, 184, 0.3);
  --cursor-label-bg: #FF8FB8;
  --cursor-label-text: #120D13;
  --cursor-label-shadow: 0 8px 24px rgba(255, 143, 184, 0.35);
}

/* ====================================================
 * 🪄 BASE & RESET
 * ==================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-canvas);
  color: var(--text-ink);
  line-height: 1.65;
  font-weight: 400;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  transition: background-color var(--transition-smooth), color var(--transition-smooth);
}

::selection {
  background-color: var(--pink-soft);
  color: var(--text-ink);
}

/* ====================================================
 * 🖱️ PREMIUM CUSTOM CURSOR
 * ==================================================== */
@media (hover: hover) and (pointer: fine) {
  body:not(.cursor-native) {
    cursor: default;
  }

  body:not(.cursor-native) a,
  body:not(.cursor-native) button,
  body:not(.cursor-native) [role="button"],
  body:not(.cursor-native) .clickable,
  body:not(.cursor-native) .filter-btn-atelier,
  body:not(.cursor-native) .preset-chip-card,
  body:not(.cursor-native) .donate-preset-card {
    cursor: none;
  }

  body.cursor-text,
  body.cursor-text input,
  body.cursor-text textarea,
  body.cursor-text select,
  body.cursor-text [contenteditable="true"] {
    cursor: text !important;
  }

  body.cursor-disabled,
  body.cursor-disabled * {
    cursor: not-allowed !important;
  }

  .custom-cursor-dot,
  .custom-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999;
    will-change: transform;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.25s ease;
  }

  body.cursor-active .custom-cursor-dot,
  body.cursor-active .custom-cursor-ring {
    opacity: 1;
  }

  /* Inner Precision Dot */
  .custom-cursor-dot {
    width: 6px;
    height: 6px;
    background-color: var(--cursor-dot);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--cursor-dot);
    transition: opacity 0.25s var(--ease-out), transform 0.2s var(--ease-out), background-color 0.3s ease;
  }

  /* Outer Atmosphere Ring */
  .custom-cursor-ring {
    width: 34px;
    height: 34px;
    border-radius: 9999px;
    border: 1.5px solid var(--cursor-ring-border);
    background-color: var(--cursor-ring-bg);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    transition: width 0.32s var(--ease-out), 
                height 0.32s var(--ease-out), 
                padding 0.32s var(--ease-out),
                border-radius 0.32s var(--ease-out),
                background-color 0.25s ease, 
                border-color 0.25s ease, 
                box-shadow 0.25s ease,
                opacity 0.25s ease;
  }

  /* Contextual Label inside ring */
  .custom-cursor-label {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cursor-label-text);
    opacity: 0;
    transform: scale(0.6);
    white-space: nowrap;
    pointer-events: none;
    line-height: 1;
    transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out);
  }

  /* STATE 1: Clicking (scale-down press feedback) */
  body.cursor-clicking .custom-cursor-ring {
    transform: translate(-50%, -50%) scale(0.82) !important;
    background-color: var(--cursor-ring-hover-bg);
    border-color: var(--cursor-ring-hover-border);
  }

  body.cursor-clicking .custom-cursor-dot {
    transform: translate(-50%, -50%) scale(0.75);
  }

  /* STATE 2: Hovering links & buttons (gentle expansion & bloom) */
  body.cursor-hover .custom-cursor-ring {
    width: 52px;
    height: 52px;
    background-color: var(--cursor-ring-hover-bg);
    border-color: var(--cursor-ring-hover-border);
    box-shadow: 0 0 20px rgba(255, 143, 184, 0.35);
  }

  body.cursor-hover .custom-cursor-dot {
    transform: translate(-50%, -50%) scale(1.35);
  }

  /* STATE 3: Contextual Label (cards, images, preview frames) */
  body.cursor-has-label .custom-cursor-ring {
    width: auto;
    min-width: 82px;
    height: 34px;
    padding: 0 16px;
    background-color: var(--cursor-label-bg);
    border-color: var(--cursor-label-bg);
    box-shadow: var(--cursor-label-shadow);
  }

  body.cursor-has-label .custom-cursor-label {
    opacity: 1;
    transform: scale(1);
  }

  body.cursor-has-label .custom-cursor-dot {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }

  /* STATE 4: Dragging */
  body.cursor-dragging .custom-cursor-ring {
    transform: translate(-50%, -50%) scale(0.88);
    border-style: dashed;
    border-color: var(--cursor-ring-hover-border);
  }

  /* STATE 5: Text Input Selection */
  body.cursor-text .custom-cursor-ring,
  body.cursor-text .custom-cursor-dot {
    opacity: 0 !important;
  }

  /* STATE 6: Disabled elements */
  body.cursor-disabled .custom-cursor-ring {
    width: 28px;
    height: 28px;
    opacity: 0.45;
    border-style: dashed;
    background-color: transparent;
  }
}

@media (hover: none) or (pointer: coarse) {
  .custom-cursor-dot,
  .custom-cursor-ring {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .custom-cursor-dot,
  .custom-cursor-ring {
    display: none !important;
  }
}

/* ====================================================
 * 🌌 AMBIENT INTERACTIVE CANVAS & AURORA LAYERS
 * ==================================================== */
#ambient-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.70;
  mix-blend-mode: multiply;
  transition: opacity 0.6s ease;
}

[data-theme="dark"] #ambient-canvas {
  mix-blend-mode: screen;
  opacity: 0.55;
}

.ambient-noise-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ====================================================
 * 📐 CONTAINER & GRID
 * ==================================================== */
.atelier-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
}

/* ====================================================
 * 🛸 PERIMETER NAVBAR (Atmos style)
 * ==================================================== */
.navbar-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 1.25rem clamp(1.25rem, 4vw, 3.5rem);
  pointer-events: none;
  transition: transform 0.4s var(--ease-out), background-color 0.4s ease;
}

.navbar-container {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  pointer-events: auto;
}

.brand-monogram {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--text-ink);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  background: var(--surface-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-subtle);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.brand-monogram:hover {
  border-color: var(--rose-deep);
  transform: translateY(-1px);
}

.brand-symbol {
  width: 9px;
  height: 9px;
  background: linear-gradient(135deg, var(--rose-deep), var(--pink-primary));
  border-radius: 50%;
  display: inline-block;
  animation: pulseBeacon 2.6s infinite ease-in-out;
}

@keyframes pulseBeacon {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.35); opacity: 0.5; }
}

.navbar-center-telemetry {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 0.45rem 1.25rem;
  box-shadow: var(--shadow-subtle);
}

.telemetry-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.telemetry-item strong {
  color: var(--text-ink);
  font-weight: 600;
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Atmospheric Sound Button */
.btn-sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 0.45rem 0.95rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-ink);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-subtle);
}

.btn-sound-toggle:hover {
  border-color: var(--rose-deep);
  color: var(--rose-deep);
}

.sound-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  width: 14px;
  height: 12px;
}

.sound-bar {
  width: 2.5px;
  background-color: var(--rose-deep);
  border-radius: 1px;
  transition: height 0.2s ease;
  height: 3px;
}

.btn-sound-toggle.playing .sound-bar:nth-child(1) {
  animation: soundBarDance 1s infinite ease-in-out;
}
.btn-sound-toggle.playing .sound-bar:nth-child(2) {
  animation: soundBarDance 1.2s infinite ease-in-out 0.2s;
}
.btn-sound-toggle.playing .sound-bar:nth-child(3) {
  animation: soundBarDance 0.9s infinite ease-in-out 0.4s;
}

@keyframes soundBarDance {
  0%, 100% { height: 3px; }
  50% { height: 12px; }
}

/* Nav Menu Dock */
.nav-links-dock {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--surface-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.4rem;
  list-style: none;
  box-shadow: var(--shadow-subtle);
}

.nav-link-item {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: all var(--transition-fast);
}

.nav-link-item:hover,
.nav-link-item.active {
  color: var(--rose-deep);
  background: var(--surface-tint);
  font-weight: 600;
}

/* Theme Toggle Button */
.btn-icon-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--surface-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  color: var(--text-ink);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-subtle);
}

.btn-icon-pill:hover {
  border-color: var(--rose-deep);
  color: var(--rose-deep);
  transform: scale(1.05);
}

/* Donate Glow Pill Button */
.btn-pill-donate {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 1.15rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--rose-deep), #B33D67);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 16px rgba(201, 79, 124, 0.28);
  transition: all var(--transition-fast);
}

.btn-pill-donate:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201, 79, 124, 0.4);
  background: linear-gradient(135deg, #DE5A8A, var(--rose-deep));
}

/* ====================================================
 * 🌸 HERO SECTION — MONUMENTAL EXPERIMENTAL TYPOGRAPHY
 * ==================================================== */
.hero-atelier {
  min-height: clamp(540px, 86vh, 760px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(5.25rem, 8vh, 6.75rem);
  padding-bottom: clamp(1.75rem, 3.5vh, 2.75rem);
  position: relative;
}

.hero-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 0.85rem;
  margin-bottom: clamp(1.25rem, 2.5vh, 2rem);
}

.hero-availability-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--rose-deep);
  font-weight: 600;
}

.hero-availability-tag::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--rose-deep);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 10px var(--rose-deep);
}

/* Artistic Typography Arena */
.hero-typography-stage {
  position: relative;
  width: 100%;
}

.hero-kicker-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rose-deep);
  margin-bottom: 0.85rem;
}

.hero-kicker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rose-deep);
  box-shadow: 0 0 8px var(--rose-deep);
}

.hero-editorial-headline {
  font-family: var(--font-serif);
  font-size: clamp(3.2rem, 8.5vw, 8rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--text-ink);
  margin-bottom: clamp(1rem, 2vh, 1.5rem);
  text-transform: none;
}

.hero-line {
  display: block;
  overflow: hidden;
}

.hero-line-inner {
  display: inline-block;
  transform: translateY(0);
  transition: transform 0.8s var(--ease-out);
}

.hero-line.offset-right {
  text-align: right;
  padding-right: clamp(0.5rem, 4vw, 3rem);
}

.hero-italic-emphasis {
  font-style: italic;
  font-weight: 400;
  color: var(--rose-deep);
  position: relative;
}

.hero-italic-emphasis::after {
  content: '';
  position: absolute;
  bottom: 0.12em;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--pink-primary), transparent);
  border-radius: 2px;
}

.hero-editorial-sub {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.5fr;
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
  margin-top: clamp(1.5rem, 3vh, 2.75rem);
}

.hero-creator-col {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.hero-avatar-sphere {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
}

.hero-avatar-image {
  width: clamp(72px, 8.5vw, 92px);
  height: clamp(72px, 8.5vw, 92px);
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--white);
  box-shadow: 0 10px 24px rgba(184, 62, 108, 0.16);
  background: var(--pink-pale);
}

.hero-avatar-label h2 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-ink);
}

.hero-avatar-label p {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.hero-creator-footnote {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.74rem;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bullet-sep {
  color: var(--rose-deep);
  opacity: 0.6;
}

.hero-bio-block {
  max-width: 640px;
}

.hero-bio-lead {
  font-size: clamp(1.02rem, 1.25vw, 1.22rem);
  line-height: 1.7;
  color: var(--text-ink);
  font-weight: 400;
  margin-bottom: 1.5rem;
}

.hero-actions-cluster {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Pill Action Buttons */
.btn-atelier-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--rose-deep), #B33D67);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-pill);
  text-decoration: none;
  box-shadow: 0 10px 24px -6px rgba(201, 79, 124, 0.35);
  transition: all var(--transition-fast);
}

.btn-atelier-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -6px rgba(201, 79, 124, 0.45);
  background: linear-gradient(135deg, #DF5A8B, var(--rose-deep));
}

.btn-atelier-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.6rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-ink);
  background: var(--surface-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.btn-atelier-ghost:hover {
  border-color: var(--rose-deep);
  color: var(--rose-deep);
  background: var(--surface-tint);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

/* Scroll Exploration Cue */
.hero-scroll-cue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-subtle);
  padding-top: 1rem;
  margin-top: clamp(1.5rem, 2.5vh, 2.25rem);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.scroll-indicator-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

.scroll-indicator-wrap:hover {
  color: var(--rose-deep);
}

.scroll-line-draw {
  width: 32px;
  height: 1px;
  background: var(--border-subtle);
  position: relative;
  overflow: hidden;
}

.scroll-line-draw::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--rose-deep);
  animation: lineTrace 2.2s infinite ease-in-out;
}

@keyframes lineTrace {
  0% { left: -100%; }
  50%, 100% { left: 100%; }
}

/* ====================================================
 * 📖 SECTION COMMONS & EDITORIAL HEADERS
 * ==================================================== */
.atelier-section {
  padding: clamp(2.75rem, 5vh, 4rem) 0;
  position: relative;
}

.editorial-header {
  margin-bottom: clamp(1.75rem, 3.5vh, 2.75rem);
  position: relative;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: clamp(0.85rem, 1.8vh, 1.35rem);
}

.editorial-tag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.tag-capsule {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rose-deep);
  background: transparent;
  padding: 0;
  border: none;
}

.editorial-index-num {
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.editorial-title {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 5.8vw, 4.8rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text-ink);
}

.editorial-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--rose-deep);
}

.editorial-caption {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 1.2vw, 1.12rem);
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 640px;
  margin-top: 0.85rem;
}

/* ====================================================
 * 🌿 SECTION 1: MANIFESTO & PHILOSOPHY (VỀ BẢN THÂN)
 * ==================================================== */
.manifesto-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 4.5vw, 3.75rem);
  align-items: start;
}

.manifesto-statement-card {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  position: relative;
}

.manifesto-statement-card::before {
  display: none;
}

.manifesto-paragraph:first-child {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.45;
  color: var(--text-ink);
  font-weight: 300;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
}

.manifesto-paragraph {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-muted);
  font-weight: 400;
  margin-bottom: 1rem;
  max-width: 620px;
}

.manifesto-paragraph:last-child {
  margin-bottom: 0;
}

.manifesto-paragraph strong {
  font-weight: 600;
  color: var(--rose-deep);
}

.manifesto-metrics-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--border-subtle);
}

.metric-art-card {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  padding: 1.15rem 0;
  box-shadow: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  transition: all var(--transition-fast);
}

.metric-art-card:hover {
  border-color: var(--rose-deep);
  transform: translateX(6px);
}

.metric-art-index {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  font-weight: 600;
}

.metric-art-val {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 4vw, 3.8rem);
  font-weight: 300;
  color: var(--rose-deep);
  line-height: 1;
}

.metric-art-lbl {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  text-align: right;
  max-width: 160px;
}

/* ====================================================
 * 🎨 SECTION 2: CURATED WORKS / ARCHIVES (DỰ ÁN)
 * ==================================================== */
.filter-atelier-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(2rem, 4vh, 3rem);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 1.25rem;
}

.filter-btn-atelier {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 0.45rem 1.15rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-btn-atelier:hover {
  color: var(--text-ink);
  background: var(--surface-tint);
}

.filter-btn-atelier.active {
  background: var(--text-ink);
  color: var(--white);
  border-color: var(--text-ink);
}

[data-theme="dark"] .filter-btn-atelier.active {
  background: var(--rose-deep);
  border-color: var(--rose-deep);
  color: var(--white);
}

.works-editorial-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vh, 4rem);
}

.work-item-card {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  padding-bottom: clamp(2rem, 4vh, 3rem);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  transition: border-color var(--transition-fast);
}

.work-item-card:hover {
  border-color: var(--rose-deep);
}

/* Lead Featured Flagship Showcase */
.work-item-card.work-featured-hero {
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vh, 2.25rem);
  border-bottom: 2px solid var(--border-medium);
  padding-bottom: clamp(2.5rem, 5vh, 3.75rem);
}

.work-featured-hero .work-media-stage {
  aspect-ratio: 16 / 9;
  max-height: 520px;
}

.work-featured-hero .work-heading {
  font-size: clamp(2.2rem, 3.8vw, 3.4rem);
  line-height: 1.1;
}

.work-featured-hero .work-description {
  max-width: 760px;
  font-size: 1.05rem;
  line-height: 1.75;
}

.work-hero-meta-row,
.work-meta-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.65rem;
}

.work-index-badge {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rose-deep);
}

.work-index-watermark {
  position: absolute;
  bottom: 1rem;
  right: 1.25rem;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--text-ink);
  background: var(--surface-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0.2rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  pointer-events: none;
}

/* Alternating Reverse Cards for Dynamic Magazine Rhythm */
.work-item-card.stagger-reverse {
  grid-template-columns: 1fr 1.15fr;
}

.work-item-card.stagger-reverse .work-media-stage {
  order: 2;
}

.work-item-card.stagger-reverse .work-content-body {
  order: 1;
}

.work-media-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--pink-pale);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.work-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}

.work-item-card:hover .work-media-img {
  transform: scale(1.03);
}

.work-category-capsule {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--surface-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rose-deep);
  border: 1px solid var(--border-subtle);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.capsule-star {
  color: var(--rose-deep);
  font-size: 0.8rem;
}

.work-content-body {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.work-heading {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--text-ink);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
  transition: color var(--transition-fast);
}

.work-item-card:hover .work-heading {
  color: var(--rose-deep);
}

.work-subheading {
  font-size: 0.85rem;
  color: var(--rose-deep);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.work-description {
  font-size: 0.98rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  max-width: 560px;
}

.work-footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding-top: 0;
  border-top: none;
}

.work-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.work-tech-pill {
  font-size: 0.72rem;
  padding: 0.22rem 0.65rem;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  font-weight: 500;
  transition: all var(--transition-fast);
}

.work-tech-pill:hover {
  border-color: var(--rose-deep);
  color: var(--rose-deep);
  background: var(--surface-tint);
}

.work-actions-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  color: var(--text-ink);
  background: var(--surface-card);
  text-decoration: none;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.btn-icon-link:hover {
  border-color: var(--rose-deep);
  color: #FFFFFF;
  transform: scale(1.08);
  background: var(--rose-deep);
  box-shadow: 0 6px 16px rgba(184, 62, 108, 0.3);
}

/* ====================================================
 * ⏳ SECTION 3: TRAJECTORY & EXPERIENCE (KINH NGHIỆM)
 * ==================================================== */
.trajectory-stream {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border-subtle);
}

.trajectory-card {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  padding: clamp(1.75rem, 3.5vh, 2.5rem) 0;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
  transition: border-color var(--transition-fast);
}

.trajectory-card:hover {
  border-color: var(--rose-deep);
}

.trajectory-aside {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.trajectory-index {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--rose-deep);
  font-weight: 700;
}

.trajectory-badge {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--text-ink);
  font-weight: 600;
}

.trajectory-location {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.trajectory-company {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--rose-deep);
  text-decoration: none;
  margin-top: 0.25rem;
  transition: color var(--transition-fast);
}

.trajectory-company:hover {
  text-decoration: underline;
}

.trajectory-main {
  max-width: 780px;
}

.trajectory-role {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--text-ink);
  letter-spacing: -0.01em;
  margin-bottom: 0.65rem;
}

.trajectory-desc {
  font-size: 0.98rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 1.15rem;
}

.trajectory-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.trajectory-bullets li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.92rem;
  color: var(--text-ink);
  line-height: 1.65;
}

.trajectory-bullets li::before {
  content: '✦';
  position: absolute;
  left: 0;
  top: 0.15em;
  color: var(--rose-deep);
  font-size: 0.7rem;
}

.trajectory-tech-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

/* ====================================================
 * 🔬 SECTION 4: DISCIPLINES & CRAFT (KỸ NĂNG)
 * ==================================================== */
.skills-atelier-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.discipline-capsule-card {
  background: transparent;
  border: none;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0;
  padding: 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color var(--transition-fast);
}

.discipline-capsule-card:hover {
  border-color: var(--rose-deep);
}

.discipline-header {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.discipline-index {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--rose-deep);
  font-weight: 700;
}

.discipline-title {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text-ink);
  line-height: 1.2;
}

.discipline-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.skill-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-ink);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  transition: all var(--transition-fast);
}

.skill-tag-pill:hover {
  border-color: var(--rose-deep);
  background: var(--surface-tint);
  color: var(--rose-deep);
}

.skill-level-bullet {
  font-size: 0.68rem;
  color: var(--rose-deep);
  font-weight: 600;
}

/* ====================================================
 * 🎓 SECTION 5: ACCREDITATIONS & EDUCATION
 * ==================================================== */
.education-layout-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 4.5vw, 3.75rem);
  align-items: start;
}

.editorial-subheading-tag {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rose-deep);
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.edu-academic-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--surface-card);
  transition: all var(--transition-fast);
}

.edu-academic-card:hover {
  border-color: var(--rose-deep);
  box-shadow: var(--shadow-subtle);
}

.edu-card-kicker {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rose-deep);
  margin-bottom: 0.65rem;
}

.edu-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  font-weight: 400;
  color: var(--text-ink);
  margin-bottom: 0.4rem;
  line-height: 1.25;
}

.edu-institution {
  font-size: 0.92rem;
  color: var(--rose-deep);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.edu-meta-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
}

.edu-desc {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.65;
}

.certs-ledger-stream {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cert-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--border-subtle);
  transition: all var(--transition-fast);
}

.cert-item-row:hover {
  border-color: var(--rose-deep);
  transform: translateX(4px);
}

.cert-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--text-ink);
  line-height: 1.3;
}

.cert-issuer {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.btn-cert-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--rose-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.85rem;
  text-decoration: none;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.btn-cert-link:hover {
  background: var(--rose-deep);
  border-color: var(--rose-deep);
  color: #FFFFFF;
}

/* ====================================================
 * ☕ SECTION 6: PATRONAGE & SUPPORT (INTEGRATED DONATE)
 * ==================================================== */
.patronage-curved-banner {
  background: transparent;
  border: none;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  padding: clamp(2.25rem, 4.5vh, 3.5rem) 0;
  box-shadow: none;
  position: relative;
}

[data-theme="dark"] .patronage-curved-banner {
  background: transparent;
}

.patronage-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
}

.patronage-narrative h3 {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 3.8vw, 3.4rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-ink);
  margin-bottom: 1rem;
}

.patronage-narrative p {
  font-size: 1.02rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 1.25rem;
  max-width: 580px;
}

.patronage-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Preset Quick Cards inside banner */
.preset-quick-selector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.preset-chip-card {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: none;
}

.preset-chip-card:hover,
.preset-chip-card.active {
  border-color: var(--rose-deep);
  background: var(--surface-tint);
  transform: translateY(-2px);
  box-shadow: none;
}

.preset-chip-usd {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--rose-deep);
}

.preset-chip-vnd {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.preset-chip-title {
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 0.35rem;
  color: var(--text-ink);
}

/* ====================================================
 * 📮 SECTION 7: COLOPHON & FOOTER
 * ==================================================== */
.colophon-footer {
  border-top: 1px solid var(--border-subtle);
  padding: clamp(2.75rem, 5vh, 4rem) 0 2rem 0;
  position: relative;
  z-index: 2;
}

.colophon-monument-text {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 7.5vw, 6.8rem);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--text-ink);
  margin-bottom: clamp(1.5rem, 3vh, 2.25rem);
}

.colophon-monument-text em {
  font-style: italic;
  font-weight: 400;
  color: var(--rose-deep);
}

.colophon-layout-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-subtle);
}

.colophon-label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rose-deep);
  font-weight: 600;
  margin-bottom: 1rem;
}

.colophon-email-link {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  color: var(--text-ink);
  text-decoration: none;
  font-style: italic;
  display: inline-block;
  transition: color var(--transition-fast);
}

.colophon-email-link:hover {
  color: var(--rose-deep);
}

.colophon-social-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.colophon-social-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  transition: all var(--transition-fast);
}

.colophon-social-links a:hover {
  color: var(--rose-deep);
  transform: translateX(4px);
}

.colophon-coordinates p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.colophon-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.5rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 1rem;
}

.btn-back-top {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: none;
  color: var(--text-ink);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.btn-back-top:hover {
  color: var(--rose-deep);
}

/* ====================================================
 * 💖 DONATE PAGE SPECIFIC STYLES (DONATE.HTML)
 * ==================================================== */
/* ====================================================
 * 💖 DONATE PAGE SPECIFIC STYLES (DONATE.HTML)
 * ==================================================== */
.donate-canvas-hub {
  padding-top: clamp(5.25rem, 8.5vh, 6.75rem);
  padding-bottom: 3.5rem;
}

.donate-hero-block {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(1.75rem, 3.5vh, 2.75rem);
}

.donate-hero-monogram-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.95rem;
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
  border: 1px solid var(--border-subtle);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rose-deep);
  margin-bottom: 1.15rem;
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rose-deep);
  box-shadow: 0 0 8px var(--rose-deep);
}

.donate-hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--text-ink);
  margin-bottom: 1rem;
}

.donate-hero-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--rose-deep);
}

.donate-hero-subtitle {
  font-size: clamp(0.98rem, 1.2vw, 1.12rem);
  color: var(--text-muted);
  line-height: 1.68;
  max-width: 640px;
  margin: 0 auto 1.5rem;
}

.donate-hero-cta-cluster {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.donate-hero-trust-bar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  justify-content: center;
}

.trust-pill-tag {
  font-size: 0.74rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* 2. ART-DIRECTED WORKBENCH (FOCAL POINT) */
.donate-workbench-section {
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
}

.donate-workbench-header {
  margin-bottom: 1.75rem;
}

.donate-workbench-grid {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.donate-controls-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.donate-group-block {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.donate-subheading {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--rose-deep);
}

/* Frequency Toggle */
.donate-frequency-toggle {
  display: inline-flex;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 0.25rem;
  gap: 0.25rem;
  width: fit-content;
}

.freq-btn {
  background: transparent;
  border: none;
  padding: 0.4rem 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.freq-btn.active {
  background: var(--text-ink);
  color: #FFFFFF;
}

[data-theme="dark"] .freq-btn.active {
  background: var(--rose-deep);
  color: #FFFFFF;
}

/* Presets Grid */
.donate-presets-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}

.donate-preset-card {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.15rem;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: all var(--transition-fast);
  box-shadow: none;
}

.donate-preset-card:hover,
.donate-preset-card.active {
  border-color: var(--rose-deep);
  transform: translateY(-2px);
  background: var(--surface-tint);
  box-shadow: none;
}

[data-theme="dark"] .donate-preset-card:hover,
[data-theme="dark"] .donate-preset-card.active {
  background: var(--surface-card-hover);
  border-color: var(--rose-deep);
}

.preset-popular-flag {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  color: var(--rose-deep);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0;
  border-radius: 0;
}

.donate-preset-usd {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--rose-deep);
  line-height: 1;
  letter-spacing: -0.01em;
}

.donate-preset-vnd {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.donate-preset-title {
  font-family: var(--font-serif);
  font-size: 0.98rem;
  font-weight: 400;
  color: var(--text-ink);
  margin-bottom: 0.25rem;
}

.donate-preset-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* Custom Amount Input Bar */
.donate-custom-input-bar {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.donate-custom-input-bar:focus-within {
  border-color: var(--rose-deep);
}

.custom-input-prefix {
  padding: 0.65rem 0.95rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--rose-deep);
  background: var(--surface-tint);
  border-right: 1px solid var(--border-subtle);
}

.custom-amount-field {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0.65rem 0.85rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-ink);
  outline: none;
  font-family: var(--font-sans);
}

.btn-custom-apply {
  padding: 0.65rem 1.15rem;
  background: var(--rose-deep);
  color: #FFFFFF;
  border: none;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
  white-space: nowrap;
}

.btn-custom-apply:hover {
  background: #B83E6C;
}

.custom-amount-hint {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
}

/* Channel Tabs Switcher */
.donate-channel-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 0.5rem;
}

.channel-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  padding: 0.45rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: all var(--transition-fast);
}

.channel-tab-btn:hover {
  color: var(--text-ink);
  background: var(--surface-tint);
}

.channel-tab-btn.active {
  background: var(--surface-tint);
  color: var(--rose-deep);
  border-color: var(--border-subtle);
}

.channel-pane-box {
  margin-top: 0.75rem;
}

.channel-note-vietqr {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--surface-tint);
  border: 1px solid var(--border-subtle);
  font-size: 0.82rem;
  color: var(--text-ink);
  line-height: 1.55;
}

.channel-note-vietqr .note-icon {
  color: var(--rose-deep);
  font-weight: 700;
}

/* 🎯 Right Column: VietQR Interactive Stage */
.donate-stage-column {
  position: sticky;
  top: 5.5rem;
}

.vietqr-stage-card {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 1.75rem;
  box-shadow: none;
}

.stage-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--rose-deep);
  margin-bottom: 0.65rem;
}

.live-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
}

.stage-amount-headline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 0.75rem;
}

.stage-amount-headline .lbl-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.stage-amount-headline .val-amount {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 600;
  color: var(--rose-deep);
  letter-spacing: -0.01em;
}

.vietqr-code-frame {
  background: #FFFFFF;
  padding: 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  text-align: center;
  max-width: 280px;
  margin: 0 auto 1.25rem;
}

.vietqr-code-frame img {
  width: 100%;
  max-width: 240px;
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
  margin: 0 auto;
}

.vietqr-qr-caption {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  letter-spacing: 0.02em;
}

.vietqr-details-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border-subtle);
}

.vietqr-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  padding: 0.85rem 0;
  gap: 0.75rem;
}

.vietqr-detail-lbl {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.vietqr-detail-val {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text-ink);
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.btn-mini-copy {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.65rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--rose-deep);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all var(--transition-fast);
}

.btn-mini-copy:hover {
  background: var(--rose-deep);
  border-color: var(--rose-deep);
  color: #FFFFFF;
}

.stage-security-notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 1rem;
  line-height: 1.45;
}

/* Global Gateways inside Tab */
.global-gateways-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.gateway-card {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.15rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all var(--transition-fast);
  box-shadow: none;
}

.gateway-card:hover {
  border-color: var(--rose-deep);
  transform: translateY(-2px);
  background: var(--surface-tint);
}

.gateway-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.gateway-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.gateway-name {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--text-ink);
}

.gateway-sub {
  font-size: 0.75rem;
  color: var(--rose-deep);
}

.gateway-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 1rem;
}

/* 3. VISUAL STORYTELLING & TRANSPARENCY */
.donate-story-section {
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: clamp(2.5rem, 5vh, 3.75rem) 0;
  margin-bottom: clamp(2.5rem, 5vh, 3.75rem);
}

.donate-story-lead blockquote {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 300;
  font-style: italic;
  color: var(--text-ink);
  line-height: 1.5;
  margin-bottom: 2rem;
  max-width: 820px;
}

.donate-impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

.impact-pillar-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 1.5rem;
  transition: all var(--transition-fast);
}

.impact-pillar-card:hover {
  border-color: var(--rose-deep);
  background: var(--surface-tint);
}

.pillar-icon {
  font-size: 1.6rem;
  margin-bottom: 0.65rem;
}

.pillar-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--text-ink);
  margin-bottom: 0.4rem;
}

.pillar-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* 4. PERSONAL GRATITUDE */
.donate-gratitude-banner {
  text-align: center;
  padding: 2.25rem 1rem;
}

.gratitude-symbol {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
}

.gratitude-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 300;
  color: var(--text-ink);
  margin-bottom: 0.75rem;
}

.gratitude-text {
  font-size: 1.02rem;
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.75;
}

/* Toast Notification */
.toast-capsule {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--text-ink);
  color: #FFFFFF;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 10000;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: all 0.35s var(--ease-elastic);
}

.toast-capsule.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

[data-theme="dark"] .toast-capsule {
  background: var(--pink-soft);
  color: var(--text-ink);
}

/* ====================================================
 * 📱 RESPONSIVE ADJUSTMENTS
 * ==================================================== */
@media (max-width: 1024px) {
  .manifesto-grid,
  .patronage-grid,
  .donate-workbench-grid,
  .vietqr-split-grid,
  .colophon-layout-grid,
  .education-layout-split {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .skills-atelier-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }

  .donate-stage-column {
    position: static;
  }

  .work-item-card,
  .work-item-card.stagger-reverse,
  .work-item-card:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .work-item-card.stagger-reverse .work-media-stage,
  .work-item-card:nth-child(even) .work-media-stage {
    order: 1;
  }

  .work-item-card.stagger-reverse .work-content-body,
  .work-item-card:nth-child(even) .work-content-body {
    order: 2;
  }

  .hero-editorial-sub {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .navbar-center-telemetry {
    display: none;
  }
}

@media (max-width: 768px) {
  .donate-presets-grid {
    grid-template-columns: 1fr;
  }

  .skills-atelier-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .trajectory-card {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .trajectory-aside {
    position: static;
  }

  .manifesto-metrics-col {
    grid-template-columns: 1fr 1fr;
  }

  .hero-meta-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .hero-line.offset-right {
    text-align: left;
    padding-right: 0;
  }

  .nav-links-dock {
    display: none; /* Accessible via mobile actions or compact view */
  }

  .colophon-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .manifesto-metrics-col,
  .preset-quick-selector {
    grid-template-columns: 1fr;
  }

  .hero-editorial-headline {
    font-size: clamp(2.4rem, 11vw, 3.2rem);
  }

  .work-featured-hero .work-heading {
    font-size: clamp(1.8rem, 6.5vw, 2.2rem);
  }

  .hero-actions-cluster {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-atelier-primary,
  .btn-atelier-ghost {
    justify-content: center;
  }
}

/* Reduced Motion */
@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;
  }
}

/* Print Styles */
@media print {
  .navbar-header,
  #ambient-canvas,
  .ambient-noise-layer,
  .custom-cursor-dot,
  .custom-cursor-ring,
  .hero-scroll-cue,
  .btn-sound-toggle,
  .btn-pill-donate,
  .filter-atelier-bar,
  .patronage-curved-banner,
  .btn-back-top,
  .print-hide {
    display: none !important;
  }

  body {
    background: #FFFFFF !important;
    color: #000000 !important;
  }

  .atelier-section {
    padding: 2rem 0 !important;
    page-break-inside: avoid;
  }

  .trajectory-card,
  .work-item-card,
  .discipline-capsule-card {
    border: 1px solid #CCCCCC !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
}