:root {
            /* Royal Thai Gold Palette */
            --royal-gold: #D4AF37;
            --deep-gold: #B8860B;
            --antique-gold: #C9B037;
            --gold-shimmer: #FFD700;
            
            /* Royal Purple & Burgundy */
            --royal-purple: #4A1A6B;
            --deep-purple: #2D1B4E;
            --royal-burgundy: #800020;
            
            /* Buddhist Saffron & Temple Colors */
            --monk-saffron: #FF9933;
            /* Aliases for names the stylesheets and templates actually type.
               An undefined custom property makes the whole declaration invalid,
               so until these existed every var(--saffron), var(--gold) and
               var(--cream) silently dropped out — including the gender
               selector's active button, whose background, colour and border all
               vanished at once. Values match the canonical variables above so
               there is still one source per colour. */
            --saffron: #FF9933;   /* = --monk-saffron */
            --gold:    #D4AF37;   /* = --royal-gold  */
            --cream:   #FFF8DC;   /* = --silk-cream  */
            --temple-red: #8B0000;
            --temple-orange: #FF6B35;
            /* Darker shades for WORDS only. Saffron and gold are too pale to
               read as text on the white and cream cards (about 2:1 contrast,
               where 4.5:1 is the accessibility minimum). These keep the same
               colour family at 5:1 or better. Keep using the bright ones for
               borders, backgrounds and text on the dark purple bars. */
            --saffron-text: #A85300;
            --gold-text: #8A6D1B;
            
            /* Lotus & Natural Pinks */
            --lotus-pink: #E75480;
            --pale-lotus: #FFE5EC;
            --lotus-white: #FFF5F7;
            
            /* Tropical Green Palette */
            /* Darkened from #228B22, which was 3.58:1 against the darker end
               of the page's cream gradient — under the 4.5:1 WCAG AA needs for
               normal-size text. This is 5.21:1 and reads as the same green.
               It is used for the Paiboon layer wherever Paiboon appears, so
               the text it was failing on is the pronunciation line, which is
               the one a learner is squinting at. */
            --bodhi-green: #1B6E1B;
            --bamboo-green: #6B8E23;
            --palm-green: #355E3B;
            --rice-green: #8FBC8F;
            --jungle-green: #2D5016;
            
            /* Isan Earth Tones */
            --isan-clay: #A0522D;
            --isan-earth: #8B7355;
            --terracotta: #CD853F;
            --sandstone: #D2B48C;
            
            /* Sky & Water */
            --thai-sky: #87CEEB;
            --mekong-blue: #4682B4;
            --monsoon-grey: #708090;
            
            /* Silk & Fabric */
            --silk-cream: #FFF8DC;
            --silk-ivory: #FFFFF0;
            --raw-silk: #F5E6D3;
            
            /* Tropical Accents */
            --orchid-purple: #9370DB;
            --hibiscus-red: #DC143C;
            --frangipani: #FFF9E6;
            --coconut-white: #FFFEF7;
            
            /* Wood & Natural */
            --teak-wood: #654321;
            --dark-text: #2C1810;
            --bamboo-beige: #E3DAC9;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        /* Body - Thai script font.
           Noto Sans sits second ON PURPOSE. Noto Serif Thai and Cormorant both
           claim the Latin Extended range but cannot draw the tone-marked vowels
           the romanisation needs for the rising tone (ǎ ǐ ǔ ɔ̌), so "mǎi" came
           out with a squashed or detached caron. The browser borrows any letter
           a font lacks from the next one in the list; Noto Sans has them all
           and is already loaded. Ordinary Latin and Thai are unaffected. */
        body {
            font-family: 'Noto Serif Thai', 'Noto Sans', 'Cormorant Garamond', 'Sarabun', Georgia, serif;
            background: 
                linear-gradient(135deg, rgba(255, 248, 220, 0.9) 0%, rgba(245, 230, 211, 0.9) 100%),
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="bamboo" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="0.5" fill="%23228B22" opacity="0.03"/></pattern></defs><rect width="100" height="100" fill="url(%23bamboo)"/></svg>');
            /* `background-attachment: fixed` was removed: on iOS Safari it forces
               the whole background to be re-composited against the entire scroll
               height every frame, which crashed the renderer — a blank page with
               no JS error and nothing in the server logs. Short pages stayed
               under the threshold; tall ones did not. Default `scroll` is safe
               and the faint pattern looks the same in practice.

               This fix has now been made twice; it was lost once when main was
               rewound on 2026-07-22. Please do not put it back. */
            min-height: 100vh;
            color: var(--dark-text);
            position: relative;
        }
        
        /* ThaiBridge Spelling's own font: Noto Sans Mono, cut to the
           spelling's letters and kept in static/fonts by
           scripts/fetch_spelling_font.py. Roboto Mono, used here before, has
           no ɛ ɔ ʉ ǎ at all, so those letters were borrowed from Consolas (or
           whatever the phone had), mid-word, with the tone marks set badly.
           One face: italic spelling is slanted from it by the browser. */
        @font-face {
            font-family: 'ThaiBridge Spelling';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url('../fonts/thaibridge-spelling.woff2') format('woff2');
        }

        /* Romanization text - FIXED WIDTH SOLUTION */
        .paiboon, .romanized, .paiboon-text, 
        [class*="paiboon"], [class*="romaniz"] {
            font-family: 'ThaiBridge Spelling', 'Roboto Mono', 'Consolas', 'Monaco', monospace !important;
            font-weight: 400 !important;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            line-height: 2.5 !important;
            display: inline-block;
            vertical-align: baseline;
            letter-spacing: 0.15em;
            word-spacing: 0.3em;
        }
        
        /* Fix for title romanization specifically */
        .romanized-title {
            line-height: 2.8 !important;
            letter-spacing: 0.2em;
        }

        /* Tropical Nature Background Elements */
        body::before {
            content: '';
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 200px;
            background: linear-gradient(to top, rgba(107, 142, 35, 0.15) 0%, transparent 100%);
            pointer-events: none;
            z-index: 0;
        }
        
        body::after {
            content: '🌴 🦚 🐘 🌺 🦎 🌿 🍃';
            position: fixed;
            bottom: 10px;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 1.5rem;
            opacity: 0.2;
            pointer-events: none;
            letter-spacing: 2rem;
            z-index: 0;
        }
        
        /* Navigation - Royal Thai with Gold Filigree */
        nav {
            background: linear-gradient(90deg, var(--royal-purple) 0%, var(--royal-burgundy) 50%, var(--deep-purple) 100%);
            padding: 1rem 2rem;
            box-shadow: 
                0 4px 15px rgba(0,0,0,0.3),
                inset 0 1px 0 rgba(212, 175, 55, 0.3),
                inset 0 -1px 0 rgba(212, 175, 55, 0.3);
            position: sticky;
            top: 0;
            z-index: 1000;
            border-bottom: 2px solid var(--royal-gold);
            /* Two layers: the faint gold pinstripes sit ON TOP of the solid
               royal-purple gradient. Keeping the purple gradient here (rather
               than only in the `background` shorthand above, which this
               property would otherwise override) makes the nav fully opaque,
               so page content no longer shows through when you scroll. */
            background-image:
                repeating-linear-gradient(90deg,
                    transparent,
                    transparent 50px,
                    rgba(212, 175, 55, 0.1) 50px,
                    rgba(212, 175, 55, 0.1) 51px),
                linear-gradient(90deg, var(--royal-purple) 0%, var(--royal-burgundy) 50%, var(--deep-purple) 100%);
        }

        
        nav .nav-container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }
        
        nav .logo {
            font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.6rem);
            color: var(--royal-gold);
            text-decoration: none;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            white-space: nowrap;
            /* Simplified text shadow - fewer layers */
            text-shadow: 
                0 0 3px var(--deep-purple),
                0 1px 0 var(--deep-purple),
                2px 2px 4px rgba(0,0,0,0.5);
            font-family: 'Cormorant Garamond', serif;
            letter-spacing: 0.05em;
            /* GPU acceleration */
            transform: translateZ(0);
        }
        
        /* The logo image is red and gold designed for white, so it sits on a
           small white badge: straight onto the dark bar the red was hard to read. */
        nav .logo {
            background: #fff;
            border-radius: 12px;
            padding: 0.3rem 0.75rem;
            line-height: 0;
        }

        /* Keep the badge white on hover (the other nav links turn gold). */
        nav a.logo:hover {
            background: #fff;
        }

        nav .logo img {
            display: block;
            height: clamp(24px, 20px + 0.8vw, 32px);
            width: auto;
        }
        
        nav ul {
            list-style: none;
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }
        
        nav a {
            color: #FFFFFF; /* Pure white for maximum contrast */
            text-decoration: none;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* Smoother easing */
            font-size: 0.95rem;
            font-weight: 600; /* Bolder for visibility */
            position: relative;
            border: 1px solid transparent;
            /* Clear, strong text shadow for readability */
            text-shadow: 
                0 1px 3px rgba(0, 0, 0, 0.8),
                0 0 8px rgba(0, 0, 0, 0.4);
            /* GPU acceleration */
            transform: translateZ(0);
            will-change: transform, background-color;
            letter-spacing: 0.03em;
        }
        
        nav a:hover {
            background: linear-gradient(135deg, var(--royal-gold) 0%, var(--antique-gold) 100%);
            color: var(--deep-purple);
            border: 2px solid var(--deep-purple);
            box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
            transform: translateY(-3px) translateZ(0);
            /* Subtle gold glow on hover */
            text-shadow: 0 0 5px rgba(212, 175, 55, 0.4);
        }
        
        /* Dropdown Navigation */
        .nav-menu {
            position: relative;
        }
        
        .dropdown {
            position: relative;
            display: inline-block;
        }
        
        .dropdown-toggle {
            background: transparent;
            border: 1px solid rgba(212, 175, 55, 0.4);
            color: #FFFFFF; /* Pure white for maximum contrast */
            padding: 0.5rem 1rem;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.95rem;
            font-weight: 600; /* Bolder for visibility */
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* Smoother easing */
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-family: inherit;
            /* Clear, strong text shadow for readability */
            text-shadow: 
                0 1px 3px rgba(0, 0, 0, 0.8),
                0 0 8px rgba(0, 0, 0, 0.4);
            /* GPU acceleration */
            transform: translateZ(0);
            will-change: transform, background-color;
            letter-spacing: 0.03em;
        }
        
        .dropdown-toggle:hover {
            background: linear-gradient(135deg, var(--royal-gold) 0%, var(--antique-gold) 100%);
            color: var(--deep-purple);
            border: 2px solid var(--deep-purple);
            box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
            transform: translateY(-3px) translateZ(0);
            /* Subtle gold glow on hover */
            text-shadow: 0 0 5px rgba(212, 175, 55, 0.4);
        }

        .dropdown-toggle:hover {
            background: linear-gradient(135deg, var(--royal-gold) 0%, var(--antique-gold) 100%);
            color: var(--deep-purple);
            border: 2px solid var(--deep-purple);
            box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
            transform: translateY(-2px) translateZ(0);
            /* Simple gold glow */
            text-shadow: 0 0 2px rgba(212, 175, 55, 0.5);
        }
        
        .dropdown-toggle::after {
            content: '▼';
            font-size: 0.7em;
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .dropdown.active .dropdown-toggle::after {
            transform: rotate(180deg);
        }
        
        .dropdown-content {
            display: none;
            position: absolute;
            background: linear-gradient(135deg, var(--deep-purple) 0%, var(--royal-burgundy) 100%);
            min-width: 220px;
            box-shadow: 
                0 10px 30px rgba(0,0,0,0.5),
                inset 0 1px 0 rgba(212, 175, 55, 0.5);
            border-radius: 10px;
            z-index: 1001;
            margin-top: 0.5rem;
            padding: 0.75rem 0;
            max-height: 400px;
            overflow-y: auto;
            border: 2px solid var(--royal-gold);
            background-image: 
                repeating-linear-gradient(90deg, 
                    transparent, 
                    transparent 40px, 
                    rgba(212, 175, 55, 0.08) 40px, 
                    rgba(212, 175, 55, 0.08) 41px);
            backdrop-filter: blur(10px);
        }
        
        .dropdown.active .dropdown-content {
            display: block;
            animation: dropdownFade 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        @keyframes dropdownFade {
            from {
                opacity: 0;
                transform: translateY(-15px) translateZ(0);
            }
            to {
                opacity: 1;
                transform: translateY(0) translateZ(0);
            }
        }
        
        .dropdown-content a {
            color: #FFFFFF; /* Pure white for maximum contrast */
            padding: 0.85rem 1.5rem;
            text-decoration: none;
            display: block;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 0;
            border-left: 3px solid transparent;
            font-weight: 600; /* Bolder for visibility */
            /* Clear, strong text shadow */
            text-shadow: 
                0 1px 3px rgba(0, 0, 0, 0.8),
                0 0 8px rgba(0, 0, 0, 0.4);
            letter-spacing: 0.02em;
        }
        
        .dropdown-content a:hover {
            background: linear-gradient(90deg, rgba(212, 175, 55, 0.4) 0%, rgba(212, 175, 55, 0.15) 100%);
            color: var(--gold-shimmer);
            padding-left: 2rem;
            border-left: 3px solid var(--royal-gold);
            box-shadow: inset 0 0 20px rgba(212, 175, 55, 0.3);
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
        }

        .dropdown-divider {
            height: 1px;
            background: rgba(212, 175, 55, 0.4);
            margin: 0.5rem 0;
        }
        
        /* Collapsible Sections */
        .collapsible-section {
            margin-bottom: 1rem;
        }
        
        .section-header {
            background: linear-gradient(135deg, var(--royal-purple) 0%, #6B2D5C 100%);
            color: white;
            padding: 1rem 1.5rem;
            cursor: pointer;
            border-radius: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }
        
        .section-header:hover {
            background: linear-gradient(135deg, #5A2480 0%, #7B3D6C 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }
        
        .section-header h2,
        .section-header h3 {
            margin: 0;
            color: white;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .section-toggle {
            font-size: 1.5rem;
            transition: transform 0.3s ease;
            font-weight: bold;
        }
        
        .collapsible-section.active .section-toggle {
            transform: rotate(180deg);
        }
        
        .section-content {
            display: none;
            padding: 1.5rem;
            background: white;
            border-radius: 0 0 10px 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            margin-top: -10px;
        }
        
        .collapsible-section.active .section-content {
            display: block;
        }
        
        .collapsible-section.active .section-header {
            border-radius: 10px 10px 0 0;
        }
        
        /* Mobile Navigation Toggle */
        .mobile-menu-toggle {
            display: none;
            background: linear-gradient(135deg, var(--royal-gold) 0%, var(--antique-gold) 100%);
            border: 2px solid var(--deep-purple);
            color: var(--deep-purple);
            padding: 0.6rem 1.2rem;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1.3rem;
            font-weight: 700;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
        }
        
        .mobile-menu-toggle:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
        }
        
        @media (max-width: 768px) {
            .mobile-menu-toggle {
                display: block;
            }
            
            nav ul {
                display: none;
                flex-direction: column;
                width: 100%;
                gap: 0;
            }
            
            nav ul.active {
                display: flex;
            }
            
            nav .dropdown-content {
                position: static;
                box-shadow: none;
                background: rgba(74, 26, 107, 0.95);
                margin-left: 1rem;
            }
            
            .gender-selector {
                width: 100%;
                justify-content: center;
            }
        }
        
        /* Main Content - Silk Fabric Texture */
        main {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2.5rem;
            position: relative;
            z-index: 1;
        }
        
        /* Decorative Thai Pattern Border */
        main::before {
            content: '◆ ❖ ◆ ❖ ◆ ❖ ◆ ❖ ◆ ❖ ◆ ❖ ◆ ❖ ◆';
            display: block;
            text-align: center;
            color: var(--royal-gold);
            font-size: 0.9rem;
            margin-bottom: 2rem;
            opacity: 0.6;
            letter-spacing: 0.5rem;
        }
        
        /* Headers - Royal Thai Elegance */
        /* Fluid sizing: font scales smoothly with screen width between a
           phone-friendly minimum and the original desktop maximum, so every
           device (320px phone → 4K monitor) gets a sensible size with no
           breakpoint "jumps". Desktop is unchanged (max = original value). */
        h1 {
            color: var(--royal-purple);
            font-size: clamp(1.6rem, 1.05rem + 2.6vw, 2.8rem);
            margin-bottom: 1.5rem;
            text-align: center;
            text-shadow: 3px 3px 6px rgba(0,0,0,0.15);
            font-family: 'Cormorant Garamond', serif;
            font-weight: 700;
            letter-spacing: 0.02em;
            position: relative;
            padding-bottom: 1rem;
        }
        
        h1::after {
            content: '';
            display: block;
            width: 200px;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--royal-gold), transparent);
            margin: 1rem auto 0;
        }
        
        h1 .thai {
            display: block;
            font-size: 1.8rem;
            color: var(--gold-text);
            margin-top: 0.75rem;
            font-weight: 600;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        }
        
        h2 {
            color: var(--temple-red);
            font-size: clamp(1.35rem, 1.0rem + 1.7vw, 2rem);
            margin: 2.5rem 0 1.5rem;
            border-bottom: none;
            padding-bottom: 0.75rem;
            font-family: 'Cormorant Garamond', serif;
            font-weight: 700;
            position: relative;
            padding-left: 2rem;
        }
        
        h2::before {
            content: '🌺';
            position: absolute;
            left: 0;
            top: 0;
            font-size: 1.8rem;
        }
        
        h2::after {
            content: '';
            display: block;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, var(--royal-gold) 0%, var(--lotus-pink) 50%, transparent 100%);
            margin-top: 0.5rem;
        }
        
        h3 {
            color: var(--royal-purple);
            font-size: clamp(1.15rem, 1.0rem + 0.75vw, 1.5rem);
            margin: 1.75rem 0 1rem;
            font-family: 'Cormorant Garamond', serif;
            font-weight: 600;
        }
        
        /* Cards - Isan Clay & Royal Silk Blend */
        .card {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 252, 245, 0.95) 100%);
            border-radius: 15px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 
                0 8px 25px rgba(0,0,0,0.12),
                inset 0 1px 0 rgba(255,255,255,0.8);
            border: 2px solid transparent;
            border-image: linear-gradient(135deg, var(--royal-gold) 0%, var(--lotus-pink) 50%, var(--bamboo-green) 100%) 1;
            position: relative;
            overflow: hidden;
        }
        
        .card::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 150px;
            height: 150px;
            background: radial-gradient(circle, rgba(107, 142, 35, 0.08) 0%, transparent 70%);
            pointer-events: none;
        }
        
        .card::after {
            content: '🍃';
            position: absolute;
            bottom: 10px;
            right: 15px;
            font-size: 2rem;
            opacity: 0.15;
            pointer-events: none;
        }
        
        .card:hover {
            transform: translateY(-3px);
            box-shadow: 
                0 12px 35px rgba(0,0,0,0.18),
                inset 0 1px 0 rgba(255,255,255,0.9);
            border-image: linear-gradient(135deg, var(--gold-shimmer) 0%, var(--orchid-purple) 50%, var(--bodhi-green) 100%) 1;
        }
        
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 2rem;
            margin: 2.5rem 0;
        }
        
        /* Tables - Teak Wood & Royal Silk */
        table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            margin: 1.5rem 0;
            background: var(--silk-ivory);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 
                0 5px 20px rgba(0,0,0,0.12),
                inset 0 1px 0 rgba(255,255,255,0.5);
            border: 2px solid var(--royal-gold);
        }
        
        th {
            background: linear-gradient(135deg, var(--deep-purple) 0%, var(--royal-burgundy) 100%);
            color: var(--royal-gold);
            padding: 1.25rem;
            text-align: left;
            font-weight: 700;
            font-size: 1.05rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            border-bottom: 3px solid var(--royal-gold);
            position: relative;
        }
        
        th::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--gold-shimmer), transparent);
        }
        
        td {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid rgba(107, 142, 35, 0.15);
            transition: all 0.3s ease;
        }
        
        tr {
            transition: all 0.3s ease;
        }
        
        tbody tr:nth-child(odd) {
            background: rgba(255, 252, 245, 0.5);
        }
        
        tbody tr:hover {
            background: linear-gradient(90deg, rgba(212, 175, 55, 0.1) 0%, rgba(107, 142, 35, 0.08) 100%);
            transform: scale(1.01);
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        
        tbody tr:last-child td {
            border-bottom: none;
        }

        td {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid #eee;
        }
        
        tr:hover {
            background: #f9f5f0;
        }
        
        .thai-text {
            font-size: 1.3rem;
            color: var(--temple-red);
        }
        
        .paiboon {
            color: var(--bodhi-green);
            font-style: italic;
        }
        
        /* Buttons - Royal Gold with Tropical Accents */
        .btn {
            display: inline-block;
            padding: 0.85rem 2rem;
            background: linear-gradient(135deg, var(--royal-gold) 0%, var(--antique-gold) 100%);
            color: var(--deep-purple);
            text-decoration: none;
            border-radius: 25px;
            transition: all 0.3s ease;
            border: 2px solid var(--deep-gold);
            font-weight: 700;
            cursor: pointer;
            box-shadow: 
                0 4px 15px rgba(212, 175, 55, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-size: 0.95rem;
            position: relative;
            overflow: hidden;
        }
        
        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: left 0.5s ease;
        }
        
        .btn:hover::before {
            left: 100%;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 
                0 8px 25px rgba(212, 175, 55, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
            border-color: var(--gold-shimmer);
        }
        
        .btn-secondary {
            background: linear-gradient(135deg, var(--deep-purple) 0%, var(--royal-burgundy) 100%);
            color: var(--silk-cream);
            border: 2px solid var(--royal-purple);
            box-shadow: 
                0 4px 15px rgba(74, 26, 107, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }
        
        .btn-secondary:hover {
            box-shadow: 
                0 8px 25px rgba(74, 26, 107, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }
        
        .btn-saffron {
            background: linear-gradient(135deg, var(--monk-saffron) 0%, var(--temple-orange) 100%);
            color: var(--dark-text);
            border: 2px solid var(--temple-orange);
            box-shadow: 
                0 4px 15px rgba(255, 153, 51, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }
        
        .btn-saffron:hover {
            box-shadow: 
                0 8px 25px rgba(255, 153, 51, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
        }

        /* Tags/Badges */
        .tag {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 15px;
            font-size: 0.8rem;
            margin: 0.25rem;
        }
        
        .tag-beginner { background: #90EE90; color: #006400; }
        .tag-intermediate { background: #FFD700; color: #8B4513; }
        .tag-advanced { background: #FF6B6B; color: white; }
        
        /* Example boxes */
        .example-box {
            background: #f8f4e8;
            border-left: 4px solid var(--saffron);
            padding: 1rem;
            margin: 1rem 0;
            border-radius: 0 10px 10px 0;
        }
        
        /* Example boxes - Isan Clay & Bamboo */
        .example-box {
            background: linear-gradient(135deg, var(--frangipani) 0%, var(--coconut-white) 100%);
            border-left: 5px solid var(--monk-saffron);
            padding: 1.5rem;
            margin: 1.5rem 0;
            border-radius: 0 15px 15px 0;
            box-shadow: 0 3px 15px rgba(0,0,0,0.08);
            position: relative;
            overflow: hidden;
        }
        
        .example-box::before {
            content: '🌾';
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 2.5rem;
            opacity: 0.1;
        }
        
        .example-box .thai-text {
            font-size: 1.6rem;
            margin-bottom: 0.5rem;
            color: var(--deep-purple);
            font-weight: 600;
        }
        
        /* Footer - Royal Thai with Isan Earth */
        footer {
            background: linear-gradient(135deg, var(--deep-purple) 0%, var(--royal-burgundy) 50%, var(--isan-clay) 100%);
            color: var(--silk-cream);
            text-align: center;
            padding: 3rem 2rem;
            margin-top: 4rem;
            border-top: 3px solid var(--royal-gold);
            box-shadow: 
                inset 0 1px 0 rgba(212, 175, 55, 0.3),
                0 -5px 20px rgba(0,0,0,0.1);
            position: relative;
        }
        
        footer::before {
            content: '🌴 🦚 🐘 🌺 🦎 🌿';
            display: block;
            margin-bottom: 1.5rem;
            font-size: 1.8rem;
            opacity: 0.6;
            letter-spacing: 1.5rem;
        }
        
        footer a {
            color: var(--gold-shimmer);
            text-decoration: none;
            border-bottom: 1px dotted var(--royal-gold);
            transition: all 0.3s ease;
        }
        
        footer a:hover {
            color: var(--royal-gold);
            border-bottom: 2px solid var(--royal-gold);
        }

        .footer-locked-link {
            position: relative;
            display: inline-block;
            color: var(--gold-shimmer);
            border-bottom: 1px dotted rgba(212, 175, 55, 0.5);
            cursor: not-allowed;
            opacity: 0.65;
        }

        .footer-locked-link .footer-tooltip {
            visibility: hidden;
            opacity: 0;
            position: absolute;
            bottom: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            background: rgba(20, 0, 40, 0.92);
            color: var(--silk-cream);
            border: 1px solid rgba(212, 175, 55, 0.4);
            padding: 0.35rem 0.7rem;
            border-radius: 6px;
            /* Wrap + cap width to the viewport so the (hidden) tooltip never
               pokes past the screen edge and creates a sideways scroll. */
            white-space: normal;
            width: max-content;
            max-width: min(260px, 88vw);
            font-size: 0.78rem;
            pointer-events: none;
            transition: opacity 0.2s ease;
            z-index: 10;
        }

        .footer-locked-link .footer-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 5px solid transparent;
            border-top-color: rgba(20, 0, 40, 0.92);
        }

        .footer-locked-link:hover .footer-tooltip {
            visibility: visible;
            opacity: 1;
        }
        
        /* Decorative lotus - Enhanced with tropical flair */
        .lotus-divider {
            text-align: center;
            font-size: 2.5rem;
            margin: 3rem 0;
            color: var(--lotus-pink);
            position: relative;
            padding: 1rem 0;
        }
        
        .lotus-divider::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--lotus-pink), transparent);
            transform: translateY(-50%);
            z-index: -1;
        }
        
        .lotus-divider::after {
            content: '🌸 🪷 🌸';
            display: block;
            background: linear-gradient(135deg, var(--silk-cream) 0%, var(--frangipani) 100%);
            padding: 0.5rem 2rem;
            display: inline-block;
            border-radius: 50px;
            box-shadow: 0 3px 10px rgba(231, 84, 128, 0.3);
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            nav .nav-container {
                flex-direction: column;
            }

            nav ul {
                justify-content: center;
            }

            /* h1/h2/h3 sizes are handled fluidly by clamp() above — no fixed
               overrides here, so there are no size "jumps" at the breakpoint. */
            h1 .thai {
                font-size: 1.4rem;
            }

            main {
                padding: 1.5rem;
            }
            
            main::before {
                font-size: 0.7rem;
                letter-spacing: 0.3rem;
            }
            
            .card {
                padding: 1.5rem;
            }
            
            body::after {
                font-size: 1.2rem;
                letter-spacing: 1.5rem;
            }
        }
        
        /* Toggle switch for beginner mode */
        .toggle-container {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin: 1rem 0;
        }
        
        .toggle {
            position: relative;
            width: 60px;
            height: 30px;
        }
        
        .toggle input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #ccc;
            transition: 0.4s;
            border-radius: 30px;
        }
        
        .slider:before {
            position: absolute;
            content: "";
            height: 22px;
            width: 22px;
            left: 4px;
            bottom: 4px;
            background: white;
            transition: 0.4s;
            border-radius: 50%;
        }
        
        input:checked + .slider {
            background: var(--bodhi-green);
        }
        
        input:checked + .slider:before {
            transform: translateX(30px);
        }
        
        /* Gender Selector */
        .gender-selector {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: rgba(255,255,255,0.1);
            padding: 0.5rem 1rem;
            border-radius: 25px;
            font-size: 0.9rem;
        }
        
        .gender-selector label {
            color: var(--gold);
            font-weight: 600;
            margin-right: 0.5rem;
        }
        
        .gender-btn {
            background: transparent;
            border: 2px solid var(--cream);
            color: var(--cream);
            padding: 0.4rem 0.8rem;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.85rem;
            font-weight: 600;
        }
        
        .gender-btn:hover {
            background: rgba(255,255,255,0.2);
            transform: translateY(-2px);
        }
        
        .gender-btn.active {
            background: var(--gold);
            color: var(--royal-purple);
            border-color: var(--gold);
        }
        
        .gender-indicator {
            font-size: 1.2rem;
        }
        
        /* ============================================
           FIX: Remove Dark Purple Border on Dropdown Hover
           ============================================ */
        
        /* Remove border from dropdown toggle buttons */
        .dropdown-toggle {
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
        }
        
        /* Remove border on hover state */
        .dropdown-toggle:hover,
        .dropdown-toggle:focus,
        .dropdown-toggle:active {
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
        }
        
        /* Remove any borders from dropdown content containers */
        .dropdown-content {
            border: none !important;
            outline: none !important;
        }
        
        /* Remove borders from dropdown menu items */
        .dropdown-content a {
            border: none !important;
            outline: none !important;
        }
        
        /* Remove borders on dropdown item hover */
        .dropdown-content a:hover,
        .dropdown-content a:focus {
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
        }
        
        /* Remove purple border from logo and navigation links (Home button, etc.) */
        nav .logo:hover,
        nav a:hover {
            border: none !important;
        }
        
        /* Keep the gold background and other hover effects, just remove border */
        nav a:hover {
            background: linear-gradient(135deg, var(--royal-gold) 0%, var(--antique-gold) 100%);
            color: var(--deep-purple);
            box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
            transform: translateY(-3px) translateZ(0);
            text-shadow: 0 0 5px rgba(212, 175, 55, 0.4);
        }
        
        /* Remove black box trim that appears when leaving hover state */
        nav .logo,
        nav a {
            border: none !important;
            outline: none !important;
        }
        
        /* Ensure no borders in any state - default, hover, focus, active */
        nav .logo:hover,
        nav .logo:focus,
        nav .logo:active,
        nav a:hover,
        nav a:focus,
        nav a:active {
            border: none !important;
            outline: none !important;
        }

/* ============================================
   WIREFRAME LAYOUT (sidebar | main | right column)
   The .layout wrapper is a plain block by default, so a page that provides
   no sidebar/right column keeps <main>'s original centered max-width and
   looks unchanged. It only becomes a multi-column grid when a page fills
   the optional .layout-sidebar / .layout-rightcol regions.
   ============================================ */
.layout:has(.layout-sidebar):has(.layout-rightcol) {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 280px;
    gap: 1.5rem;
    max-width: 1600px;
    margin: 0 auto;
    align-items: start;
}
.layout:has(.layout-sidebar):not(:has(.layout-rightcol)) {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 1.5rem;
    max-width: 1500px;
    margin: 0 auto;
    align-items: start;
}
.layout:not(:has(.layout-sidebar)):has(.layout-rightcol) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 1.5rem;
    max-width: 1500px;
    margin: 0 auto;
    align-items: start;
}
/* Inside the grid, main fills its cell instead of self-centering at 1200px.
   min-width:0 lets the column shrink so wide children scroll/wrap rather than
   forcing the whole layout wider. */
.layout:has(.layout-sidebar) > main,
.layout:has(.layout-rightcol) > main {
    max-width: none;
    margin: 0;
    width: auto;
    min-width: 0;
}
/* Wide tables sit in a horizontal-scroll wrapper (added by base.js): the table
   keeps width:100% so it FILLS the column when there's room and adjusts as you
   zoom, and the wrapper scrolls sideways only when the content is genuinely
   wider than the column — no clipping, no dead space. */
.table-scroll { overflow-x: auto; }
/* Medium screens (laptops): three columns get cramped. Drop the right column
   to a full-width strip below main — its cards flow in a row — so the main
   reading area gets the width it needs. */
@media (max-width: 1200px) {
    .layout:has(.layout-sidebar):has(.layout-rightcol) {
        grid-template-columns: 210px minmax(0, 1fr);
    }
    .layout:has(.layout-sidebar):has(.layout-rightcol) > .layout-rightcol {
        grid-column: 1 / -1;
    }
    .layout:has(.layout-rightcol) > .layout-rightcol {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .layout-rightcol .card { flex: 1 1 220px; }
}
/* Stack to a single column on narrow screens.
   IMPORTANT: these selectors must MATCH the specificity of the desktop
   multi-column rules above (each uses three .layout/:has() classes). A media
   query adds no specificity of its own, so the lower-specificity selectors
   `.layout:has(.layout-sidebar)` (2 classes) could NOT override the
   3-class desktop rules — the grid stayed multi-column on phones. Listing the
   same three full selectors here gives equal specificity, and because these
   come later in the file they win. This is what makes pages stack on mobile. */
@media (max-width: 900px) {
    .layout:has(.layout-sidebar):has(.layout-rightcol),
    .layout:has(.layout-sidebar):not(:has(.layout-rightcol)),
    .layout:not(:has(.layout-sidebar)):has(.layout-rightcol) {
        grid-template-columns: 1fr;
    }
    .layout:has(.layout-sidebar):has(.layout-rightcol) > .layout-rightcol {
        grid-column: auto;
    }

    /* CONTENT FIRST ON A PHONE.

       Stacking in source order put the sidebar above <main>, and the Learn
       sidebar is 644px of links. On a 390px-wide iPhone that pushed the page's
       own heading 1.4 screens down and the first piece of real content 2.6
       screens down — so opening a Learn page showed nothing but a column of
       navigation. It reads exactly like a page that failed to load, and it is
       what made the Alphabet page look broken on mobile through three separate
       rebuilds of a page that was never the problem.

       `order` only affects the visual order of grid items; the DOM keeps
       nav-before-content, which is the conventional document order and what a
       screen reader will still follow. */
    .layout > main { order: -1; }
    .layout-sidebar { order: 1; }
    .layout-rightcol { order: 2; }
}
/* ============================================
   WIREFRAME COMPONENTS — sidebar nav + right column
   Shared, reusable pieces used by any page that fills
   {% block sidebar %} / {% block rightcol %}.
   ============================================ */
.layout-sidebar {
    position: sticky;
    top: 90px;
    align-self: start;
}
.sidebar-title {
    color: var(--royal-purple);
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 0.25rem; }
/* The sidebar is a <nav>, so it also picks up the top bar's plain `nav` rule:
   the dark purple background, sticky position, padding and gold border. That
   left dark purple links on a dark purple panel. Undo all of it here. */
.layout-sidebar nav.sidebar-nav {
    background: none;
    padding: 0;
    box-shadow: none;
    border: 0;
    position: static;
    z-index: auto;
}
/* Same for the links: drop the top bar's dark text shadow and hover lift. */
.layout-sidebar .sidebar-nav a {
    text-shadow: none;
    letter-spacing: normal;
    transform: none;
}
.layout-sidebar .sidebar-nav a:hover {
    border: 0;
    border-left: 3px solid transparent;
    box-shadow: none;
    transform: none;
}
.layout-sidebar .sidebar-nav a.active:hover { border-left-color: var(--royal-gold); }
.sidebar-nav a {
    display: block;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    color: var(--deep-purple);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.2s, border-color 0.2s;
}
.sidebar-nav a:hover { background: rgba(74, 26, 107, 0.07); }
.sidebar-nav a.active {
    background: rgba(212, 175, 55, 0.15);
    border-left-color: var(--royal-gold);
    font-weight: 600;
}
.layout-rightcol { display: flex; flex-direction: column; gap: 1rem; }
.layout-rightcol .card { margin: 0; }
.rightcol-visual { font-size: 3.5rem; line-height: 1; padding: 0.5rem 0 1rem; }
@media (max-width: 900px) {
    .layout-sidebar { position: static; }
}

/* ============================================
   PHASE 1 — GLOBAL MOBILE HARDENING  (added 2026-06-10)
   One stylesheet, every device. These rules stop page
   content from spilling off the side of a phone screen and
   make wide tables scroll cleanly instead of squashing text
   into one-word-per-line strips.
   ============================================ */

/* 1. Media can never be wider than its column — the single
      most common cause of a page drifting sideways on mobile. */
img, svg, video, iframe, canvas {
    max-width: 100%;
    height: auto;
}

/* 2. Long unbroken words / URLs wrap instead of forcing the
      whole page wider than the screen. */
body {
    overflow-wrap: break-word;
    word-wrap: break-word;
    /* Hidden hover-tooltips (footer "locked" tooltip, chat mode tooltips) are
       absolutely positioned and can poke a few px past the screen edge,
       creating an unwanted sideways scroll. Clip that horizontal sliver at the
       page level. overflow-x on <body> (not a height-constrained ancestor)
       does not break the sticky nav — verified across all device widths. */
    overflow-x: hidden;
}

/* 3. Wide tables scroll sideways with a readable minimum width
      rather than cramming columns into unreadable slivers.
      (base.js already wraps every <main> table in .table-scroll.) */
.table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
}
@media (max-width: 768px) {
    /* Keep columns legible; the reader swipes to see the rest. */
    .table-scroll table {
        min-width: 480px;
        margin: 1rem 0;
    }
    /* Trim the chunky desktop cell padding so more fits on screen. */
    .table-scroll th,
    .table-scroll td {
        padding: 0.85rem 0.9rem;
        font-size: 0.95rem;
    }
}

/* 4. On small phones, trim outer spacing and oversized headings
      so content isn't crushed into a thin central strip. */
@media (max-width: 480px) {
    main {
        padding: 1.1rem 1rem;
    }
    main::before {
        font-size: 0.6rem;
        letter-spacing: 0.2rem;
    }
    /* h1/h2 sizing left to the fluid clamp() rules above. */
    nav { padding: 0.85rem 1rem; }
}

/* ============================================
   MONK MODE — free, all-content-unlocked toggle
   for Buddhist monks & the Thai diaspora.
   Uses the saffron robe colour so it reads as
   a warm, welcoming gift rather than a paywall.
   ============================================ */
.monk-mode-toggle {
    font: inherit;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 2px solid var(--monk-saffron);
    background: transparent;
    color: var(--monk-saffron);
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.monk-mode-toggle:hover {
    background: rgba(255, 153, 51, 0.12);
}
.monk-mode-toggle.active {
    background: var(--monk-saffron);
    color: var(--dark-text);
    box-shadow: 0 0 0 3px rgba(255, 153, 51, 0.25);
}

/* "Free" on the progress dashboard while Monk Mode is on, in place of a plan
   name a monastic will never be charged for. */
.monk-free {
    color: var(--palm-green);
    font-weight: 700;
}

.monk-mode-banner {
    background: linear-gradient(90deg, var(--monk-saffron), var(--temple-orange));
    color: var(--dark-text);
    text-align: center;
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    line-height: 1.5;
}
.monk-mode-banner strong { font-weight: 700; }

/* The /monk-mode access page */
.monk-card {
    border-left: 4px solid var(--monk-saffron);
    max-width: 640px;
}
.monk-card--active {
    background: rgba(255, 153, 51, 0.08);
}
.monk-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 1.25rem 0;
    max-width: 380px;
}
.monk-form label {
    font-weight: 600;
}
.monk-form input {
    font: inherit;
    padding: 0.6rem 0.8rem;
    border: 2px solid var(--sandstone);
    border-radius: 0.5rem;
}
.monk-form input:focus {
    outline: none;
    border-color: var(--monk-saffron);
    box-shadow: 0 0 0 3px rgba(255, 153, 51, 0.2);
}
.monk-form .monk-mode-toggle {
    align-self: flex-start;
}
.monk-error {
    color: var(--temple-red);
    font-weight: 600;
}
.monk-note {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Monk lessons — direction switch */
.monk-direction-switch {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.monk-dir-btn {
    font: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 1rem;
    border-radius: 0.6rem;
    border: 2px solid var(--monk-saffron);
    background: transparent;
    color: inherit;
    font-weight: 600;
}
.monk-dir-btn .monk-dir-sub {
    font-weight: 400;
    font-size: 0.78rem;
    opacity: 0.75;
}
.monk-dir-btn.active {
    background: var(--monk-saffron);
    color: var(--dark-text);
}
.monk-dir-btn.active .monk-dir-sub { opacity: 0.9; }

/* Monk lessons — English accent switch (British / American).
   Deliberately lighter than the direction switch above it: direction changes
   which language you are learning, accent only changes how one side is shown,
   so it should read as the smaller of the two choices. */
.monk-accent-switch {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
}
.monk-accent-label {
    font-size: 0.8rem;
    opacity: 0.75;
    margin-right: 0.15rem;
}
.monk-accent-btn {
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--monk-saffron);
    background: transparent;
    color: inherit;
}
.monk-accent-btn.active {
    background: var(--monk-saffron);
    color: var(--dark-text);
    font-weight: 600;
}
/* Marks a play button that is about to sound British audio to a learner who
   asked for American, because that US file has not been generated yet. */
.monk-audio-fallback {
    font-size: 0.7rem;
    opacity: 0.6;
    margin-left: 0.15rem;
    cursor: help;
}

/* Monk lessons — topic grid */
.monk-topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}
.monk-topic-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--sandstone);
    border-left: 4px solid var(--monk-saffron);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.monk-topic-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}
.monk-topic-num {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--saffron-text);
}
.monk-topic-title { font-size: 1.1rem; font-weight: 700; }
.monk-topic-sub { opacity: 0.75; }
.monk-topic-pali { font-style: italic; opacity: 0.7; font-size: 0.85rem; }
.monk-topic-count { font-size: 0.8rem; opacity: 0.6; margin-top: 0.25rem; }

