/*
 * main.css — Shieldwall Games
 *
 * This file contains:
 *   1. Google Fonts imports (placeholder — to be replaced with licensed fonts)
 *   2. CSS reset
 *   3. Base tokens (theme-independent: spacing, type scale, radius, transitions)
 *   4. Studio theme tokens — light and dark mode
 *   5. Mimir theme tokens — light and dark mode
 *   6. Mimir section accent tokens — all seven sections, both modes
 *   7. Section token application (wires tokens to section containers only)
 *   8. Studio component styles (scoped to body.theme-studio)
 *
 * Mimir components live in mimir/styles/mimir.css.
 * Do not add component styles for Mimir here.
 */

/* ==========================================================================
   1. Font Declarations — Njord (client-supplied)
   Njord Alternate: display/heading font — more character, used for titles
   Njord Regular: body font — clean and readable for paragraph text
   ========================================================================== */

@font-face {
    font-family: 'Njord';
    src: url('../assets/fonts/Njord-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Njord Alternate';
    src: url('../assets/fonts/Njord-Alternate.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   2. CSS Reset — Modern, minimal, respectful of defaults
   ========================================================================== */

/* Use border-box for all elements */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default margin and padding */
* {
    margin: 0;
    padding: 0;
}

/* Prevent font-size inflation on mobile */
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    font-size: 100%;
}

/* Smooth scrolling, respecting user motion preferences */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Sensible body defaults */
body {
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Images and media default to block and constrain to parent */
img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
}

/* Form elements inherit font from parent */
input,
button,
textarea,
select {
    font: inherit;
}

/* Remove list styles on ul/ol with a list role (used with custom styling) */
ul[role='list'],
ol[role='list'] {
    list-style: none;
}

/* Prevent textarea horizontal resize */
textarea {
    resize: vertical;
}

/* Remove default table spacing */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Disable animations and transitions for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   3. Base Tokens — Theme-independent
   These never change between themes or modes.
   ========================================================================== */

:root {
    /* --- Spacing scale (base-8) --- */
    --space-1:  8px;    /* 0.5rem  */
    --space-2:  16px;   /* 1rem    */
    --space-3:  24px;   /* 1.5rem  */
    --space-4:  32px;   /* 2rem    */
    --space-5:  48px;   /* 3rem    */
    --space-6:  64px;   /* 4rem    */
    --space-7:  96px;   /* 6rem    */
    --space-8:  128px;  /* 8rem    */
    --space-9:  160px;  /* 10rem   */
    --space-10: 192px;  /* 12rem   */

    /* --- Typography scale (1.25 modular ratio, base 1rem = 16px) --- */
    --text-xs:  0.64rem;   /* 10.24px */
    --text-sm:  0.8rem;    /* 12.8px  */
    --text-base: 1rem;     /* 16px    */
    --text-md:  1.25rem;   /* 20px    */
    --text-lg:  1.563rem;  /* 25px    */
    --text-xl:  1.953rem;  /* 31.25px */
    --text-2xl: 2.441rem;  /* 39.06px */
    --text-3xl: 3.052rem;  /* 48.83px */
    --text-4xl: 3.815rem;  /* 61.04px */
    --text-5xl: 4.768rem;  /* 76.29px */
    --text-6xl: 5.96rem;   /* 95.37px */
    --text-7xl: 7.451rem;  /* 119.2px */

    /* --- Border radius --- */
    --radius-xs:   2px;
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-pill: 9999px;  /* Used for Mimir pill-shaped CTAs */

    /* --- Transitions --- */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* --- Max widths --- */
    --max-width-content: 1200px;
    --max-width-text:    680px;
    --max-width-narrow:  480px;

    /* --- Z-index scale --- */
    --z-base:    0;    /* Default stacking context */
    --z-raised:  10;   /* Cards, elevated elements */
    --z-overlay: 100;  /* Fixed header, nav overlay */
    --z-modal:   200;  /* Modal dialogs, mobile nav drawer */
    --z-toast:   300;  /* Toast notifications, top-level alerts */
}

/* ==========================================================================
   4. Studio Theme Tokens
   Light-first. Dark variant uses warm tones — not cold navy.
   Scoped to body.theme-studio in both modes.
   ========================================================================== */

/* --- Studio: light mode (default) --- */
[data-theme="light"] body.theme-studio {
    --color-bg:                 #f4edd3;
    --color-bg-alt:             #e4d9b8;
    --color-bg-dark:            #1a1714;
    --color-text-primary:       #2c2c2c;
    --color-text-secondary:     #6b6b6b;
    --color-text-inverse:       #f4edd3;
    --color-accent-primary:     #8b2500;
    --color-accent-primary-dark: #6a1c00; /* hover state for btn-primary */
    --color-accent-secondary:   #b8960c;
    --color-border:             rgba(107, 107, 107, 0.3);
    --color-shadow:             rgba(44, 28, 12, 0.15);
    --shadow-subtle:            0 1px 3px var(--color-shadow);
    --shadow-raised:            0 4px 16px var(--color-shadow);
    --font-display:             'Njord Alternate', Georgia, serif;
    --font-body:                'Njord', Georgia, serif;
}

/*
 * CONTRAST NOTE:
 * --color-accent-secondary (#b8960c) on --color-bg (#f4edd3) = ~2.85:1
 * Fails WCAG AA for normal text. Passes for large text (3:1 threshold) only marginally.
 * Affected: .section-label, eyebrow text on light studio backgrounds.
 * Recommendation: darken to #8a7209 (~4.5:1) if AA compliance required for small text.
 * Decision deferred to client — do not change the variable without approval.
 */

/* --- Studio: dark mode --- */
[data-theme="dark"] body.theme-studio {
    --color-bg:                 #1a1714;
    --color-bg-alt:             #2e2118;
    --color-bg-dark:            #0f0d0b;
    --color-text-primary:       #f4edd3;
    --color-text-secondary:     #a89880;
    --color-text-inverse:       #2c2c2c;
    --color-accent-primary:     #c43500;
    --color-accent-primary-dark: #9a2900; /* hover state for btn-primary */
    --color-accent-secondary:   #b8960c;
    --color-border:             rgba(244, 237, 211, 0.2);
    --color-shadow:             rgba(0, 0, 0, 0.4);
    --shadow-subtle:            0 1px 3px var(--color-shadow);
    --shadow-raised:            0 4px 16px var(--color-shadow);
    --font-display:             'Njord Alternate', Georgia, serif;
    --font-body:                'Njord', Georgia, serif;
}

/* ==========================================================================
   5. Mimir Theme Tokens — Base Palette
   Mimir is dark-first. Light mode is warm parchment with saturated
   accents — NOT an inversion of dark mode.
   ========================================================================== */

/* --- Mimir: dark mode (default) --- */
[data-theme="dark"] body.theme-mimir {
    --color-bg:               #0d1117;
    --color-bg-alt:           #111827;
    --color-bg-raised:        #1a2332;
    --color-text-primary:     #e8eaf0;
    --color-text-secondary:   #8892a4;
    --color-text-inverse:     #0d1117;
    --color-accent-primary:   #c9a84c;
    --color-accent-secondary: #a0aec0;
    --color-border:           rgba(255, 255, 255, 0.1);
    --color-shadow:           rgba(0, 0, 0, 0.5);
    --shadow-subtle:          0 1px 4px var(--color-shadow);
    --shadow-raised:          0 6px 24px var(--color-shadow);
    --shadow-glow:            0 0 20px rgba(201, 168, 76, 0.3);
    --font-display:           'Njord Alternate', Georgia, serif;
    --font-body:              'Njord', Georgia, serif;
}

/* --- Mimir: light mode --- */
[data-theme="light"] body.theme-mimir {
    --color-bg:               #faf7f0;
    --color-bg-alt:           #f0ebe0;
    --color-bg-raised:        #ffffff;
    --color-text-primary:     #1a1f2e;
    --color-text-secondary:   #4a5568;
    --color-text-inverse:     #faf7f0;
    --color-accent-primary:   #a07c20;
    --color-accent-secondary: #2d3748;
    --color-border:           rgba(26, 31, 46, 0.15);
    --color-shadow:           rgba(26, 31, 46, 0.12);
    --shadow-subtle:          0 1px 4px var(--color-shadow);
    --shadow-raised:          0 6px 24px var(--color-shadow);
    --shadow-glow:            0 0 20px rgba(160, 124, 32, 0.2);
    --font-display:           'Njord Alternate', Georgia, serif;
    --font-body:              'Njord', Georgia, serif;
}

/* ==========================================================================
   6. Mimir Section Accent Tokens
   Each Mimir feature section has its own colour wash. Tokens are scoped
   per section class. Components inside each section use var(--section-accent)
   etc. rather than hardcoded values.
   ========================================================================== */

/* --- Section accents: dark mode --- */

[data-theme="dark"] body.theme-mimir .section--hero {
    --section-bg:          #0d1117;
    --section-glow:        rgba(100, 120, 180, 0.3);
    --section-accent:      #c9a84c;
    --section-accent-text: #c9a84c;
    --section-cta-bg:      #c9a84c;
}

[data-theme="dark"] body.theme-mimir .section--engine {
    --section-bg:          #071a1a;
    --section-glow:        rgba(0, 200, 200, 0.2);
    --section-accent:      #00d4d4;
    --section-accent-text: #00d4d4;
    --section-cta-bg:      #00b8b8;
}

[data-theme="dark"] body.theme-mimir .section--schemas {
    --section-bg:          #1a1000;
    --section-glow:        rgba(200, 140, 0, 0.2);
    --section-accent:      #f0a500;
    --section-accent-text: #f0a500;
    --section-cta-bg:      #c88a00;
}

[data-theme="dark"] body.theme-mimir .section--quest {
    --section-bg:          #0a0f1e;
    --section-glow:        rgba(96, 165, 250, 0.2);
    --section-accent:      #60a5fa;
    --section-accent-text: #60a5fa;
    --section-cta-bg:      #2563eb;
}

[data-theme="dark"] body.theme-mimir .section--maps {
    --section-bg:          #071a0f;
    --section-glow:        rgba(0, 180, 80, 0.2);
    --section-accent:      #4ade80;
    --section-accent-text: #4ade80;
    --section-cta-bg:      #22c55e;
}

[data-theme="dark"] body.theme-mimir .section--ask-mimir {
    --section-bg:          #120d1a;
    --section-glow:        rgba(180, 0, 220, 0.25);
    --section-accent:      #d946ef;
    --section-accent-text: #d946ef;
    --section-cta-bg:      #a21caf;
}

[data-theme="dark"] body.theme-mimir .section--translator {
    --section-bg:          #1a080d;
    --section-glow:        rgba(200, 60, 80, 0.2);
    --section-accent:      #fb7185;
    --section-accent-text: #fb7185;
    --section-cta-bg:      #e11d48;
}

[data-theme="dark"] body.theme-mimir .section--community {
    --section-bg:          #10071a;
    --section-glow:        rgba(160, 60, 220, 0.2);
    --section-accent:      #e879f9;
    --section-accent-text: #e879f9;
    --section-cta-bg:      #c026d3;
}

/* --- Section accents: light mode (accents darkened for WCAG AA on light bg) --- */

[data-theme="light"] body.theme-mimir .section--hero {
    --section-bg:          #faf8f0;
    --section-glow:        rgba(100, 120, 180, 0.08);
    --section-accent:      #7a6010;
    --section-accent-text: #7a6010;
    --section-cta-bg:      #7a6010;
}

[data-theme="light"] body.theme-mimir .section--engine {
    --section-bg:          #f0fafa;
    --section-glow:        rgba(0, 150, 150, 0.08);
    --section-accent:      #0a7070;
    --section-accent-text: #0a7070;
    --section-cta-bg:      #0a7070;
}

[data-theme="light"] body.theme-mimir .section--schemas {
    --section-bg:          #fdf6e8;
    --section-glow:        rgba(160, 100, 0, 0.08);
    --section-accent:      #8a5c00;
    --section-accent-text: #8a5c00;
    --section-cta-bg:      #8a5c00;
}

[data-theme="light"] body.theme-mimir .section--quest {
    --section-bg:          #f0f4ff;
    --section-glow:        rgba(37, 99, 235, 0.08);
    --section-accent:      #1d4ed8;
    --section-accent-text: #1d4ed8;
    --section-cta-bg:      #1d4ed8;
}

[data-theme="light"] body.theme-mimir .section--maps {
    --section-bg:          #f0faf4;
    --section-glow:        rgba(0, 130, 50, 0.08);
    --section-accent:      #166534;
    --section-accent-text: #166534;
    --section-cta-bg:      #166534;
}

[data-theme="light"] body.theme-mimir .section--ask-mimir {
    --section-bg:          #faf0fc;
    --section-glow:        rgba(130, 0, 160, 0.08);
    --section-accent:      #7e22ce;
    --section-accent-text: #7e22ce;
    --section-cta-bg:      #7e22ce;
}

[data-theme="light"] body.theme-mimir .section--translator {
    --section-bg:          #fdf0f2;
    --section-glow:        rgba(160, 20, 40, 0.08);
    --section-accent:      #9f1239;
    --section-accent-text: #9f1239;
    --section-cta-bg:      #9f1239;
}

[data-theme="light"] body.theme-mimir .section--community {
    --section-bg:          #faf0fd;
    --section-glow:        rgba(120, 20, 160, 0.08);
    --section-accent:      #86198f;
    --section-accent-text: #86198f;
    --section-cta-bg:      #86198f;
}

/* ==========================================================================
   7. Section Token Application
   Wires --section-bg to the section container background only.
   Components inside sections inherit the other tokens via var().
   Do NOT put component styles here — those live in mimir/styles/mimir.css.
   ========================================================================== */

body.theme-mimir section[class*="section--"] {
    background-color: var(--section-bg);
}

/* ==========================================================================
   Global — Base html/body rules (outside theme scope, shared by both themes)
   ========================================================================== */

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   Global — .container utility (shared by both themes)
   Centred, max-width wrapper for page content.
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--max-width-content);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-3);
    padding-right: var(--space-3);
}

