/**
 * gCube Built CSS — DO NOT EDIT
 *
 * Auto-generated by scripts/build-css.sh
 * Edit the source files in assets/css/ and rebuild.
 *
 * Contains (in order):
 *   1. Parent: fonts.css (@font-face declarations)
 *   2. Parent: golden-typography.css (type scale, spacing, utilities)
 *   3. Child:  variables.css (cube CSS custom properties)
 *   4. Child:  animations.css (@keyframes)
 *   5. Child:  cube-structure.css (3D transforms)
 *   6. Child:  cube-surfaces.css (dual-surface pseudo-elements)
 *   7. Child:  face-content.css (content layout, scrolling)
 *   8. Child:  face-expansion.css (fullscreen reading mode)
 *   9. Child:  navigation.css (nav buttons)
 *  10. Child:  typography.css (cube text styles)
 *  11. Child:  content-types.css (posts, glass mode)
 *  12. Child:  responsive.css (media queries)
 */

/* === fonts.css (parent: @font-face declarations) === */
/**
 * Self-hosted Google Fonts - gTesseract
 *
 * Eliminates 5-8 external requests to fonts.googleapis.com/fonts.gstatic.com
 * Uses font-display: swap for optimal LCP (Largest Contentful Paint)
 *
 * Fonts included:
 * - Ubuntu: 300, 400, 700 (body/heading)
 * - Rubik: 300, 400, 500, 700 (buttons/extra)
 */

/* Ubuntu Light (300) */
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/ubuntu-300.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Ubuntu Regular (400) */
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ubuntu-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Ubuntu Bold (700) */
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/ubuntu-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Rubik Light (300) */
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/rubik-300.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Rubik Regular (400) */
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/rubik-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Rubik Medium (500) */
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/rubik-500.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Rubik Bold (700) */
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/rubik-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === golden-typography.css (parent: type scale + utilities) === */
/**
 * Golden Typography System
 * Mathematical elegance for maximum visual impact
 *
 * Based on:
 * - Golden Ratio (φ): 1.618033988749895
 * - Fibonacci Sequence: 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89...
 * - Golden Angle: 137.5077640500378°
 *
 * "Communication is 80% non-verbal" - Let the ratios speak.
 *
 * @package gTesseract
 * @version 1.0.0
 */

/* ==========================================================================
   GOLDEN CONSTANTS & MODULAR SCALE
   ========================================================================== */

:root {
    /* === GOLDEN MATHEMATICAL CONSTANTS === */
    --phi: 1.618033988749895;
    --phi-squared: 2.618033988749895;
    --phi-cubed: 4.23606797749979;
    --phi-inverse: 0.618033988749895;
    --phi-sqrt: 1.272019649514069;
    --golden-angle: 137.5077640500378deg;

    /* === GOLDEN MODULAR TYPE SCALE ===
     * Each step multiplies by φ (1.618) or its derivatives
     * Base: 1rem = 16px (browser default)
     *
     * Scale visualization:
     * ────────────────────────────────────────────────
     * 6xl │████████████████████████████████│ 6.854rem (φ⁴)
     * 5xl │██████████████████████████│      5.236rem
     * 4xl │████████████████████│            4.236rem (φ³)
     * 3xl │████████████████│                3.236rem
     * 2xl │██████████████│                  2.618rem (φ²)
     * xl  │██████████│                      1.618rem (φ)
     * lg  │████████│                        1.272rem (√φ)
     * base│██████│                          1.000rem
     * sm  │████│                            0.786rem (1/√φ)
     * xs  │███│                             0.618rem (1/φ)
     * 2xs │██│                              0.486rem
     * ────────────────────────────────────────────────
     */

    --text-2xs: 0.486rem;     /* φ^-1.5 = ~7.8px - micro labels */
    --text-xs: 0.618rem;      /* 1/φ = ~9.9px - captions, footnotes */
    --text-sm: 0.786rem;      /* 1/√φ = ~12.6px - small text */
    --text-base: 1rem;        /* base = 16px - body copy */
    --text-lg: 1.272rem;      /* √φ = ~20.4px - lead paragraphs */
    --text-xl: 1.618rem;      /* φ = ~25.9px - section titles */
    --text-2xl: 2.058rem;     /* φ^1.5 = ~32.9px - subsections */
    --text-3xl: 2.618rem;     /* φ² = ~41.9px - page titles */
    --text-4xl: 4.236rem;     /* φ³ = ~67.8px - hero headlines */
    --text-5xl: 5.236rem;     /* φ³×1.236 = ~83.8px - display */
    --text-6xl: 6.854rem;     /* φ⁴ = ~109.7px - massive display */

    /* === GOLDEN LINE HEIGHTS ===
     * Vertical rhythm based on φ
     * Tighter for headings (less text per line)
     * Looser for body (more text per line)
     */
    --leading-none: 1;
    --leading-tight: 1.1;           /* Display headings */
    --leading-snug: 1.272;          /* √φ - headings */
    --leading-normal: 1.618;        /* φ - body text (THE golden ratio) */
    --leading-relaxed: 1.854;       /* φ×1.146 - spacious body */
    --leading-loose: 2.058;         /* φ^1.5 - very open text */

    /* === FIBONACCI SPACING SCALE ===
     * 8px base unit, Fibonacci multipliers
     * Creates naturally pleasing visual rhythm
     *
     * Fibonacci: 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144...
     */
    --space-0: 0;
    --space-1: 0.0625rem;     /* 1px */
    --space-2: 0.125rem;      /* 2px */
    --space-3: 0.1875rem;     /* 3px */
    --space-5: 0.3125rem;     /* 5px */
    --space-8: 0.5rem;        /* 8px - BASE UNIT */
    --space-13: 0.8125rem;    /* 13px */
    --space-21: 1.3125rem;    /* 21px */
    --space-34: 2.125rem;     /* 34px */
    --space-55: 3.4375rem;    /* 55px */
    --space-89: 5.5625rem;    /* 89px */
    --space-144: 9rem;        /* 144px */

    /* === GOLDEN MEASURE (Line Length) ===
     * Optimal reading: 45-75 characters
     * Golden sweet spot: ~66 characters
     * Based on research + golden ratio aesthetics
     */
    --measure-narrow: 45ch;   /* Tight columns, captions */
    --measure-medium: 55ch;   /* Comfortable reading */
    --measure-golden: 66ch;   /* THE optimal line length */
    --measure-wide: 75ch;     /* Maximum comfortable */

    /* === GOLDEN LETTER SPACING ===
     * Tracking adjustments for different sizes
     * Larger text needs tighter tracking
     * Smaller text needs looser tracking
     */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;

    /* === GOLDEN FONT WEIGHTS ===
     * Strategic weight usage for hierarchy
     */
    --weight-light: 300;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* === GOLDEN PARAGRAPH RHYTHM ===
     * Vertical spacing between text blocks
     */
    --paragraph-spacing: var(--space-21);      /* 21px between paragraphs */
    --section-spacing: var(--space-55);        /* 55px between sections */
    --block-spacing: var(--space-34);          /* 34px between content blocks */
}

/* ==========================================================================
   RESPONSIVE GOLDEN SCALE
   Fluid typography that maintains golden proportions
   ========================================================================== */