/* Monk lessons — entry cards */
.monk-back { text-decoration: none; opacity: 0.8; }
.monk-entry-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.85rem;
    margin: 1rem 0 2rem;
}
.monk-entry {
    padding: 0.9rem 1rem;
    border-radius: 0.7rem;
    border: 1px solid var(--sandstone);
    background: rgba(255, 153, 51, 0.04);
}
.monk-entry-prompt { font-size: 1.15rem; font-weight: 700; }
.monk-entry-prompt .thai { font-size: 1.5rem; }
.monk-entry-target { margin-top: 0.35rem; }
.monk-entry-target .thai { font-size: 1.4rem; font-weight: 600; }
.monk-entry-word { font-size: 1.15rem; }
.monk-entry-pron {
    display: block;
    font-family: "Roboto Mono", monospace;
    font-size: 0.9rem;
    color: #1565c0;
}
/* Must come after the display:block above, or it loses to it and the browser's
   own [hidden] rule never gets a look in. */
.monk-entry-pron[hidden] { display: none; }
.monk-entry-meta {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.82rem;
}
.monk-entry-pali { font-style: italic; opacity: 0.8; }
.monk-entry-note { opacity: 0.7; }

/* ── English pronunciation (direction = learn_english) ────────────────────
   Read the respelling, then the Thai instruction. IPA sits below both and only
   appears when the learner asks for it. (Audio to follow later — it is meant to
   be the real anchor, with the respelling as the memory aid.) */