/* ==========================================================================
   Global — .visually-hidden utility (shared by both themes)
   Hides content visually but keeps it accessible to screen readers.
   ========================================================================== */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip-to-main link — first focusable element on every page */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-3);
    background-color: var(--color-accent-primary, #8b2500);
    color: #fff;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    z-index: var(--z-toast);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: var(--space-3);
}

/* ==========================================================================
   Global — Theme toggle button (not theme-scoped)
   Used on all pages. Icons swap via data-theme on <html>.
   ========================================================================== */

.theme-toggle {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 6px 10px;
    cursor: pointer;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.theme-toggle:hover {
    color: var(--color-text-primary);
    border-color: var(--color-text-primary);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--color-accent-secondary);
    outline-offset: 2px;
}

/* Show sun in dark mode (click to go light), moon in light mode (click to go dark) */
.theme-toggle__icon--sun  { display: none; }
.theme-toggle__icon--moon { display: block; }

[data-theme="dark"] .theme-toggle__icon--sun  { display: block; }
[data-theme="dark"] .theme-toggle__icon--moon { display: none; }

/* ==========================================================================
   Global — Scroll reveal animation utility (shared by both themes)
   ========================================================================== */

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity var(--transition-slow),
        transform var(--transition-slow);
}

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

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   8. Studio / Ashborn Component Styles — scoped to body.theme-studio
   Mimir components live in mimir/styles/mimir.css, not here.
   All colour values reference semantic tokens (--color-bg, --color-text-primary,
   etc.) which are defined in the studio theme token blocks (section 4).
   ========================================================================== */