@media (max-width: 480px) {
    :root {
        /* Scale down on mobile, maintain ratios */
        --text-base: 0.9375rem;   /* 15px base on mobile */
        --text-lg: 1.193rem;
        --text-xl: 1.518rem;
        --text-2xl: 1.929rem;
        --text-3xl: 2.454rem;
        --text-4xl: 3.971rem;

        /* Tighter spacing on mobile */
        --section-spacing: var(--space-34);
        --block-spacing: var(--space-21);
    }
}

@media (min-width: 1200px) {
    :root {
        /* Scale up on large screens */
        --text-base: 1.0625rem;   /* 17px base on large screens */
        --text-lg: 1.352rem;
        --text-xl: 1.72rem;
        --text-2xl: 2.187rem;
        --text-3xl: 2.782rem;
        --text-4xl: 4.501rem;
    }
}

/* ==========================================================================
   GOLDEN TYPOGRAPHY BASE STYLES
   ========================================================================== */

/* Body text - the foundation */
.golden-body,
.cell-body,
.face-body,
.post-content {
    font-size: var(--text-base);
    line-height: var(--leading-normal);  /* 1.618 - THE golden ratio */
    letter-spacing: var(--tracking-normal);
    font-weight: var(--weight-normal);
    max-width: var(--measure-golden);    /* 66ch optimal line length */
}

/* Headings - hierarchical scale */
.golden-h1,
h1.cell-title,
h1.face-title,
h1.post-title {
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-34);
}

.golden-h2,
h2 {
    font-size: var(--text-3xl);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    font-weight: var(--weight-semibold);
    margin-top: var(--space-55);
    margin-bottom: var(--space-21);
}

.golden-h3,
h3 {
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
    font-weight: var(--weight-semibold);
    margin-top: var(--space-34);
    margin-bottom: var(--space-13);
}

.golden-h4,
h4 {
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    font-weight: var(--weight-medium);
    margin-top: var(--space-21);
    margin-bottom: var(--space-8);
}

.golden-h5,
h5 {
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    font-weight: var(--weight-medium);
    margin-top: var(--space-21);
    margin-bottom: var(--space-8);
}

.golden-h6,
h6 {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-top: var(--space-13);
    margin-bottom: var(--space-8);
}

/* ==========================================================================
   GOLDEN PARAGRAPH & TEXT BLOCK STYLES
   ========================================================================== */

/* Paragraphs with golden spacing */
.golden-body p,
.cell-body p,
.face-body p,
.post-content p {
    margin-bottom: var(--paragraph-spacing);
    max-width: var(--measure-golden);
}

.golden-body p:last-child,
.cell-body p:last-child,
.face-body p:last-child,
.post-content p:last-child {
    margin-bottom: 0;
}

/* Lead paragraph - emphasized first paragraph */
.golden-lead,
.cell-body > p:first-of-type,
.post-content > p:first-of-type {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: inherit;
    opacity: 0.95;
}

/* Small text */
.golden-small,
small,
.text-small {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

/* Extra small / captions */
.golden-caption,
figcaption,
.caption {
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    opacity: 0.7;
}

/* ==========================================================================
   GOLDEN EMPHASIS & HIGHLIGHTS
   ========================================================================== */

/* Strong emphasis */
strong, b, .golden-bold {
    font-weight: var(--weight-bold);
}

/* Subtle emphasis */
em, i, .golden-italic {
    font-style: italic;
}

/* Highlighted text - uses golden proportions for padding */
mark, .golden-highlight {
    background: linear-gradient(
        104deg,
        rgba(255, 255, 0, 0) 0.9%,
        rgba(255, 255, 0, 0.3) 2.4%,
        rgba(255, 255, 0, 0.5) 5.8%,
        rgba(255, 255, 0, 0.4) 93%,
        rgba(255, 255, 0, 0.2) 96%,
        rgba(255, 255, 0, 0) 98%
    );
    padding: 0.1em 0.2em;
    border-radius: 0.1em;
}

/* ==========================================================================
   GOLDEN LISTS
   ========================================================================== */

.golden-body ul,
.golden-body ol,
.cell-body ul,
.cell-body ol,
.post-content ul,
.post-content ol {
    margin-bottom: var(--paragraph-spacing);
    padding-left: var(--space-21);
    max-width: var(--measure-golden);
}

.golden-body li,
.cell-body li,
.post-content li {
    margin-bottom: var(--space-8);
    line-height: var(--leading-normal);
}

.golden-body li:last-child,
.cell-body li:last-child,
.post-content li:last-child {
    margin-bottom: 0;
}

/* Nested lists */
.golden-body ul ul,
.golden-body ol ol,
.cell-body ul ul,
.cell-body ol ol {
    margin-top: var(--space-8);
    margin-bottom: 0;
}

/* ==========================================================================
   GOLDEN BLOCKQUOTES
   ========================================================================== */

blockquote,
.golden-quote {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    font-style: italic;
    margin: var(--space-34) 0;
    padding-left: var(--space-21);
    border-left: var(--space-3) solid currentColor;
    opacity: 0.9;
    max-width: var(--measure-medium);
}

blockquote cite,
.golden-quote cite {
    display: block;
    font-size: var(--text-sm);
    font-style: normal;
    margin-top: var(--space-13);
    opacity: 0.7;
}

blockquote cite::before {
    content: "— ";
}

/* ==========================================================================
   GOLDEN CODE & PREFORMATTED TEXT
   ========================================================================== */

code, kbd, samp {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.875em;  /* Slightly smaller than surrounding text */
    padding: 0.1em 0.3em;
    border-radius: 0.2em;
    background: rgba(128, 128, 128, 0.1);
}

pre {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    padding: var(--space-21);
    margin: var(--space-34) 0;
    overflow-x: auto;
    border-radius: var(--space-5);
    background: rgba(0, 0, 0, 0.05);
}

pre code {
    padding: 0;
    background: none;
}

/* ==========================================================================
   GOLDEN HORIZONTAL RULES
   ========================================================================== */

hr,
.golden-divider {
    border: none;
    height: 1px;
    background: currentColor;
    opacity: 0.2;
    margin: var(--space-55) 0;
}

/* Decorative divider with golden proportions */
.golden-divider-ornate {
    border: none;
    height: 0;
    margin: var(--space-55) auto;
    max-width: var(--measure-narrow);
    position: relative;
}

.golden-divider-ornate::before {
    content: "* * *";
    display: block;
    text-align: center;
    letter-spacing: var(--space-13);
    opacity: 0.4;
}

/* ==========================================================================
   GOLDEN LINKS
   ========================================================================== */

a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    transition: opacity 0.2s ease, text-decoration-color 0.2s ease;
}

a:hover {
    text-decoration-thickness: 2px;
}

/* ==========================================================================
   GOLDEN UTILITY CLASSES
   ========================================================================== */

/* Text sizes */
.text-2xs { font-size: var(--text-2xs); }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }
.text-6xl { font-size: var(--text-6xl); }

/* Line heights */
.leading-none { line-height: var(--leading-none); }
.leading-tight { line-height: var(--leading-tight); }
.leading-snug { line-height: var(--leading-snug); }
.leading-normal { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }
.leading-loose { line-height: var(--leading-loose); }