.monk-entry-respell {
    display: block;
    font-family: "Roboto Mono", monospace;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #1565c0;
}
.monk-entry-tip {
    margin: 0.45rem 0 0;
    padding: 0.4rem 0.6rem;
    border-left: 3px solid var(--mekong-blue);
    background: rgba(0, 0, 0, 0.03);
    font-size: 0.9rem;
    line-height: 1.6;
    opacity: 0.9;
}
/* The play button sits inline next to the English word, so it reads as part of
   the word rather than as a separate control to hunt for. */
.monk-audio-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    padding: 0.15rem 0.3rem;
    border-radius: 6px;
    /* Comfortably tappable on a phone without making the row taller. */
    min-width: 2rem;
    min-height: 2rem;
    transition: background 0.15s ease, transform 0.15s ease;
}
.monk-audio-btn:hover { background: var(--bamboo-beige); }
.monk-audio-btn:focus-visible { outline: 2px solid var(--monk-saffron); }
.monk-audio-btn.is-playing {
    background: var(--monk-saffron);
    transform: scale(1.1);
}

.monk-ipa-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    cursor: pointer;
}
.monk-ipa-toggle-sub { opacity: 0.6; font-size: 0.8rem; }

.monk-pron-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

/* Tables scroll inside their own box so the page never scrolls sideways on a
   phone, which is how most of these learners will read it. */