/* --- Studio: body defaults --- */
body.theme-studio {
    font-family: var(--font-body);
    font-size: var(--text-md);
    color: var(--color-text-primary);
    background-color: var(--color-bg);
    line-height: 1.65;
}

/* --- Studio: base typography --- */

body.theme-studio h1,
body.theme-studio h2,
body.theme-studio h3,
body.theme-studio h4,
body.theme-studio h5,
body.theme-studio h6 {
    font-family: var(--font-display);
    color: var(--color-text-primary);
    line-height: 1.15;
    text-wrap: balance;
    margin-bottom: var(--space-1);
}

body.theme-studio h1 { font-size: var(--text-5xl); font-weight: 700; }
body.theme-studio h2 { font-size: var(--text-3xl); font-weight: 700; }
body.theme-studio h3 { font-size: var(--text-2xl); font-weight: 600; }
body.theme-studio h4 { font-size: var(--text-xl);  font-weight: 600; }
body.theme-studio h5 { font-size: var(--text-lg);  font-weight: 600; }
body.theme-studio h6 { font-size: var(--text-base); font-weight: 600; }

body.theme-studio p {
    margin-bottom: var(--space-2);
    max-width: 65ch;
}

body.theme-studio a {
    color: var(--color-accent-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--transition-base);
}