/* Letter spacing */
.tracking-tighter { letter-spacing: var(--tracking-tighter); }
.tracking-tight { letter-spacing: var(--tracking-tight); }
.tracking-normal { letter-spacing: var(--tracking-normal); }
.tracking-wide { letter-spacing: var(--tracking-wide); }
.tracking-wider { letter-spacing: var(--tracking-wider); }
.tracking-widest { letter-spacing: var(--tracking-widest); }

/* Font weights */
.font-light { font-weight: var(--weight-light); }
.font-normal { font-weight: var(--weight-normal); }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold { font-weight: var(--weight-bold); }

/* Measure (max-width) */
.measure-narrow { max-width: var(--measure-narrow); }
.measure-medium { max-width: var(--measure-medium); }
.measure-golden { max-width: var(--measure-golden); }
.measure-wide { max-width: var(--measure-wide); }

/* Fibonacci spacing - margins */
.m-0 { margin: var(--space-0); }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-5 { margin: var(--space-5); }
.m-8 { margin: var(--space-8); }
.m-13 { margin: var(--space-13); }
.m-21 { margin: var(--space-21); }
.m-34 { margin: var(--space-34); }
.m-55 { margin: var(--space-55); }
.m-89 { margin: var(--space-89); }

/* Fibonacci spacing - margin bottom (most common) */
.mb-0 { margin-bottom: var(--space-0); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-13 { margin-bottom: var(--space-13); }
.mb-21 { margin-bottom: var(--space-21); }
.mb-34 { margin-bottom: var(--space-34); }
.mb-55 { margin-bottom: var(--space-55); }
.mb-89 { margin-bottom: var(--space-89); }

/* Fibonacci spacing - margin top */
.mt-0 { margin-top: var(--space-0); }
.mt-8 { margin-top: var(--space-8); }
.mt-13 { margin-top: var(--space-13); }
.mt-21 { margin-top: var(--space-21); }
.mt-34 { margin-top: var(--space-34); }
.mt-55 { margin-top: var(--space-55); }
.mt-89 { margin-top: var(--space-89); }

/* Fibonacci spacing - padding */
.p-0 { padding: var(--space-0); }
.p-5 { padding: var(--space-5); }
.p-8 { padding: var(--space-8); }
.p-13 { padding: var(--space-13); }
.p-21 { padding: var(--space-21); }
.p-34 { padding: var(--space-34); }
.p-55 { padding: var(--space-55); }

/* Gap (for flexbox/grid) */
.gap-5 { gap: var(--space-5); }
.gap-8 { gap: var(--space-8); }
.gap-13 { gap: var(--space-13); }
.gap-21 { gap: var(--space-21); }
.gap-34 { gap: var(--space-34); }

/* ==========================================================================
   GOLDEN TEXT BALANCE (Optical Adjustments)
   ========================================================================== */

/* Prevent orphans and widows */
.text-balance {
    text-wrap: balance;
}

/* For headlines that should wrap nicely */
.text-pretty {
    text-wrap: pretty;
}

/* Hyphenation for justified text */
.text-hyphenate {
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 6 3 2;
}

/* ==========================================================================
   DARK MODE ADJUSTMENTS
   Golden ratios work in both modes, but we adjust contrast
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .golden-body,
    .cell-body,
    .face-body {
        /* Slightly increase line-height in dark mode for readability */
        line-height: calc(var(--leading-normal) * 1.02);
    }

    /* Reduce font-weight perception in dark mode */
    strong, b, .golden-bold {
        font-weight: var(--weight-semibold);
    }
}

/* ==========================================================================
   PRINT STYLES
   Optimized for paper using golden ratios
   ========================================================================== */

@media print {
    :root {
        --text-base: 11pt;
        --text-lg: 13pt;
        --text-xl: 16pt;
        --text-2xl: 20pt;
        --text-3xl: 26pt;
        --text-4xl: 32pt;

        --leading-normal: 1.5;  /* Slightly tighter for print */
        --measure-golden: 4.5in; /* Golden width for US Letter */
    }

    .golden-body,
    .cell-body,
    .face-body,
    .post-content {
        color: black;
        background: white;
    }
}

/* ==========================================================================
   ANIMATIONS USING GOLDEN RATIO
   ========================================================================== */