.monk-pron-table-wrap { overflow-x: auto; margin-bottom: 1.5rem; }
.monk-pron-table {
    width: 100%;
    min-width: 340px;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.monk-pron-table th,
.monk-pron-table td {
    text-align: left;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    vertical-align: top;
}
.monk-pron-table th {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
}
.monk-pron-table code {
    font-family: "Roboto Mono", monospace;
    font-weight: 600;
    color: #1565c0;
}
.monk-pron-table td.thai { line-height: 1.7; }

/* ── Drill sections & reading passages (lessons 11–12) ──────────────────── */
.monk-drill-subtitle {
    display: block;
    font-size: 0.85rem;
    font-weight: 400;
    opacity: 0.7;
}
.monk-passage h3 { margin-bottom: 0.25rem; }
.monk-passage-title-th {
    display: block;
    font-size: 0.95rem;
    font-weight: 400;
    opacity: 0.75;
}
/* Long-form reading wants book-like line spacing, not list-item spacing. */
.monk-passage-text { line-height: 1.8; margin: 0.75rem 0; }
.monk-passage-source {
    font-style: italic;
    font-size: 0.85rem;
    opacity: 0.7;
    margin-top: 0.75rem;
}
/* The passage play button carries a text label, so it reads as a button. */
.monk-passage-audio {
    border: 1px solid var(--monk-saffron);
    font-size: 0.95rem;
    padding: 0.4rem 0.8rem;
}
.monk-pron-warn { border-left: 4px solid #c9772f; }

/* ── Word choices & reading guide (lesson 12) ───────────────────────────── */
.monk-wordchoice h3 {
    margin-bottom: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
}
.monk-wordchoice-pali {
    font-size: 0.82rem;
    font-weight: 400;
    font-style: italic;
    opacity: 0.7;
}

/* Numbered so a teacher can say "point 3" out loud in class. */
.monk-reading-tips {
    margin: 0.75rem 0 0;
    padding-left: 1.3rem;
}
.monk-reading-tips li { margin-bottom: 0.7rem; }
/* Thai carries the real instruction here, so it gets the normal size and the
   English sits above it as the short heading version. */
.monk-reading-tip-en {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
}
.monk-reading-tip-th { display: block; line-height: 1.7; }

/* Thai leads, English follows as a quieter gloss — the reader here is Thai, and
   equal weight made the two languages run into each other. */
.monk-pron-guide .card p.thai { margin-bottom: 0.5rem; }
.monk-pron-guide .card p:not(.thai) {
    font-size: 0.88rem;
    opacity: 0.7;
    line-height: 1.55;
}
.monk-pron-howto {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Site-wide 🔊 audio button (paired with the .th-audio handler in base.js).
   Small, round, and unobtrusive so it can sit beside any Thai word without
   dominating it. Turns green while its clip is playing. */
.th-audio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0.3rem 0.55rem;
    border: 2px solid var(--bodhi-green);
    background: #fff;
    color: var(--bodhi-green);
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    vertical-align: middle;
}

.th-audio:hover { background: var(--frangipani); }
.th-audio.is-playing { background: var(--bodhi-green); color: #fff; }

.th-audio:focus-visible {
    outline: 3px solid var(--royal-gold);
    outline-offset: 2px;
}

/* ==========================================================================
   Reading Support (accessibility)
   ==========================================================================
   Three independent, learner-controlled toggles that make text easier to read
   for people who find reading harder (e.g. dyslexia), plus a read-aloud tool
   where the learner picks what gets spoken. Each toggle is switched on by an
   "rs-<name>" class added to the <html> element by base.js. The panel markup is
   in base.html's nav; the button reuses the site's .dropdown pattern.

   Design note: the easy-read font only replaces the LATIN text. Thai script and
   Paiboon romanization keep their own fonts (Thai needs Noto Serif Thai to
   render its stacked vowels/tones; romanization stays monospace via its own
   !important rule earlier in this file), so switching fonts never breaks them.
   ------------------------------------------------------------------------- */

/* --- The panel (dropdown contents) ---
   Taller than a normal dropdown so the "who this is for" note at the bottom is
   visible without scrolling; still capped so it can't run off a short screen. */
.reading-support-panel {
    min-width: 240px;
    padding: 0.5rem 0.4rem;
    max-height: min(85vh, 560px);
}
.reading-support-panel .rs-heading {
    margin: 0;
    padding: 0.2rem 0.6rem 0.45rem;
    font-weight: 700;
    color: var(--gold-shimmer);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.reading-support-panel .rs-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.6rem;
    border-radius: 0.4rem;
    cursor: pointer;
    white-space: nowrap;
    font: inherit;
    font-weight: 600;
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.reading-support-panel .rs-option:hover {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.4) 0%, rgba(212, 175, 55, 0.15) 100%);
    color: var(--gold-shimmer);
}
.reading-support-panel .rs-option input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--royal-gold);
    cursor: pointer;
    flex: none;
}
.reading-support-panel .rs-reset {
    display: block;
    width: calc(100% - 1.2rem);
    margin: 0.5rem 0.6rem 0.2rem;
    padding: 0.4rem 0.6rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: #FFFFFF;
    background: transparent;
    border: 1px solid var(--royal-gold);
    border-radius: 0.4rem;
    cursor: pointer;
}
.reading-support-panel .rs-reset:hover {
    background: rgba(212, 175, 55, 0.25);
    color: var(--gold-shimmer);
}
.reading-support-panel .rs-note {
    margin: 0;
    padding: 0.35rem 0.6rem 0.2rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
}