body.theme-studio a:hover,
body.theme-studio a:focus-visible {
    color: var(--color-accent-secondary);
}

body.theme-studio ul,
body.theme-studio ol {
    margin-bottom: var(--space-2);
    padding-left: var(--space-3);
}

body.theme-studio li {
    margin-bottom: var(--space-1);
}

body.theme-studio li::marker {
    color: var(--color-accent-primary);
}

body.theme-studio blockquote {
    border-left: 3px solid var(--color-accent-secondary);
    padding: var(--space-2) var(--space-3);
    margin: var(--space-4) 0;
    background-color: var(--color-bg-alt);
    font-style: italic;
    font-size: var(--text-md);
    color: var(--color-text-secondary);
}

body.theme-studio blockquote p:last-child {
    margin-bottom: 0;
}

body.theme-studio hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-5) 0;
}

body.theme-studio strong { font-weight: 700; }
body.theme-studio em { font-style: italic; }

/* --- Studio: buttons --- */

body.theme-studio .btn {
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.85em 2em;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background-color var(--transition-base),
                color var(--transition-base),
                border-color var(--transition-base),
                box-shadow var(--transition-base);
}

body.theme-studio .btn-primary {
    background-color: var(--color-accent-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-accent-primary);
}

body.theme-studio .btn-primary:hover,
body.theme-studio .btn-primary:focus-visible {
    background-color: var(--color-accent-primary-dark);
    border-color: var(--color-accent-primary-dark);
    box-shadow: var(--shadow-raised);
}