/* Golden fade in */
@keyframes golden-fade-in {
    from {
        opacity: 0;
        transform: translateY(calc(var(--space-13) * -1));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.golden-animate-in {
    animation: golden-fade-in 0.618s ease-out;
}

/* Staggered children animation using golden timing */
.golden-stagger > * {
    opacity: 0;
    animation: golden-fade-in 0.618s ease-out forwards;
}

.golden-stagger > *:nth-child(1) { animation-delay: 0s; }
.golden-stagger > *:nth-child(2) { animation-delay: 0.1s; }
.golden-stagger > *:nth-child(3) { animation-delay: 0.162s; }
.golden-stagger > *:nth-child(4) { animation-delay: 0.262s; }
.golden-stagger > *:nth-child(5) { animation-delay: 0.424s; }
.golden-stagger > *:nth-child(6) { animation-delay: 0.586s; }

/* === variables.css === */
/**
 * gCube CSS Custom Properties (Variables)
 *
 * All theme-wide CSS variables defined here.
 * These are default values - customizer-css.php overrides them dynamically.
 *
 * @package gCube
 * @version 2.0.0
 */

:root {
    /* ==========================================================================
       Cube Dimensions
       ========================================================================== */
    --default-cubeheight: 80vmin;
    --default-cubewidth: 80vmin;
    --default-margin: 1vmin;

    /* ==========================================================================
       Theme Colors
       ========================================================================== */
    --color-bg: #f7f5f2;
    --color-txt: #000000;
    --color-border: #F5F9E9;
    --color-highlight: #e51022;
    --color-hover: #c40e1d;
    --semi-transparant: rgba(255, 255, 255, 0.28);

    /* ==========================================================================
       Gradient Colors (spqe.eu defaults - customizer overrides)
       ========================================================================== */
    --gradcolor1: #ee7752;
    --gradcolor2: #e73c7e;
    --gradcolor3: #23a6d5;
    --gradcolor4: #23d5ab;

    /* ==========================================================================
       Interior Wall Colors (backside of faces - depth effect)
       ========================================================================== */
    --interior-wall-base: rgba(35, 35, 45, 0.92);
    --interior-wall-accent: rgba(55, 55, 65, 0.85);
    --interior-wall-one: var(--interior-wall-base);
    --interior-wall-two: var(--interior-wall-base);
    --interior-wall-three: var(--interior-wall-base);
    --interior-wall-four: var(--interior-wall-base);
    --interior-wall-five: var(--interior-wall-base);
    --interior-wall-six: var(--interior-wall-base);

    /* ==========================================================================
       Navigation Button Variables
       ========================================================================== */
    --nav-button-bg-color: #ffffff;
    --nav-button-text-color: #000000;
    --nav-button-hover-bg-color: #e50b37;
    --nav-button-hover-text-color: #d7a533;
    --nav-button-padding: 10px 20px;
    --nav-button-margin: 10px;
    --nav-button-font-size: 16px;
    --nav-button-border-style: solid;
    --nav-button-border-color: #000000;
    --nav-button-border-width: 1px;
    --nav-button-border-radius: 20%;
    --nav-button-min-width: 18vmin;
    --nav-button-max-height: 5vmin;
    --nav-wrapper-default-width: 15%;
    --nav-button-default-min-width: 10vmin;
    --nav-button-default-min-height: 7vmin;

    /* ==========================================================================
       Face Surface Variables (set per-face by customizer)
       These control the ::before (front) and ::after (back) pseudo-elements
       ========================================================================== */

    /* Default front surface - animated gradient */
    --face-front-bg: linear-gradient(270deg, var(--gradcolor1), var(--gradcolor2), var(--gradcolor3), var(--gradcolor4));
    --face-front-bg-size: 800% 800%;
    --face-front-animation: BGgrad 15s ease infinite;

    /* Default back surface - dark interior wall */
    --face-back-bg: var(--interior-wall-base);
    --face-back-bg-size: auto;
    --face-back-animation: none;

    /* ==========================================================================
       Scene & Perspective
       ========================================================================== */
    --scene-perspective: 200vmin;
    --scene-perspective-origin: 50% 50%;

    /* ==========================================================================
       Scrollbar Colors
       ========================================================================== */
    --scrollbar-thumb: rgba(0, 0, 0, 0.2);
    --scrollbar-track: rgba(0, 0, 0, 0.05);
}

/* === animations.css === */
/**
 * gCube Animations
 *
 * All @keyframes animations and transition presets.
 *
 * @package gCube
 * @version 2.0.0
 */

/* ==========================================================================
   Gradient Background Animation (spqe.eu style)
   ========================================================================== */

@keyframes BGgrad {
    0% {
        background-position: 99% 0%;
    }
    50% {
        background-position: 2% 100%;
    }
    100% {
        background-position: 99% 0%;
    }
}

@-webkit-keyframes BGgrad {
    0% {
        background-position: 99% 0%;
    }
    50% {
        background-position: 2% 100%;
    }
    100% {
        background-position: 99% 0%;
    }
}

/* ==========================================================================
   Conic Gradient Spin (hue rotation effect)
   ========================================================================== */

@keyframes BGspin {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

@-webkit-keyframes BGspin {
    0% {
        -webkit-filter: hue-rotate(0deg);
    }
    100% {
        -webkit-filter: hue-rotate(360deg);
    }
}

/* ==========================================================================
   Loading Spinner
   ========================================================================== */

@keyframes cube-loading-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   Navigation Button Groove Animation
   ========================================================================== */

@keyframes groovy {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

/* === cube-structure.css === */
/**
 * gCube 3D Structure
 *
 * Scene container, cube container, and face 3D transforms.
 * This file handles the geometric positioning of the cube in 3D space.
 *
 * @package gCube
 * @version 2.0.0
 */

/* ==========================================================================
   Base Reset
   ========================================================================== */

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--color-bg);
    font-family: 'Ubuntu', sans-serif;
}

/* ==========================================================================
   Scene Container - 3D Perspective Space
   ========================================================================== */

#scene {
    perspective: var(--scene-perspective, 200vmin);
    -webkit-perspective: var(--scene-perspective, 200vmin);
    perspective-origin: var(--scene-perspective-origin, 50% 50%);
    -webkit-perspective-origin: var(--scene-perspective-origin, 50% 50%);
    z-index: 1;

    /* Fixed viewport - no scrolling, cube stays in place */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    /* Center the cube vertically and horizontally */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Cube Container - 3D Transform Space
   ========================================================================== */

#cube {
    position: relative;
    height: var(--default-cubeheight);
    width: var(--default-cubewidth);
    border-radius: 2.3vmin;
    will-change: transform;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform 0.4s linear;
    -webkit-transition: -webkit-transform 0.4s linear;
}

/* ==========================================================================
   Cube Face Base Positioning
   ========================================================================== */

#cube > .face {
    position: absolute;
    top: 0;
    height: var(--default-cubeheight);
    width: var(--default-cubewidth);
    padding: 0;
    border-radius: var(--default-margin);
    overflow: hidden;

    /* Enable 3D children for pseudo-element surfaces */
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;

    /* Face container is transparent - surfaces render via ::before/::after */
    background: transparent;

    /* Prevent text selection (re-enabled in expanded mode) */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ==========================================================================
   Face 3D Transforms (Positioning in Space)
   ========================================================================== */

/* Top face */
#cube .one {
    transform: rotateX(90deg) translateZ(40vmin);
    -webkit-transform: rotateX(90deg) translateZ(40vmin);
}

/* Front face (default view) */
#cube .two {
    transform: translateZ(40vmin);
    -webkit-transform: translateZ(40vmin);
}

/* Right face */
#cube .three {
    transform: rotateY(90deg) translateZ(40vmin);
    -webkit-transform: rotateY(90deg) translateZ(40vmin);
}

/* Back face */
#cube .four {
    transform: rotateY(180deg) translateZ(40vmin);
    -webkit-transform: rotateY(180deg) translateZ(40vmin);
}

/* Left face */
#cube .five {
    transform: rotateY(-90deg) translateZ(40vmin);
    -webkit-transform: rotateY(-90deg) translateZ(40vmin);
}

/* Bottom face */
#cube .six {
    transform: rotateX(-90deg) translateZ(40vmin);
    -webkit-transform: rotateX(-90deg) translateZ(40vmin);
}

/* ==========================================================================
   Bottom Face Content Rotation
   Content must be rotated 180deg to be readable when viewed from below
   ========================================================================== */

#cube .six .cube-face-container,
#cube .six > .cube-face-content,
#cube .six .on-demand-content {
    transform: rotate(180deg) !important;
    -webkit-transform: rotate(180deg) !important;
    transform-origin: center center;
}

/* ==========================================================================
   Inner Element Resets
   Prevent cube positioning from affecting content layout
   ========================================================================== */

#cube .face div,
#cube .face p,
#cube .face span,
#cube .face article,
#cube .face section,
#cube .face header,
#cube .face footer,
#cube .face main {
    position: static;
    height: auto;
    width: auto;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}

/* === cube-surfaces.css === */
/**
 * gCube Dual-Surface System
 *
 * Implements front/back surfaces for each cube face using pseudo-elements.
 * This allows different backgrounds on the exterior (front) and interior (back)
 * of each cube face.
 *
 * Architecture:
 * - .face element: Transparent container
 * - .face::before: Front surface (visible when facing camera)
 * - .face::after: Back surface (visible from inside the cube)
 *
 * Customizer sets --face-front-bg and --face-back-bg variables per face.
 *
 * @package gCube
 * @version 2.0.0
 */

/* ==========================================================================
   Front Surface (Exterior)
   Visible when looking at the face from outside the cube
   ========================================================================== */

