/* ==========================================================================
   Bushido Ryu Martial Arts — Custom Stylesheet
   --------------------------------------------------------------------------
   This file contains all custom styles, colour definitions, animations,
   and component-specific CSS that extends Tailwind CSS.

   Structure:
   1.  CSS Custom Properties (Design Tokens)
   2.  Base / Global Styles
   3.  Navigation & Links
   4.  Animations & Transitions
   5.  Buttons (legacy partial — superseded by section 14)
   6.  Cards & Hover Effects (legacy .card-hover)
   7.  Text Effects & Gradients
   8.  Decorative Elements
   9.  FAQ Accordion (legacy — enhanced in section 19)
   10. Mobile Menu
   11. Utility / Background Gradient Classes
   --- Refactor: component classes (repeated utility patterns) ---
   12. Layout: containers & sections
   13. Page header (interior pages) + breadcrumb
   14. Buttons (complete component styles + sizes)
   15. Cards (base, clickable, feature, characteristic)
   16. Section headings
   17. Icon boxes
   18. Form elements
   19. Info rows, contact cards, alerts, FAQ items
   20. Footer, CTA section, stats, checklist, virtues, text links
   ========================================================================== */

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES — Design Tokens
   ========================================================================== */
:root {
    --color-brand-dark: #0a0f1a;
    --color-brand-darker: #060a12;
    --color-brand-gold: #c9923c;
    --color-brand-gold-light: #dba855;
    --color-brand-gold-dark: #a87830;
    --color-brand-red: #8b1a1a;
    --color-brand-cream: #f5f0e6;
    --color-vermillion: #8b1a1a;
    --gray-50:  #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --font-sans: 'Sora', system-ui, sans-serif;
    --font-serif: '"Noto Serif JP"', serif;
    --shadow-premium: 0 20px 40px rgba(0, 0, 0, 0.15);
    --shadow-gold: 0 10px 25px rgba(201, 146, 60, 0.35);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --transition-base: all 0.3s ease;
    --radius-lg:   0.5rem;
    --radius-xl:   0.75rem;
    --radius-2xl:  1rem;
    --radius-full: 9999px;
}

/* ==========================================================================
   2. BASE / GLOBAL STYLES
   ========================================================================== */
html { scroll-behavior: smooth; }
/* Prevent horizontal overflow (glow elements with negative inset + blur
   such as the samurai/hero gradient glows would otherwise create a
   scrollable gradient strip on the right edge in mobile view) */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}
body { font-family: var(--font-sans); }

/* ==========================================================================
   3. NAVIGATION & LINKS — animated underline
   ========================================================================== */
.nav-link { position: relative; }
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-brand-gold);
    transition: width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

/* ==========================================================================
   4. ANIMATIONS — fade-in
   ========================================================================== */
.fade-in { animation: fadeIn 0.6s ease-out; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   5. BUTTONS (legacy partial definitions — kept for any untouched markup;
      full component styles live in section 14 under .btn.btn-primary)
   ========================================================================== */
.btn-primary {
    background: linear-gradient(135deg, var(--color-brand-gold), var(--color-brand-gold-dark));
    transition: var(--transition-base);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-brand-gold-light), var(--color-brand-gold));
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}
.btn-secondary {
    border: 2px solid var(--color-brand-gold);
    color: var(--color-brand-gold);
    transition: var(--transition-base);
}
.btn-secondary:hover {
    background: var(--color-brand-gold);
    color: white;
    transform: translateY(-2px);
}

/* ==========================================================================
   6. CARDS & HOVER EFFECTS — legacy .card-hover lift
   ========================================================================== */
.card-hover { transition: var(--transition-base); }
.card-hover:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-premium);
}

/* ==========================================================================
   7. TEXT EFFECTS & GRADIENTS
   ========================================================================== */