body.theme-studio .btn-secondary {
    background-color: transparent;
    color: var(--color-accent-secondary);
    border-color: var(--color-accent-secondary);
}

body.theme-studio .btn-secondary:hover,
body.theme-studio .btn-secondary:focus-visible {
    background-color: var(--color-accent-secondary);
    color: var(--color-bg);
    box-shadow: var(--shadow-raised);
}

body.theme-studio .btn:focus-visible {
    outline: 2px solid var(--color-accent-secondary);
    outline-offset: 3px;
}

/* --- Studio: cards --- */

body.theme-studio .card {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-subtle);
    overflow: hidden;
    transition: transform var(--transition-base),
                box-shadow var(--transition-base);
}

body.theme-studio .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-raised);
}

body.theme-studio .card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--color-bg-alt);
}

body.theme-studio .card-body {
    padding: var(--space-3);
}

body.theme-studio .card-body h3 {
    margin-bottom: var(--space-1);
}

body.theme-studio .card-body p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
}

body.theme-studio .card-link {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* --- Studio: section layouts --- */

body.theme-studio .section {
    padding: var(--space-7) 0;
}

body.theme-studio .section-dark {
    background-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
}

body.theme-studio .section-dark h2,
body.theme-studio .section-dark h3 {
    color: var(--color-text-inverse);
}

body.theme-studio .section-dark p {
    color: var(--color-text-inverse);
}

body.theme-studio .section-alt {
    background-color: var(--color-bg-alt);
}

body.theme-studio .section__title {
    text-align: center;
    margin-bottom: var(--space-2);
}

body.theme-studio .section__subtitle {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--text-md);
    font-style: italic;
    max-width: 55ch;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-5);
}

/* --- Studio: ornamental divider --- */

body.theme-studio .divider-ornamental {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-5) auto;
    max-width: 20rem;
}

body.theme-studio .divider-ornamental::before,
body.theme-studio .divider-ornamental::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--color-accent-secondary);
}

body.theme-studio .divider-ornamental span {
    color: var(--color-accent-secondary);
    font-size: var(--text-md);
    line-height: 1;
}

/* --- Studio: placeholder images --- */

body.theme-studio .placeholder-image {
    width: 100%;
    background-color: var(--color-bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body.theme-studio .placeholder-image--16x9 { aspect-ratio: 16 / 9; }
body.theme-studio .placeholder-image--4x5  { aspect-ratio: 4 / 5; }

/* --- Studio: section label / eyebrow --- */

body.theme-studio .section-label {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-accent-secondary);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--space-2);
    display: block;
}

/* --- Studio: site header --- */

body.theme-studio .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-overlay);
    background-color: transparent;
    padding: var(--space-2) 0;
    transition: background-color var(--transition-base),
                padding var(--transition-base),
                box-shadow var(--transition-base);
    border-top: 3px solid var(--color-accent-secondary);
}

body.theme-studio .site-header.scrolled {
    background-color: var(--color-bg-dark);
    padding: var(--space-1) 0;
    box-shadow: var(--shadow-raised);
}

body.theme-studio .site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* --- Studio: logo --- */

body.theme-studio .site-logo {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-text-inverse);
    text-decoration: none;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: color var(--transition-base);
}

body.theme-studio .site-logo:hover,
body.theme-studio .site-logo:focus-visible {
    color: var(--color-accent-secondary);
}

/* --- Studio: navigation --- */

body.theme-studio .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(80vw, 20rem);
    background-color: var(--color-bg-dark);
    padding: var(--space-7) var(--space-4);
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    z-index: var(--z-modal);
}

body.theme-studio .site-nav.is-open {
    transform: translateX(0);
}

body.theme-studio .site-nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

body.theme-studio .site-nav__link {
    font-family: var(--font-display);
    font-size: var(--text-md);
    color: var(--color-text-inverse);
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: color var(--transition-base);
}

body.theme-studio .site-nav__link:hover,
body.theme-studio .site-nav__link:focus-visible {
    color: var(--color-accent-secondary);
}

body.theme-studio .nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: var(--z-overlay);
}

body.theme-studio .nav-overlay.is-visible {
    display: block;
}

body.theme-studio .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-1);
    z-index: var(--z-toast);
}

body.theme-studio .nav-toggle__bar {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-text-inverse);
    transition: transform var(--transition-base),
                opacity var(--transition-base);
}

body.theme-studio .nav-toggle.is-active .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

body.theme-studio .nav-toggle.is-active .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}