/* --- Effect 1: easy-to-read font ---
   Swap the decorative serif for Atkinson Hyperlegible (designed for maximum
   legibility). Thai glyphs fall through to Noto Serif Thai automatically. No
   !important, so the earlier monospace romanization rule still wins. Noto Sans
   comes second for the same reason as on body: Atkinson cannot draw ǎ ǐ ǔ and
   split them into a letter plus a floating caron. */
html.rs-font body,
html.rs-font h1, html.rs-font h2, html.rs-font h3,
html.rs-font h4, html.rs-font h5, html.rs-font h6 {
    font-family: 'Atkinson Hyperlegible', 'Noto Sans', 'Noto Serif Thai', Georgia, sans-serif;
}

/* --- Effect 2: bigger text ---
   Scale the root font size up. Everything sized in rem/em grows with it. */
html.rs-large {
    font-size: 115%;
}

/* --- Effect 3: extra spacing ---
   Loosen line height and word/letter spacing — the best-evidenced change for
   dyslexic readers. Kept gentle so Thai's stacked marks stay attached. */
html.rs-spacing body {
    line-height: 1.9;
    letter-spacing: 0.05em;
    word-spacing: 0.16em;
}
html.rs-spacing p,
html.rs-spacing li {
    margin-bottom: 0.8em;
}