.gold-gradient {
    background: linear-gradient(135deg, var(--color-brand-gold) 0%, var(--color-brand-gold-light) 50%, var(--color-brand-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-gradient {
    background: linear-gradient(135deg, rgba(10, 15, 26, 0.92) 0%, rgba(10, 15, 26, 0.85) 50%, rgba(139, 26, 26, 0.75) 100%);
}

/* ==========================================================================
   8. DECORATIVE ELEMENTS — Japanese divider
   ========================================================================== */
.japanese-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}
.japanese-divider::before,
.japanese-divider::after {
    content: '';
    flex: 1;
    max-width: 100px;
    height: 1px;
    background: var(--color-brand-gold);
}
.japanese-divider span {
    font-family: var(--font-serif);
    color: var(--color-vermillion);
    font-size: 1.5rem;
}

/* ==========================================================================
   9. FAQ ACCORDION (legacy marker removal — icon rotation now handled by
      .faq-icon-circle in section 19)
   ========================================================================== */
details > summary {
    list-style: none;
    cursor: pointer;
}
details > summary::-webkit-details-marker { display: none; }
details[open] summary .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform 0.3s ease; }

/* ==========================================================================
   10. MOBILE MENU — professional slide-in panel
   --------------------------------------------------------------------------
   Panel lives OUTSIDE <nav> in markup so the navbar's backdrop-filter
   cannot interfere with its fixed positioning. Background is set here
   in CSS (solid white) — does NOT depend on Tailwind's bg-white utility.
   Hidden on desktop via lg:hidden utility; media query below guarantees
   it even if utility ordering changes.
   ========================================================================== */
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 18rem;                    /* w-72 */
    max-width: 86vw;                 /* never overflows tiny screens */
    background-color: #ffffff;       /* SOLID white — guaranteed */
    /* box-shadow applied only when .open below — otherwise the negative
       left-offset shadow bleeds back into the viewport as a grey strip
       down the right edge even while the menu is translated off-screen */
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 60;                     /* above navbar (50) */
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.mobile-menu.open {
    transform: translateX(0);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
}
/* Guarantee hidden on desktop regardless of utility load order */
@media (min-width: 1024px) {
    .mobile-menu { display: none; }
}
/* Header: brand + close button, gold underline accent */
.mobile-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
    border-bottom: 2px solid var(--color-brand-gold);
    background: linear-gradient(135deg, #fffdf6 0%, #ffffff 100%);
    flex-shrink: 0;
}
.mobile-menu__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}
.mobile-menu__kanji {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background-color: var(--color-brand-dark);
    color: var(--color-brand-gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 700;
    flex-shrink: 0;
}
.mobile-menu__brand-name {
    display: block;
    font-weight: 700;
    color: var(--gray-900);
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    line-height: 1.2;
}
.mobile-menu__brand-sub {
    display: block;
    font-size: 0.68rem;
    color: var(--gray-500);
    line-height: 1.2;
    margin-top: 0.15rem;
}
.mobile-menu__close {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full);
    border: none;
    background-color: var(--gray-100);
    color: var(--gray-700);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    flex-shrink: 0;
}
.mobile-menu__close:hover {
    background-color: var(--color-brand-gold);
    color: #fff;
    transform: rotate(90deg);
}
/* Navigation link list */
.mobile-menu__nav {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.mobile-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-xl);
    color: var(--gray-700);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}
.mobile-menu__link:hover {
    background-color: rgba(201, 146, 60, 0.08);
    color: var(--color-brand-gold);
    border-left-color: var(--color-brand-gold);
    padding-left: 1.2rem;
}
.mobile-menu__link.active {
    background-color: rgba(201, 146, 60, 0.12);
    color: var(--color-brand-gold);
    border-left-color: var(--color-brand-gold);
    font-weight: 600;
}
.mobile-menu__link svg {
    opacity: 0.35;
    transition: transform 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0;
}
.mobile-menu__link:hover svg {
    opacity: 1;
    transform: translateX(3px);
}
/* Footer: CTA + social icons */
.mobile-menu__foot {
    padding: 1.25rem;
    border-top: 1px solid var(--gray-100);
    background-color: var(--gray-50);
    flex-shrink: 0;
}
.mobile-menu__foot .btn { width: 100%; }
.mobile-menu__social {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
}
/* Overlay — subtle blur backdrop */
.menu-overlay {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transition: opacity 0.3s ease;
}

/* ==========================================================================
   11. UTILITY / BACKGROUND GRADIENT CLASSES
   ========================================================================== */