#cube > .face::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;

    /* Background from CSS variable (customizer sets this per face) */
    background: var(--face-front-bg, linear-gradient(270deg, var(--gradcolor1), var(--gradcolor2), var(--gradcolor3), var(--gradcolor4)));
    background-size: var(--face-front-bg-size, 800% 800%);
    background-position: center;
    background-repeat: no-repeat;

    /* Animation (customizer can disable per face) */
    animation: var(--face-front-animation, BGgrad 15s ease infinite);

    /* Only visible from the front (hide when rotated away) */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ==========================================================================
   Back Surface (Interior Wall)
   Visible when looking through the cube from inside
   ========================================================================== */

#cube > .face::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;

    /* Rotate 180deg so it faces inward */
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);

    /* Background from CSS variable (customizer sets this per face) */
    background: var(--face-back-bg, var(--interior-wall-base));
    background-size: var(--face-back-bg-size, auto);
    background-position: center;
    background-repeat: no-repeat;

    /* No animation on interior by default */
    animation: var(--face-back-animation, none);

    /* Only visible from the back (when looking into cube) */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ==========================================================================
   Top/Bottom Face Interior Rotation
   These faces need X rotation instead of Y for proper interior display
   ========================================================================== */

#cube .one::after {
    transform: rotateX(180deg);
    -webkit-transform: rotateX(180deg);
}

#cube .six::after {
    transform: rotateX(180deg);
    -webkit-transform: rotateX(180deg);
}

/* ==========================================================================
   Per-Face Surface Variables
   Default values - customizer overrides these dynamically
   ========================================================================== */

/* Top face */
#cube .one {
    --face-front-bg: linear-gradient(270deg, var(--gradcolor1), var(--gradcolor2), var(--gradcolor3), var(--gradcolor4));
    --face-front-bg-size: 800% 800%;
    --face-front-animation: BGgrad 15s ease infinite;
    --face-back-bg: var(--interior-wall-one);
}

/* Front face (often glass/transparent) */
#cube .two {
    --face-front-bg: var(--semi-transparant);
    --face-front-bg-size: auto;
    --face-front-animation: none;
    --face-back-bg: var(--interior-wall-two);
}

/* Right face */
#cube .three {
    --face-front-bg: linear-gradient(270deg, var(--gradcolor1), var(--gradcolor2), var(--gradcolor3), var(--gradcolor4));
    --face-front-bg-size: 800% 800%;
    --face-front-animation: BGgrad 15s ease infinite;
    --face-back-bg: var(--interior-wall-three);
}

/* Back face (typically shows background image) */
#cube .four {
    --face-front-bg: linear-gradient(135deg, var(--gradcolor1), var(--gradcolor4));
    --face-front-bg-size: 100% 100%;
    --face-front-animation: none;
    --face-back-bg: var(--interior-wall-four);
}

/* Left face */
#cube .five {
    --face-front-bg: linear-gradient(270deg, var(--gradcolor1), var(--gradcolor2), var(--gradcolor3), var(--gradcolor4));
    --face-front-bg-size: 800% 800%;
    --face-front-animation: BGgrad 15s ease infinite;
    --face-back-bg: var(--interior-wall-five);
}

/* Bottom face */
#cube .six {
    --face-front-bg: linear-gradient(270deg, var(--gradcolor1), var(--gradcolor2), var(--gradcolor3), var(--gradcolor4));
    --face-front-bg-size: 800% 800%;
    --face-front-animation: BGgrad 15s ease infinite;
    --face-back-bg: var(--interior-wall-six);
}

/* ==========================================================================
   Interior Wall Presets
   Apply via data-interior attribute: <div class="face" data-interior="metal">
   ========================================================================== */

/* Metallic interior - brushed steel look */
#cube .face[data-interior="metal"] {
    --face-back-bg: linear-gradient(
        135deg,
        rgba(70, 75, 85, 0.95) 0%,
        rgba(50, 55, 65, 0.9) 25%,
        rgba(80, 85, 95, 0.9) 50%,
        rgba(50, 55, 65, 0.9) 75%,
        rgba(70, 75, 85, 0.95) 100%
    );
}

/* Wooden interior - warm wood tones */
#cube .face[data-interior="wood"] {
    --face-back-bg: linear-gradient(
        180deg,
        rgba(90, 60, 40, 0.95) 0%,
        rgba(70, 45, 30, 0.9) 50%,
        rgba(85, 55, 35, 0.92) 100%
    );
}

/* Velvet interior - rich deep colors */
#cube .face[data-interior="velvet"] {
    --face-back-bg: linear-gradient(
        135deg,
        rgba(60, 20, 40, 0.95) 0%,
        rgba(80, 30, 50, 0.9) 50%,
        rgba(50, 15, 35, 0.95) 100%
    );
}

/* Dark interior - deep shadows */
#cube .face[data-interior="dark"] {
    --face-back-bg: rgba(15, 15, 20, 0.98);
}

/* Light interior - bright, airy feel */
#cube .face[data-interior="light"] {
    --face-back-bg: rgba(240, 238, 235, 0.95);
}

/* ==========================================================================
   Front Surface Presets
   Apply via data-front attribute: <div class="face" data-front="glass">
   ========================================================================== */

/* Glass front - semi-transparent for see-through effect */
#cube .face[data-front="glass"] {
    --face-front-bg: var(--semi-transparant);
    --face-front-animation: none;
}

/* Solid front - opaque colored front */
#cube .face[data-front="solid"] {
    --face-front-bg: var(--color-bg);
    --face-front-animation: none;
}

/* === face-content.css === */
/**
 * gCube Face Content Layout
 *
 * Containers, scrolling, content layout within cube faces.
 *
 * @package gCube
 * @version 2.0.0
 */

/* ==========================================================================
   Face Content Container
   ========================================================================== */

#cube .face .cube-face-container,
.cube-face-container {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Above pseudo-element surfaces */

    /* Scrolling behavior */
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    overflow-x: hidden;

    /* Hide scrollbars */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */

    /* Transparent to show face background through */
    background: transparent;
}

/* Hide scrollbars (Chrome, Safari, Opera) */
.cube-face-container::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* ==========================================================================
   Face Content Wrapper
   ========================================================================== */

.cube-face-content {
    position: relative;
    width: 100%;
    min-height: 100%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: transparent;
}

/* Content hidden from behind to prevent mirrored text */
#cube .face .cube-face-container,
#cube .face .cube-face-content {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Back face content - ensure transparent */
#cube .four .cube-face-container,
#cube .four .cube-face-content {
    background: transparent !important;
}

/* ==========================================================================
   Content Sections
   ========================================================================== */

.cube-face-content > .face-header {
    flex-shrink: 0;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

.cube-face-content > .face-footer {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 15px;
}

.face-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    display: block;
}

/* ==========================================================================
   Face Title
   ========================================================================== */