body.theme-studio .nav-toggle.is-active .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Studio navigation — Desktop (768px+) */
@media (min-width: 48rem) {
    body.theme-studio .site-nav {
        position: static;
        width: auto;
        background-color: transparent;
        padding: 0;
        transform: none;
        transition: none;
    }

    body.theme-studio .site-nav__list {
        flex-direction: row;
        gap: var(--space-4);
    }

    body.theme-studio .site-nav__link {
        font-size: var(--text-sm);
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }

    body.theme-studio .nav-toggle {
        display: none;
    }

    body.theme-studio .nav-overlay {
        display: none !important;
    }
}

/* --- Studio: hero section --- */

body.theme-studio .hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-text-inverse);
    background-color: var(--color-bg-dark);
    overflow: hidden;
}

/* Subtle noise/grain texture overlay */
body.theme-studio .hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
    opacity: 0.4;
    pointer-events: none;
    z-index: 1;
}

body.theme-studio .hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(26, 23, 20, 0.5) 100%);
    pointer-events: none;
    z-index: 1;
}

body.theme-studio .hero .container {
    position: relative;
    z-index: 2;
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
}

body.theme-studio .hero__eyebrow {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-accent-secondary);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: var(--space-3);
}

body.theme-studio .hero__title {
    font-size: var(--text-4xl);
    color: var(--color-text-inverse);
    margin-bottom: var(--space-3);
    letter-spacing: 0.03em;
    max-width: 18ch;
    margin-left: auto;
    margin-right: auto;
}

body.theme-studio .hero__subtitle {
    font-family: var(--font-body);
    font-size: var(--text-md);
    color: var(--color-text-secondary);
    max-width: 50ch;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-5);
    font-style: italic;
    line-height: 1.85;
}

body.theme-studio .hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: center;
}

@media (min-width: 30rem) {
    body.theme-studio .hero__actions {
        flex-direction: row;
        justify-content: center;
    }
}

body.theme-studio .hero__scroll-indicator {
    position: absolute;
    bottom: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-base);
}

body.theme-studio .hero__scroll-indicator:hover {
    color: var(--color-accent-secondary);
}

body.theme-studio .hero__scroll-indicator span {
    font-family: var(--font-display);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

body.theme-studio .hero__scroll-indicator svg {
    animation: bounce 2s ease infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(6px); }
    60% { transform: translateY(3px); }
}

/* Responsive hero title */
@media (min-width: 48rem) {
    body.theme-studio .hero__title {
        font-size: var(--text-5xl);
    }
}

@media (min-width: 64rem) {
    body.theme-studio .hero__title {
        font-size: var(--text-6xl);
    }
}

/* --- Studio: footer --- */

body.theme-studio .site-footer {
    background-color: var(--color-bg-dark);
    color: var(--color-text-secondary);
    padding: var(--space-6) 0 0;
    font-size: var(--text-base);
    border-top: 2px solid var(--color-accent-secondary);
}

body.theme-studio .footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding-bottom: var(--space-5);
}

@media (min-width: 48rem) {
    body.theme-studio .footer-grid {
        grid-template-columns: 2fr 1fr 1fr;
    }
}

body.theme-studio .footer-brand__name {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-text-inverse);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--space-2);
}

body.theme-studio .footer-brand__tagline {
    color: var(--color-text-secondary);
    font-style: italic;
    font-size: var(--text-base);
    max-width: 30ch;
}

body.theme-studio .footer-nav__heading {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-inverse);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-2);
}

body.theme-studio .footer-nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

body.theme-studio .footer-nav__link {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--text-base);
    transition: color var(--transition-base);
}

body.theme-studio .footer-nav__link:hover,
body.theme-studio .footer-nav__link:focus-visible {
    color: var(--color-accent-secondary);
}

body.theme-studio .footer-social__heading {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-inverse);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-2);
}

body.theme-studio .footer-social {
    display: flex;
    gap: var(--space-2);
}

body.theme-studio .footer-social__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    border: 1px solid var(--color-border);
    transition: color var(--transition-base),
                border-color var(--transition-base);
}

body.theme-studio .footer-social__link:hover,
body.theme-studio .footer-social__link:focus-visible {
    color: var(--color-accent-secondary);
    border-color: var(--color-accent-secondary);
}

body.theme-studio .footer-bottom {
    border-top: 1px solid var(--color-border);
    padding: var(--space-3) 0;
    text-align: center;
}

body.theme-studio .footer-copyright {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

/* ==========================================================================
   Studio Navigation
   Scoped to body.theme-studio.
   Sticky header, wordmark left, links right, hamburger on mobile.
   ========================================================================== */

body.theme-studio .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-overlay);
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    transition: background-color var(--transition-base), box-shadow var(--transition-base);
}