.bg-hero-gradient {
    background: linear-gradient(135deg, #0a0f1a 0%, #1a1f2e 50%, #2a1a1a 100%);
}
.bg-pageheader-gradient {
    background: linear-gradient(135deg, #0a0f1a 0%, #1a1f2e 100%);
}
.bg-radial-gold {
    background-image: radial-gradient(circle at 20% 50%, rgba(201, 146, 60, 0.3) 0%, transparent 50%),
                      radial-gradient(circle at 80% 20%, rgba(139, 26, 26, 0.3) 0%, transparent 50%);
}
.bg-radial-gold-right {
    background-image: radial-gradient(circle at 70% 30%, rgba(201, 146, 60, 0.3) 0%, transparent 50%);
}
.bg-radial-gold-cta {
    background-image: radial-gradient(circle at 30% 50%, rgba(201, 146, 60, 0.4) 0%, transparent 50%);
}
.bg-cream { background-color: var(--color-brand-cream); }

/* ==========================================================================
   12. LAYOUT — Containers & Sections
   ========================================================================== */
.wrap {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
.px-responsive {
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 640px) {
    .wrap, .px-responsive { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
    .wrap, .px-responsive { padding-left: 2rem; padding-right: 2rem; }
}
.section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.section-alt {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: var(--gray-50);
}
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid var(--gray-100);
}
.menu-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 40;
}
.back-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    background-color: var(--color-brand-gold);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    transition: var(--transition-base);
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
}
.back-to-top:hover { background-color: var(--color-brand-gold-light); }

/* ==========================================================================
   13. PAGE HEADER — interior page banner (radial accent via ::before)
   ========================================================================== */
.page-header {
    position: relative;
    overflow: hidden;
    padding-top: 8rem;
    padding-bottom: 4rem;
    background: linear-gradient(135deg, #0a0f1a 0%, #1a1f2e 100%);
}
.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.2;
    background-image: radial-gradient(circle at 70% 30%, rgba(201, 146, 60, 0.3) 0%, transparent 50%);
    pointer-events: none;
}
.page-header .wrap { position: relative; z-index: 10; }
.page-header-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
}
@media (min-width: 640px) {
    .page-header-title { font-size: 3rem; }
}
.page-header-subtitle {
    font-size: 1.25rem;
    color: var(--gray-300);
    max-width: 42rem;
}
.breadcrumb {
    font-size: 0.875rem;
    color: var(--gray-400);
    margin-bottom: 1rem;
}
.breadcrumb a {
    color: var(--gray-400);
    transition: color 0.3s ease;
    text-decoration: none;
}
.breadcrumb a:hover { color: var(--color-brand-gold); }
.breadcrumb .sep { margin: 0 0.5rem; }
.breadcrumb .current { color: var(--color-brand-gold); }

/* ==========================================================================
   14. BUTTONS — complete component
   Usage: <a class="btn btn-primary btn-lg">...</a>
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-xl);
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition-base);
    text-align: center;
}
.btn:hover { text-decoration: none; }
.btn-sm {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    border-radius: var(--radius-lg);
}
.btn-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
}
.btn-xl {
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
}
.btn.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--color-brand-gold), var(--color-brand-gold-dark));
    border-color: transparent;
}
.btn.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-brand-gold-light), var(--color-brand-gold));
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
    color: #fff;
}
.btn.btn-secondary {
    background: transparent;
    border: 2px solid var(--color-brand-gold);
    color: var(--color-brand-gold);
}
.btn.btn-secondary:hover {
    background: var(--color-brand-gold);
    color: #fff;
    transform: translateY(-2px);
}

/* ==========================================================================
   15. CARDS
   ========================================================================== */
.card {
    background-color: #fff;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--gray-100);
    box-shadow: var(--shadow-sm);
}
.card-clickable {
    display: block;
    background-color: #fff;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--gray-100);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    text-decoration: none;
    transition: var(--transition-base);
}
.card-clickable:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-premium);
}
.card-clickable:hover .card-title { color: var(--color-brand-gold); }
.card-clickable:hover .card-more svg { transform: translateX(0.25rem); }
.card-media {
    height: 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
}
.card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}
.card-body {
    color: var(--gray-500);
    font-size: 0.875rem;
    line-height: 1.625;
}
.card-more {
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-brand-gold);
    font-weight: 600;
    font-size: 0.875rem;
}
.card-more svg { transition: transform 0.3s ease; }
.feature-card {
    background-color: #fff;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--gray-100);
    box-shadow: var(--shadow-sm);
    padding: 2rem;
    text-align: center;
    transition: var(--transition-base);
}
.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-premium);
}
.char-card {
    padding: 2rem;
    border-radius: var(--radius-2xl);
    transition: var(--transition-base);
}
.char-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-premium);
}

/* ==========================================================================
   16. SECTION HEADINGS
   ========================================================================== */