.face-title {
    margin: 0 0 2vmin 0;
    font-size: clamp(1.25rem, 5vmin, 2rem);
    font-weight: 600;
    color: var(--color-txt, #333);
}

/* ==========================================================================
   Content Wrapper from gcube_get_face_content()
   ========================================================================== */

.face-content {
    display: block;
    width: 100%;
}

.face-content-title {
    display: block;
    margin: 0 0 20px 0;
    font-size: 3vmin;
    color: var(--color-highlight, #e51022);
}

.face-content-body {
    display: block;
    width: 100%;
}

.face-content-body > * {
    display: block;
    margin-bottom: 15px;
}

.face-content-body > *:last-child {
    margin-bottom: 0;
}

.face-content-body p {
    display: block;
    margin: 0 0 15px 0;
}

.face-content-body p:last-child {
    margin-bottom: 0;
}

.face-content-body > div {
    display: block;
    margin-bottom: 15px;
}

/* ==========================================================================
   Face Posts Container
   ========================================================================== */

.face-posts {
    display: block;
    width: 100%;
}

.face-posts > * {
    display: block;
    margin-bottom: 30px;
}

.face-posts > *:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Face Visibility States
   ========================================================================== */

.face-hidden {
    pointer-events: none;
    transition: opacity 0.6s ease-in-out;
}

.face-visible {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.6s ease-in-out;
}

.face-hidden .cube-face-content {
    visibility: visible;
}

/* ==========================================================================
   Loading State
   ========================================================================== */

.face.loading {
    position: relative;
}

.face.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--color-highlight, #e51022);
    border-radius: 50%;
    animation: cube-loading-spin 0.8s linear infinite;
    z-index: 100;
}

/* Note: ::after is used for loading spinner, which conflicts with interior walls.
   Consider using a separate loading element in HTML if both are needed. */

/* Fade in content after loading */
.face .cube-face-content {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.face[data-loaded="true"] .cube-face-content {
    opacity: 1;
}

/* ==========================================================================
   Loading State Alternative (using child element)
   ========================================================================== */

.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    text-align: center;
}

/* === face-expansion.css === */
/**
 * gCube Face Expansion (Fullscreen Reading Mode)
 *
 * Double-tap/click to expand, tap edges to shrink.
 * Two modes: "classic" (scaled cube face) or "focus" (100% viewport)
 *
 * @package gCube
 * @version 2.0.0
 */

/* ==========================================================================
   Body State Class
   ========================================================================== */

body.face-expanded-mode {
    overflow: hidden;
}

/* When expanded, dim the original cube */
body.face-expanded-mode #scene {
    opacity: 0.3;
    pointer-events: none;
}

/* Dim navigation when face is expanded */
body.face-expanded-mode #wrapper_left,
body.face-expanded-mode #wrapper_right {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* ==========================================================================
   Expanded Overlay (Cloned Content)
   ========================================================================== */

.face-expanded-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 995;
    background: var(--color-bg, #f7f5f2);
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.face-expanded-overlay.active {
    opacity: 1;
    transform: scale(1);
}

.face-expanded-overlay .cube-face-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    min-height: 100vh;
}

.face-expanded-overlay .cube-face-content {
    max-width: 800px;
    margin: 0 auto;
}

/* Re-enable text selection in expanded overlay (reading mode) */
.face-expanded-overlay,
.face-expanded-overlay * {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* ==========================================================================
   Backdrop Overlay
   ========================================================================== */

.face-expand-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 990 !important;
}

.face-expand-backdrop.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 990 !important;
}

/* ==========================================================================
   Base Expanded State
   ========================================================================== */

.face.face-expanded-active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    transform: none !important;
    z-index: 995 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-radius 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    isolation: isolate;
}

/* ==========================================================================
   Classic Mode - Scaled Cube Face with 3D Effect
   ========================================================================== */

body.expand-mode-classic #cube.face-expanded {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.expand-mode-classic .face.face-expanded-active {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    z-index: 995 !important;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.5s ease;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.5);
}

/* Per-face transforms in classic mode */
body.expand-mode-classic #cube.face-expanded .one.face-expanded-active {
    transform: rotateX(90deg) translateZ(40vmin) scale(1.2) !important;
}

body.expand-mode-classic #cube.face-expanded .two.face-expanded-active {
    transform: rotateY(0deg) translateZ(40vmin) scale(1.2) !important;
}

body.expand-mode-classic #cube.face-expanded .three.face-expanded-active {
    transform: rotateY(90deg) translateZ(40vmin) scale(1.2) !important;
}

body.expand-mode-classic #cube.face-expanded .four.face-expanded-active {
    transform: rotateY(180deg) translateZ(40vmin) scale(1.2) !important;
}

body.expand-mode-classic #cube.face-expanded .five.face-expanded-active {
    transform: rotateY(-90deg) translateZ(40vmin) scale(1.2) !important;
}

body.expand-mode-classic #cube.face-expanded .six.face-expanded-active {
    transform: rotateX(-90deg) translateZ(40vmin) scale(1.2) !important;
}

/* ==========================================================================
   Focus Mode - 100% Viewport Fullscreen
   ========================================================================== */

body.expand-mode-focus .face.face-expanded-active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    transform: none !important;
    z-index: 995 !important;
    border-radius: 0 !important;
    background: var(--color-bg, #f7f5f2) !important;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-radius 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body.expand-mode-focus .face.face-expanded-active .cube-face-container {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

body.expand-mode-focus .face.face-expanded-active .cube-face-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Bottom face doesn't need rotation in fullscreen */
body.expand-mode-focus .face.six.face-expanded-active .cube-face-container {
    transform: none !important;
}

/* ==========================================================================
   Edge Highlight Zones
   ========================================================================== */

.face.face-expanded-active::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border: 4px solid transparent;
    transition: border-color 0.3s ease;
    z-index: 997;
}

.face.face-expanded-active.edge-hover::after {
    border-color: rgba(229, 16, 34, 0.6);
}

/* ==========================================================================
   Close Button
   ========================================================================== */

.face-expand-close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    z-index: 996;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

.face-expand-close:hover {
    background: rgba(229, 16, 34, 0.9);
    transform: scale(1.1);
}

.face-expand-close.active {
    opacity: 1;
    pointer-events: auto;
}

/* ==========================================================================
   Expand Hint Indicator
   ========================================================================== */

.face-expand-hint {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 20;
}

.face-visible:hover .face-expand-hint {
    opacity: 0.7;
}

.face-expanded-active .face-expand-hint {
    display: none;
}

/* === navigation.css === */
/**
 * gCube Navigation
 *
 * Navigation buttons and wrapper positioning.
 *
 * @package gCube
 * @version 2.0.0
 */

/* ==========================================================================
   Navigation Wrappers
   ========================================================================== */

#wrapper_left,
#wrapper_right {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
}

#wrapper_left {
    z-index: 889;
}

#wrapper_right {
    z-index: 890;
}

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

.navButton {
    will-change: transform;
    background-color: var(--nav-button-bg-color);
    padding: var(--nav-button-padding);
    margin-top: var(--nav-button-margin);
    margin-left: 0.1188vmin;
    margin-right: 0.1188vmin;
    margin-bottom: 0.1188vmin;
    font-size: var(--nav-button-font-size);
    border-style: var(--nav-button-border-style);
    border-color: var(--nav-button-border-color);
    border-width: var(--nav-button-border-width);
    border-radius: var(--nav-button-border-radius);
    transition: transform 0.5s;
    cursor: pointer;
}

.navButton:hover,
.navButton:focus {
    background-color: var(--nav-button-hover-bg-color);
    border-color: var(--nav-button-hover-text-color);
    border-width: 4px;
    animation: groovy 4.5s ease-in-out infinite;
    animation-delay: 23ms;
}