/* --- Read aloud (inside the panel) ---
   A chooser ("what should I read?") sits above the button so the learner
   decides what gets spoken before starting. */
.reading-support-panel .rs-read-group {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(212, 175, 55, 0.3);
}
.reading-support-panel .rs-read-label {
    display: block;
    padding: 0 0.6rem 0.3rem;
    max-width: 15rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    color: rgba(255, 255, 255, 0.9);
}
.reading-support-panel .rs-read-scope {
    display: block;
    width: calc(100% - 1.2rem);
    margin: 0 0.6rem;
    padding: 0.35rem 0.4rem;
    font: inherit;
    font-size: 0.85rem;
    color: #FFFFFF;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--royal-gold);
    border-radius: 0.4rem;
    cursor: pointer;
}
/* Native dropdown lists render on the OS layer, so force readable colours. */
.reading-support-panel .rs-read-scope option {
    color: #1a1a1a;
    background: #FFFFFF;
}
.reading-support-panel .rs-read {
    display: block;
    width: calc(100% - 1.2rem);
    margin: 0.4rem 0.6rem 0;
    padding: 0.45rem 0.6rem;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--royal-purple);
    border: none;
    border-radius: 0.4rem;
    cursor: pointer;
}
.reading-support-panel .rs-read:hover {
    background: var(--deep-purple);
}
.reading-support-panel .rs-read.is-speaking {
    background: var(--temple-red);
}
.reading-support-panel .rs-read-hint {
    margin: 0;
    padding: 0.3rem 0.6rem 0;
    max-width: 15rem;
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: normal;
    color: rgba(255, 255, 255, 0.75);
}