.section-head {
    text-align: center;
    margin-bottom: 3rem;
}
.section-title {
    font-weight: 700;
    color: var(--gray-900);
}
.section-sub {
    color: var(--gray-500);
    line-height: 1.625;
}

/* ==========================================================================
   17. ICON BOXES — layout only (bg + radius stay as utilities)
   ========================================================================== */
.icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.icon-box-sm { width: 3rem; height: 3rem; }
.icon-box-md { width: 3.5rem; height: 3.5rem; }
.icon-box-lg { width: 4rem; height: 4rem; }

/* ==========================================================================
   18. FORM ELEMENTS
   ========================================================================== */
.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}
.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--gray-200);
    background-color: #fff;
    font-size: 1rem;
    font-family: inherit;
    color: var(--gray-900);
    outline: none;
    transition: var(--transition-base);
}
.form-input:focus {
    border-color: var(--color-brand-gold);
    box-shadow: 0 0 0 2px rgba(201, 146, 60, 0.2);
}
.form-input::placeholder { color: var(--gray-400); }

/* ==========================================================================
   19. INFO ROWS, CONTACT CARDS, ALERTS, FAQ ITEMS
   ========================================================================== */
.info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem;
    border-radius: var(--radius-xl);
}
.contact-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: var(--radius-xl);
    background-color: var(--gray-50);
    border: 1px solid var(--gray-100);
    text-decoration: none;
    transition: var(--transition-base);
}
.contact-card:hover {
    border-color: rgba(201, 146, 60, 0.3);
    background-color: rgba(201, 146, 60, 0.05);
}
.alert {
    padding: 1rem;
    border-radius: var(--radius-xl);
    font-size: 0.875rem;
}
.alert-error {
    background-color: #fff1f2;
    border: 1px solid #fecdd3;
    color: #be123c;
}
.alert-success {
    background-color: #ecfdf5;
    border: 1px solid #a7f3d0;
    text-align: center;
    padding: 1.5rem;
}
.faq-item {
    background-color: var(--gray-50);
    border-radius: var(--radius-xl);
    border: 1px solid var(--gray-100);
    transition: border-color 0.3s ease;
}
.faq-item:hover { border-color: rgba(201, 146, 60, 0.3); }
.faq-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    cursor: pointer;
}
.faq-summary .faq-q {
    font-weight: 600;
    color: var(--gray-900);
    padding-right: 1rem;
}
.faq-answer {
    padding: 1rem 1.5rem 1.5rem;
    color: var(--gray-600);
    line-height: 1.625;
    border-top: 1px solid var(--gray-100);
}
.faq-icon-circle {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background-color: rgba(201, 146, 60, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}
details[open] summary .faq-icon-circle { transform: rotate(45deg); }

/* ==========================================================================
   20. FOOTER, CTA SECTION, STATS, CHECKLIST, VIRTUES, TEXT LINKS
   ========================================================================== */
.footer-heading {
    color: #fff;
    font-weight: 600;
    margin-bottom: 1.25rem;
}
.footer-link {
    color: inherit;
    transition: color 0.3s ease;
    text-decoration: none;
}
.footer-link:hover { color: var(--color-brand-gold); }
.social-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background-color: rgba(255, 255, 255, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background-color 0.3s ease;
}
.social-icon:hover { background-color: var(--color-brand-gold); }
.cta-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: var(--color-brand-dark);
    text-align: center;
}
.cta-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
}
.cta-text {
    color: var(--gray-300);
    margin-bottom: 2rem;
}
.stat-number {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--color-brand-gold);
}
.stat-label {
    font-size: 0.75rem;
    color: var(--gray-400);
    margin-top: 0.25rem;
}
.stat-divider {
    width: 1px;
    height: 3rem;
    background-color: rgba(255, 255, 255, 0.1);
}
.check-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--gray-300);
}
.check-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-full);
    background-color: rgba(201, 146, 60, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-brand-gold);
}
.virtue-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.virtue-kanji {
    color: var(--color-brand-red);
    font-weight: 600;
    min-width: 100px;
    flex-shrink: 0;
}
.text-link {
    color: var(--color-brand-gold);
    font-weight: 500;
    text-decoration: none;
}
.text-link:hover { text-decoration: underline; }

/* Accessibility: darken persistent gold text on white backgrounds
   (light brand-gold #c9923c fails WCAG AA at small sizes on white) */
.nav-link.active,
.mobile-menu__link.active,
.text-link,
.breadcrumb .current {
    color: #8a6a1f !important;
}