/* ==========================================================================
   Navigation Button Text
   ========================================================================== */

.navName {
    background-color: var(--nav-button-bg-color);
    text-transform: uppercase;
    color: var(--nav-button-text-color);
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    cursor: pointer;
    border-radius: var(--nav-button-border-radius);
    border: none;
    font-size: 2.3vmin;
    align-items: center;
    justify-content: center;
}

.navName:hover,
.navName:focus {
    background-color: var(--nav-button-hover-bg-color);
    color: var(--nav-button-hover-text-color);
}

/* ==========================================================================
   Logo Wrapper
   ========================================================================== */

#logoWrapper {
    position: fixed;
    top: 2vmin;
    left: 2vmin;
    z-index: 989;
    will-change: transform;
}

#logo_goHome {
    max-width: 10vmin;
    height: auto;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
    will-change: transform;
}

#logo_goHome:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

.logo {
    position: absolute;
    height: 75vmin;
    width: 75vmin;
    border-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

#logo_spin {
    position: absolute;
    will-change: transform;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
}

/* ==========================================================================
   Footer Credit
   ========================================================================== */

.site-footer {
    position: fixed;
    bottom: 1vmin;
    right: 2vmin;
    z-index: 989;
}

.gcube-credit {
    font-size: 0.65rem;
    color: rgba(0, 0, 0, 0.4);
    letter-spacing: 0.5px;
}

.gcube-credit a {
    color: rgba(0, 0, 0, 0.5);
    text-decoration: none;
}

.gcube-credit a:hover {
    color: var(--color-highlight, #e51022);
    text-decoration: underline;
}

/* === typography.css === */
/**
 * gCube Typography
 *
 * Font families, text colors, headings, and text utilities.
 *
 * @package gCube
 * @version 2.0.0
 */

/* ==========================================================================
   Base Typography
   Note: Body font-family is set dynamically by customizer-css.php
   ========================================================================== */

body {
    font-optical-sizing: auto;
    font-style: normal;
    color: var(--color-txt);
    line-height: 1.6;
}

/* ==========================================================================
   Headings
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    color: var(--color-txt);
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 0.5em 0;
}

/* Using vmin for responsive scaling across all screen sizes */
h1 { font-size: clamp(1.5rem, 6vmin, 3rem); }
h2 { font-size: clamp(1.25rem, 5vmin, 2.5rem); }
h3 { font-size: clamp(1.1rem, 4vmin, 2rem); }
h4 { font-size: clamp(1rem, 3.5vmin, 1.75rem); }
h5 { font-size: clamp(0.9rem, 3vmin, 1.5rem); }
h6 { font-size: clamp(0.85rem, 2.5vmin, 1.25rem); }

/* ==========================================================================
   Links
   ========================================================================== */

a {
    color: var(--color-highlight, #e51022);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: var(--color-hover, #c40e1d);
    text-decoration: underline;
}

/* ==========================================================================
   Paragraphs
   ========================================================================== */

p {
    margin: 0 0 1em 0;
}

p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Text Utilities for Transparent Backgrounds
   ========================================================================== */

/* Text shadow for readability on transparent backgrounds */
.text-shadow-light {
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

.text-shadow-dark {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Dark text variant for light interiors */
#cube .face[data-interior="light"] .cube-face-content {
    color: #333;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* === content-types.css === */
/**
 * gCube Content Types
 *
 * Styling for different content sources: posts, pages, slugs, glass mode.
 *
 * @package gCube
 * @version 2.0.0
 */

/* ==========================================================================
   See-Through Mode
   Apply data-see-through="true" to make face content transparent
   ========================================================================== */

#cube .face[data-see-through="true"] .cube-face-container,
#cube .face[data-see-through="true"] .cube-face-content,
#cube .face[data-see-through="true"] .wordpress-page,
#cube .face[data-see-through="true"] .glass-content,
#cube .face[data-see-through="true"] .slug-content,
#cube .face[data-see-through="true"] .page-excerpt,
#cube .face[data-see-through="true"] .face-header,
#cube .face[data-see-through="true"] .face-body,
#cube .face[data-see-through="true"] .face-footer {
    background: transparent !important;
}

/* Front face (.two) see-through by default for depth effect */
#cube .two:not([data-see-through="false"]) .cube-face-container,
#cube .two:not([data-see-through="false"]) .cube-face-content,
#cube .two:not([data-see-through="false"]) .wordpress-page,
#cube .two:not([data-see-through="false"]) .glass-content,
#cube .two:not([data-see-through="false"]) .slug-content,
#cube .two:not([data-see-through="false"]) .page-excerpt,
#cube .two:not([data-see-through="false"]) .face-header,
#cube .two:not([data-see-through="false"]) .face-body,
#cube .two:not([data-see-through="false"]) .face-footer {
    background: transparent !important;
}

/* Text readability on transparent backgrounds */
#cube .face[data-see-through="true"] .cube-face-content,
#cube .two:not([data-see-through="false"]) .cube-face-content {
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   Glass Mode Content
   ========================================================================== */

.face[data-glass="true"] .cube-face-container {
    background: transparent !important;
    opacity: 1;
}

.face[data-glass-content="true"] .cube-face-container,
.face[data-glass-content="true"] .cube-face-content,
.glass-with-content,
.glass-content {
    background: transparent !important;
}

.glass-text-overlay {
    background: transparent;
    padding: 2vmin;
    text-align: center;
    color: var(--color-txt, #000);
}

.glass-text-overlay h1,
.glass-text-overlay h2,
.glass-text-overlay h3,
.glass-text-overlay p {
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.5);
}

.face[data-glass-content="true"] .cube-face-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100%;
}

/* ==========================================================================
   Slug-Based Content
   ========================================================================== */

.slug-content {
    background: transparent;
}

.slug-content .face-header {
    margin-bottom: 15px;
}

.slug-content .face-title {
    font-size: 2.5vmin;
    color: var(--color-highlight, #e51022);
    margin: 0 0 10px 0;
}

.slug-content .face-featured-image {
    width: 100%;
    max-height: 200px;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 15px;
}

.slug-content .face-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slug-content .page-excerpt {
    font-style: italic;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 15px;
    padding: 10px;
    border-left: 3px solid var(--color-highlight, #e51022);
    background: rgba(0, 0, 0, 0.03);
}

.slug-content .page-content {
    line-height: 1.6;
}

.slug-content .page-meta {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 0.85em;
    color: rgba(0, 0, 0, 0.6);
}

.slug-content .page-meta .author {
    margin-right: 15px;
}

.slug-content .face-footer {
    margin-top: auto;
    padding-top: 15px;
}

.slug-content .read-more {
    display: inline-block;
    padding: 8px 16px;
    background: var(--color-highlight, #e51022);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9em;
    transition: background 0.2s ease;
}

.slug-content .read-more:hover {
    background: #c40e1d;
}

/* ==========================================================================
   Posts Container (Scrollable Multi-Post Display)
   ========================================================================== */

.face-content-posts {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.face-posts-container {
    max-height: 75vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
    scroll-behavior: smooth;
    flex: 1;
}

/* Custom scrollbar */
.face-posts-container::-webkit-scrollbar {
    width: 8px;
}

.face-posts-container::-webkit-scrollbar-track {
    background: var(--scrollbar-track, rgba(0, 0, 0, 0.05));
    border-radius: 4px;
}

.face-posts-container::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb, rgba(0, 0, 0, 0.2));
    border-radius: 4px;
    transition: background 0.2s ease;
}

.face-posts-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
}

/* Firefox scrollbar */
.face-posts-container {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb, rgba(0, 0, 0, 0.2)) var(--scrollbar-track, rgba(0, 0, 0, 0.05));
}

/* ==========================================================================
   Individual Post Item
   ========================================================================== */

.face-post-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.face-post-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.face-post-item:hover {
    transform: translateX(4px);
}

/* Post thumbnail */
.face-post-thumbnail {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
}

.face-post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.face-post-item:hover .face-post-thumbnail img {
    transform: scale(1.05);
}

/* Post content area */
.face-post-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.face-post-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.4rem 0;
    line-height: 1.3;
}