body.theme-studio .site-header.scrolled {
    box-shadow: var(--shadow-raised);
}

body.theme-studio .site-header__inner {
    max-width: var(--max-width-content);
    margin-inline: auto;
    padding-inline: var(--space-4);
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

/* Wordmark */
body.theme-studio .site-header__wordmark {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    text-decoration: none;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-shrink: 0;
}

body.theme-studio .site-header__wordmark:hover {
    color: var(--color-accent-secondary);
}

/* Desktop nav links */
body.theme-studio .site-header__links {
    display: none;
    list-style: none;
    align-items: center;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    body.theme-studio .site-header__links {
        display: flex;
    }
}

body.theme-studio .site-header__links a {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color var(--transition-fast);
}

body.theme-studio .site-header__links a:hover,
body.theme-studio .site-header__links a[aria-current="page"] {
    color: var(--color-accent-primary);
}

/* Right-side controls: theme toggle + hamburger */
body.theme-studio .site-header__controls {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Hamburger button */
body.theme-studio .site-header__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 8px;
    flex-shrink: 0;
}

body.theme-studio .site-header__hamburger span {
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--color-text-primary);
    transition: transform var(--transition-base), opacity var(--transition-base);
}

@media (min-width: 768px) {
    body.theme-studio .site-header__hamburger {
        display: none;
    }
}

/* Mobile drawer */
body.theme-studio .site-header__drawer {
    display: none;
    flex-direction: column;
    padding: var(--space-3) var(--space-4) var(--space-4);
    background-color: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
    gap: var(--space-1);
}

body.theme-studio .site-header__drawer.is-open {
    display: flex;
}

body.theme-studio .site-header__drawer a {
    font-family: var(--font-body);
    font-size: var(--text-md);
    color: var(--color-text-secondary);
    text-decoration: none;
    padding-block: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    transition: color var(--transition-fast);
}

body.theme-studio .site-header__drawer a:last-child {
    border-bottom: none;
}

body.theme-studio .site-header__drawer a:hover {
    color: var(--color-accent-primary);
}

/* ==========================================================================
   Studio Footer
   Scoped to body.theme-studio.
   Three columns on desktop, stacked on mobile.
   ========================================================================== */

body.theme-studio .site-footer {
    background-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
    border-top: 3px solid var(--color-accent-secondary);
    padding-block: var(--space-7) var(--space-5);
}

body.theme-studio .site-footer__inner {
    max-width: var(--max-width-content);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

body.theme-studio .site-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
    body.theme-studio .site-footer__grid {
        grid-template-columns: 2fr 1fr 1fr;
        gap: var(--space-6);
    }
}

/* Column 1: wordmark + tagline */
body.theme-studio .site-footer__wordmark {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-accent-secondary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: block;
    margin-bottom: var(--space-2);
}

body.theme-studio .site-footer__tagline {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-inverse);
    opacity: 0.7;
    line-height: 1.6;
    max-width: 28ch;
}

/* Column 2 & 3: nav links */
body.theme-studio .site-footer__heading {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent-secondary);
    margin-bottom: var(--space-3);
}

body.theme-studio .site-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

body.theme-studio .site-footer__links a {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-inverse);
    opacity: 0.75;
    text-decoration: none;
    transition: opacity var(--transition-fast), color var(--transition-fast);
}

body.theme-studio .site-footer__links a:hover {
    opacity: 1;
    color: var(--color-accent-secondary);
}

/* Social links */
body.theme-studio .site-footer__social {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

body.theme-studio .site-footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(244, 237, 211, 0.2);
    border-radius: var(--radius-sm);
    color: var(--color-text-inverse);
    opacity: 0.6;
    text-decoration: none;
    transition: opacity var(--transition-fast), border-color var(--transition-fast);
}

body.theme-studio .site-footer__social a:hover {
    opacity: 1;
    border-color: var(--color-accent-secondary);
    color: var(--color-accent-secondary);
}

/* Bottom bar */
body.theme-studio .site-footer__bottom {
    border-top: 1px solid rgba(244, 237, 211, 0.15);
    padding-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: center;
    text-align: center;
}

@media (min-width: 768px) {
    body.theme-studio .site-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

body.theme-studio .site-footer__copyright {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-text-inverse);
    opacity: 0.5;
}

/* ==========================================================================
   Homepage Hero Section
   Dark atmospheric section bridging studio page and Mimir zone.
   Uses inline CSS variable overrides — not theme-mimir class.
   ========================================================================== */

.hero-section {
    position: relative;
    min-height: 100svh;
    background-color: var(--hero-bg, #0d1117);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.hero-section__grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    background-size: 256px 256px;
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}

.hero-section__glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 70% 60% at 50% 40%,
        var(--hero-glow, rgba(100, 120, 180, 0.2)),
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}