/* --- "Pick a part to read" mode ---
   While the learner is choosing, every readable block highlights on hover so
   it is obvious what will be spoken when they click. */
html.rs-picking main p:hover,
html.rs-picking main li:hover,
html.rs-picking main h1:hover,
html.rs-picking main h2:hover,
html.rs-picking main h3:hover,
html.rs-picking main h4:hover,
html.rs-picking main h5:hover,
html.rs-picking main h6:hover,
html.rs-picking main blockquote:hover,
html.rs-picking main td:hover,
html.rs-picking main th:hover,
html.rs-picking main dd:hover,
html.rs-picking main dt:hover,
html.rs-picking main figcaption:hover {
    outline: 2px dashed var(--royal-gold);
    outline-offset: 2px;
    background: rgba(212, 175, 55, 0.15);
    cursor: pointer;
}
/* ── VAT label under a price ────────────────────────────────────────────────
   Shown wherever a product price appears (plans, add-on, subscription
   success). Quiet, but it has to be legible: the advertised figure must be
   the total payable, so the page says so rather than leaving it to checkout. */
.price-tax {
    display: block;
    color: #666;
    font-size: 0.78rem;
    margin-top: 0.15rem;
    letter-spacing: 0.01em;
}

/* ---- Site search strip (under the top menu, every page) ----
   A cream band in the site's gold, so it reads as part of the header without
   competing with the purple menu. Wraps to two lines on a narrow phone rather
   than shrinking the box until it can't be typed in. */
.site-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem max(2rem, calc((100% - 1400px) / 2));  /* box lines up with the menu above */
    background: #FFF8E7;
    border-bottom: 1px solid var(--royal-gold);
}
.site-search-icon { font-size: 1.1rem; }
.site-search input[type="search"] {
    flex: 1;
    min-width: 0;
    padding: 0.55rem 0.8rem;
    font-size: 1rem;              /* 16px stops iOS zooming in on focus */
    border: 2px solid #e2d3a8;
    border-radius: 8px;
    background: #fff;
    color: var(--dark-text);
}
.site-search input[type="search"]:focus {
    outline: 3px solid var(--royal-purple);
    outline-offset: 1px;
    border-color: var(--royal-purple);
}
.site-search button {
    padding: 0.55rem 1.1rem;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    background: var(--royal-purple);
    color: #fff;
    cursor: pointer;
}
.site-search button:hover, .site-search button:focus-visible { background: var(--deep-purple); }
@media (max-width: 768px) {
    .site-search { padding: 0.5rem 1rem; }
}

/* For labels a screen reader needs but a sighted reader doesn't. */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}