.face-post-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.face-post-title a:hover {
    color: var(--color-highlight, #e51022);
}

.face-post-excerpt {
    font-size: 0.9rem;
    color: rgba(0, 0, 0, 0.65);
    line-height: 1.5;
    margin-bottom: 0.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.face-post-meta {
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.5);
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.face-post-categories {
    background: rgba(0, 0, 0, 0.06);
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-weight: 500;
}

/* Empty state */
.face-posts-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
}

.face-posts-message {
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
    font-size: 1.1rem;
}

/* ==========================================================================
   Error and Offline Fallback States
   ========================================================================== */

.face-error,
.offline-fallback,
.error-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 20px;
    text-align: center;
}

.face-error p,
.offline-fallback p,
.error-fallback p {
    margin: 10px 0;
}

.face-error button,
.offline-fallback button,
.error-fallback button {
    margin-top: 15px;
    padding: 10px 20px;
    background: var(--color-highlight, #e51022);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s ease;
}

.face-error button:hover,
.offline-fallback button:hover,
.error-fallback button:hover {
    background: #c40e1d;
}

/* === responsive.css === */
/**
 * gCube Responsive Design
 *
 * Media queries for mobile, tablet, and desktop layouts.
 *
 * @package gCube
 * @version 2.0.0
 */

/* ==========================================================================
   Mobile Phones (max-width: 428px)
   ========================================================================== */

@media only screen and (max-width: 428px) {
    #scene {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -65%);
    }

    #wrapper_left,
    #wrapper_right {
        height: 20%;
    }

    .navButton {
        max-height: 7.5vmin;
        max-width: 8vmin;
        margin-left: 0.39vmin;
        margin-right: 0.55vmin;
    }

    /* Portrait orientation */
    @media (orientation: portrait) {
        #wrapper_left {
            top: 0;
            left: 0;
        }

        #wrapper_right {
            bottom: 0;
            left: 0;
        }

        #wrapper_left .navButton:first-child {
            margin-left: 18vmin;
            width: 20%;
            margin-right: 0;
        }

        #wrapper_left .navButton {
            margin-right: 0;
        }

        #cube {
            margin-left: 0vmin;
            margin-top: 25vmin;
            margin-bottom: 0vmin;
        }
    }

    /* Landscape orientation */
    @media (orientation: landscape) {
        #scene {
            transform: translate(-50%, -50%);
        }

        #wrapper_left,
        #wrapper_right {
            width: 20%;
            height: 100%;
            flex-direction: column;
        }

        #wrapper_left {
            left: 0;
            top: 0;
        }

        #wrapper_right {
            right: 0;
            top: 0;
        }

        #cube {
            margin-left: 0vmin;
            margin-top: 0vmin;
            margin-bottom: 0vmin;
        }
    }

    /* Posts responsive */
    .face-post-item {
        flex-direction: column;
        gap: 0.75rem;
    }

    .face-post-thumbnail {
        width: 100%;
        height: 120px;
    }

    .face-posts-container {
        max-height: 70vh;
        padding: 0.75rem;
    }
}

/* ==========================================================================
   Tablets (429px - 960px)
   ========================================================================== */

@media only screen and (min-width: 429px) and (max-width: 960px) {
    #scene {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -65%);
    }

    #wrapper_left,
    #wrapper_right {
        height: 20%;
    }

    .navButton {
        max-height: 7.5vmin;
        max-width: 10vmin;
        margin-left: 0.25vmin;
        margin-right: 0.75vmin;
    }

    /* Portrait orientation */
    @media (orientation: portrait) {
        #wrapper_left {
            top: 0;
            left: 0;
        }

        #wrapper_right {
            bottom: 0;
            left: 0;
        }

        #wrapper_left .navButton:first-child {
            margin-left: 18vmin;
            width: 20%;
            margin-right: 0;
        }

        #wrapper_left .navButton {
            margin-right: 0;
        }

        #cube {
            margin-left: 2vmin;
            margin-top: 25vmin;
        }
    }

    /* Landscape orientation */
    @media (orientation: landscape) {
        #scene {
            transform: translate(-50%, -50%);
        }

        #wrapper_left,
        #wrapper_right {
            width: 20%;
            height: 100%;
            flex-direction: column;
        }

        #wrapper_left {
            left: 0;
            top: 0;
        }

        #wrapper_right {
            right: 0;
            top: 0;
        }
    }
}

/* ==========================================================================
   Desktop (min-width: 961px)
   ========================================================================== */

@media (min-width: 961px) {
    #scene {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #wrapper_left,
    #wrapper_right {
        width: var(--nav-wrapper-default-width);
        height: 100%;
        flex-direction: column;
    }

    #wrapper_left {
        left: 0;
        top: 0;
    }

    #wrapper_right {
        right: 0;
        top: 0;
    }

    .navButton {
        min-width: var(--nav-button-default-min-width);
        min-height: var(--nav-button-default-min-height);
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    #scene {
        position: static;
        width: 100%;
        height: auto;
        perspective: none;
    }

    #cube {
        transform: none !important;
        width: 100%;
        height: auto;
    }

    #cube > .face {
        position: static;
        transform: none !important;
        width: 100%;
        height: auto;
        page-break-inside: avoid;
    }

    #wrapper_left,
    #wrapper_right,
    #logoWrapper,
    .site-footer {
        display: none !important;
    }

    .face-expand-close,
    .face-expand-hint,
    .face-expand-backdrop {
        display: none !important;
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    #cube,
    #cube > .face,
    #cube > .face::before,
    #cube > .face::after,
    .navButton,
    .face-expanded-overlay,
    .face-expand-backdrop {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   High Contrast Mode
   ========================================================================== */

@media (prefers-contrast: high) {
    :root {
        --interior-wall-base: rgba(0, 0, 0, 0.95);
        --semi-transparant: rgba(255, 255, 255, 0.5);
    }

    .navButton {
        border-width: 2px !important;
    }
}

/* ==========================================================================
   Dark Mode (if supported in future)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    /* Reserved for future dark mode support */
    /* Uncomment and customize when ready:
    :root {
        --color-bg: #1a1a1a;
        --color-txt: #f0f0f0;
        --interior-wall-base: rgba(30, 30, 35, 0.95);
    }
    */
}