.hero-section__inner {
    position: relative;
    z-index: 1;
    padding-block: var(--space-9);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
}

.hero-section__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--hero-accent, #c9a84c);
    margin: 0;
}

.hero-section__heading {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 600;
    line-height: 1.1;
    color: var(--hero-text, #e8eaf0);
    max-width: 16ch;
    margin: 0;
}

@media (min-width: 768px) {
    .hero-section__heading {
        font-size: var(--text-5xl);
    }
}

.hero-section__subtext {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    color: var(--hero-subtext, #8892a4);
    max-width: var(--max-width-text);
    line-height: 1.7;
    margin: 0;
}

.hero-section__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    margin-top: var(--space-2);
}

.hero-section__cta-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    background-color: var(--hero-accent, #c9a84c);
    color: #0d1117;
    border-radius: var(--radius-pill);
    padding: 14px 28px;
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.hero-section__cta-primary:hover {
    opacity: 0.85;
}

.hero-section__cta-secondary {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--hero-subtext, #8892a4);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: color var(--transition-fast);
}

.hero-section__cta-secondary:hover {
    color: var(--hero-text, #e8eaf0);
}

.hero-section__scroll-hint {
    position: absolute;
    bottom: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    color: var(--hero-subtext, #8892a4);
    opacity: 0.5;
    animation: scroll-hint-bounce 2s ease-in-out infinite;
}

@keyframes scroll-hint-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(6px); }
}

/* ==========================================================================
   Homepage — Studio Intro Section
   ========================================================================== */

body.theme-studio .studio-intro__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: center;
}

@media (min-width: 768px) {
    body.theme-studio .studio-intro__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-7);
    }
}

body.theme-studio .studio-intro__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

body.theme-studio .studio-intro__text p {
    font-size: var(--text-base);
    line-height: 1.75;
    color: var(--color-text-secondary);
}

body.theme-studio .studio-intro__aside {
    display: flex;
    justify-content: center;
}

/* ==========================================================================
   Homepage — Ashborn Preview Section
   ========================================================================== */

body.theme-studio .ashborn-preview__header {
    text-align: center;
    max-width: var(--max-width-text);
    margin-inline: auto;
    margin-bottom: var(--space-6);
}

body.theme-studio .ashborn-preview__card {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-raised);
}

@media (min-width: 768px) {
    body.theme-studio .ashborn-preview__card {
        grid-template-columns: 1fr 1fr;
    }
}

body.theme-studio .ashborn-preview__card-body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

body.theme-studio .ashborn-preview__tag {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent-secondary);
    margin: 0;
}

body.theme-studio .ashborn-preview__card-body h3 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

body.theme-studio .ashborn-preview__card-body p {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0;
}

body.theme-studio .ashborn-preview__form-wrap {
    margin-top: var(--space-2);
}

body.theme-studio .ashborn-preview__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-accent-primary);
    text-decoration: none;
    font-weight: 600;
    margin-top: var(--space-2);
    transition: gap var(--transition-fast);
}

body.theme-studio .ashborn-preview__link:hover {
    gap: var(--space-2);
}

/* Placeholder image blocks — studio theme */
body.theme-studio .placeholder-image {
    background-color: var(--color-bg-alt);
    border: 1px dashed var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    width: 100%;
    text-align: center;
}

body.theme-studio .placeholder-image--4x5 {
    aspect-ratio: 4 / 5;
}

body.theme-studio .placeholder-image--16x9 {
    aspect-ratio: 16 / 9;
}

/* Section label — studio theme */
body.theme-studio .section-label {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-accent-secondary);
    margin-bottom: var(--space-2);
}

/* Section heading — studio theme */
body.theme-studio .section-heading {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.15;
    margin-bottom: var(--space-3);
}

@media (min-width: 768px) {
    body.theme-studio .section-heading {
        font-size: var(--text-4xl);
    }
}

/* Section subtext — studio theme */
body.theme-studio .section-subtext {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: 1.7;
    max-width: var(--max-width-text);
}

/* Email signup form — studio theme */
body.theme-studio .signup-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: var(--max-width-narrow);
}

body.theme-studio .signup-form__label {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

body.theme-studio .signup-form__input {
    font-family: var(--font-body);
    font-size: var(--text-base);
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    outline: none;
    transition: border-color var(--transition-fast);
}

body.theme-studio .signup-form__input:focus {
    border-color: var(--color-accent-secondary);
    box-shadow: 0 0 0 3px rgba(184, 150, 12, 0.15);
}

body.theme-studio .signup-form__note {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    opacity: 0.7;
}