/*
Theme Name: Iconoclast Custom Surfboards v17
Theme URI: https://www.instagram.com/surf_iconoclast/
Author: Mike Wallace
Author URI: https://www.instagram.com/surf_iconoclast/
Description: Custom WordPress theme for Iconoclast Custom Surfboards — custom surfboards by Mike Wallace.
Version: 17.0.0
License: Private
Text Domain: iconoclast
*/

/* ==========================================================================
   Iconoclast Custom Surfboards - Main Stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Variables
   -------------------------------------------------------------------------- */
:root {
    --color-dark: #2d3436;
    --color-charcoal: #3d4447;
    --color-slate: #4a5568;
    --color-driftwood: #8b7355;
    --color-gold: #b8a024;
    --color-sand: #e6d5b8;
    --color-foam: #f5f0e8;
    --color-white: #ffffff;
    --color-text: #e8e8e8;
    --color-text-muted: #b0b0b0;

    --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --transition-base: 0.3s ease;
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-normal);
    background-color: var(--color-dark);
    color: var(--color-text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    margin: 0;
}

p { font-family: var(--font-primary); font-weight: var(--font-weight-normal); margin: 0; }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; font-family: var(--font-primary); }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-md); }

.main-content { flex: 1; padding: var(--space-lg) 0; }

/* --------------------------------------------------------------------------
   4. Navigation
   -------------------------------------------------------------------------- */
.nav {
    background-color: transparent;
    padding: var(--space-xs) 0;
}

.nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
}

.nav ul li a {
    color: var(--color-white);
    text-decoration: none;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.0925em;
    transition: color var(--transition-base);
    padding: 0.5em 1em;
    display: block;
    position: relative;
}

.nav ul li a:hover { color: var(--color-gold); }
.nav ul li a.active { color: var(--color-gold); }

.nav ul li.dropdown { position: relative; }

.nav ul li.dropdown .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-xs) 0;
    min-width: 150px;
    z-index: 100;
    margin-top: var(--space-xs);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.nav ul li.dropdown:hover .dropdown-menu { display: block; }
.nav ul li.dropdown .dropdown-menu li { display: block; }

.nav ul li.dropdown .dropdown-menu li a {
    display: block;
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.8rem;
    text-align: center;
    white-space: nowrap;
}

.nav ul li.dropdown .dropdown-menu li a:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* --------------------------------------------------------------------------
   5. Header & Logo
   -------------------------------------------------------------------------- */
header {
    background-color: transparent;
    padding: var(--space-lg) 0 var(--space-sm) 0;
    text-align: center;
}

.logo {
    display: block;
    margin: 0 auto;
    max-width: 700px;
    width: 80%;
    height: auto;
    filter: brightness(0) invert(56%) sepia(12%) saturate(500%) hue-rotate(170deg) brightness(93%) contrast(88%);
}

/* Gold badge logo (sitewide). The SVG is already gold, so the .logo
   recolor filter must not apply. Double class outranks the .logo
   width overrides in the 768px/480px media queries. */
.logo.logo--badge {
    filter: none;
    width: clamp(160px, 32vw, 300px);
}

/* --------------------------------------------------------------------------
   6. Content Sections
   -------------------------------------------------------------------------- */
.hero-section { text-align: center; padding: var(--space-lg) 0; }

.hero-image {
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.definition-block {
    color: #e8e8e8;
    text-align: left;
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
    position: relative;
    padding: 1em;
    font-size: 1.4rem;
    letter-spacing: 0.0925em;
    line-height: 1.6em;
    margin: var(--space-lg) auto;
    max-width: 900px;
}

.definition-block::before,
.definition-block::after {
    content: '';
    display: block;
    height: 4px;
    background-color: #e8e8e8;
    width: 100%;
    margin: 0 auto;
}

.definition-block::before { margin-bottom: 0.75em; }
.definition-block::after  { margin-top: 0.75em; }

/* --------------------------------------------------------------------------
   7. Photo Gallery
   -------------------------------------------------------------------------- */
.photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
    padding: var(--space-lg);
    max-width: 1200px;
    margin: 0 auto;
}

.photo-gallery img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.photo-gallery img:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.photo-gallery img:first-child { grid-column: 1 / -1; height: 400px; }

/* --------------------------------------------------------------------------
   8. Timeline (Story Page)
   -------------------------------------------------------------------------- */
.timeline {
    position: relative;
    max-width: 1000px;
    margin: var(--space-lg) auto;
    padding: var(--space-md);
}

.timeline::after {
    content: '';
    position: absolute;
    width: 3px;
    background: linear-gradient(180deg, var(--color-gold), var(--color-driftwood), var(--color-gold));
    top: 0; bottom: 0; left: 50%;
    margin-left: -1.5px;
    border-radius: 2px;
}

.timeline-item {
    padding: var(--space-sm) var(--space-lg);
    position: relative;
    background-color: inherit;
    width: 50%;
}

.timeline-item::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background-color: var(--color-gold);
    border: 3px solid var(--color-dark);
    top: 22px;
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 0 12px rgba(184, 160, 36, 0.4);
}

.timeline-item.left { left: 0; padding-right: var(--space-xl); }
.timeline-item.left::after { right: -9px; }
.timeline-item.right { left: 50%; padding-left: var(--space-xl); }
.timeline-item.right::after { left: -9px; }

.timeline-content {
    padding: var(--space-md);
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    position: relative;
}

.timeline-content::before {
    content: '';
    position: absolute;
    top: 20px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
}

.timeline-item.left .timeline-content::before  { right: -20px; border-left-color: rgba(255, 255, 255, 0.12); }
.timeline-item.right .timeline-content::before { left: -20px;  border-right-color: rgba(255, 255, 255, 0.12); }

.timeline-content h3 {
    color: var(--color-gold);
    margin: 0 0 var(--space-xs) 0;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.timeline-content p { margin: 0; color: var(--color-text); line-height: 1.7; font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   9. Board Grid
   -------------------------------------------------------------------------- */
.boards-section { padding: var(--space-lg); background-color: transparent; }

.boards-section h1 {
    text-align: center;
    color: var(--color-white);
    font-size: 2rem;
    margin-bottom: var(--space-lg);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.boards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
    max-width: 1200px;
    margin: 0 auto;
}

.board-card {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.board-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border-color: rgba(139, 115, 85, 0.5);
}

.board-card img { width: 100%; height: 280px; object-fit: cover; transition: transform var(--transition-base); }
.board-card:hover img { transform: scale(1.02); }

.board-card-content { padding: var(--space-md); }

.board-card h3 {
    margin: 0 0 var(--space-xs) 0;
    color: var(--color-gold);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.board-card p { margin: 0; color: var(--color-text-muted); font-size: 0.9rem; line-height: 1.6; }

/* --------------------------------------------------------------------------
   10. Instagram Page
   -------------------------------------------------------------------------- */
.instagram-section { padding: var(--space-lg); max-width: 1200px; margin: 0 auto; }

.instagram-header { text-align: center; margin-bottom: var(--space-lg); }

.instagram-header h1 {
    color: var(--color-white);
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: var(--space-sm);
}

.instagram-header p { color: var(--color-text-muted); font-size: 1rem; }
.instagram-header a { color: var(--color-gold); transition: color var(--transition-base); }
.instagram-header a:hover { color: var(--color-white); }

.instagram-embed-container {
    background: linear-gradient(145deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.instagram-profile {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: var(--space-md);
}

.instagram-avatar {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    padding: 3px;
    display: flex; align-items: center; justify-content: center;
}

.instagram-avatar-inner {
    width: 100%; height: 100%;
    border-radius: 50%;
    background-color: var(--color-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
}

.instagram-info h2  { color: var(--color-white); font-size: 1.3rem; margin-bottom: 4px; }
.instagram-info p   { color: var(--color-text-muted); font-size: 0.9rem; }

.instagram-follow-btn {
    margin-left: auto;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-bold);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.instagram-follow-btn:hover { transform: scale(1.05); box-shadow: 0 4px 16px rgba(225, 48, 108, 0.4); }

.instagram-feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }

.instagram-post { aspect-ratio: 1; overflow: hidden; position: relative; cursor: pointer; background-color: rgba(0, 0, 0, 0.3); }
.instagram-post img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-base), opacity var(--transition-base); }
.instagram-post:hover img { transform: scale(1.05); opacity: 0.8; }

.instagram-post-overlay {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.instagram-post:hover .instagram-post-overlay { opacity: 1; }
.instagram-post-overlay span { color: white; font-weight: var(--font-weight-bold); font-size: 0.9rem; }

.instagram-cta {
    text-align: center;
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.instagram-cta a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-lg);
    font-weight: var(--font-weight-bold);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.instagram-cta a:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(225, 48, 108, 0.4); }

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
footer {
    background-color: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text);
    text-align: center;
    padding: var(--space-md);
    margin-top: auto;
}

footer p {
    margin: 0;
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

footer a { color: var(--color-text); text-decoration: none; transition: color var(--transition-base); }
footer a:hover { color: var(--color-gold); }

.footer-links {
    list-style: none;
    padding: 0;
    margin: var(--space-sm) 0 0 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.footer-links a {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    font-size: 0.8rem;
}

.footer-links a:hover {
    background-color: var(--color-driftwood);
    border-color: var(--color-driftwood);
    color: var(--color-white);
}

/* --------------------------------------------------------------------------
   12. Landing Page
   -------------------------------------------------------------------------- */
body.page-template-page-landing {
    height: 100vh;
    overflow: hidden;
    background-color: #000;
}

.bg-video {
    position: fixed;
    right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto;
    z-index: -1;
    object-fit: cover;
    opacity: 0.7;
}

.landing-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-md);
    color: white;
}

.landing-logo { width: clamp(220px, 45vw, 420px); height: auto; }

.landing-caption {
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.15em;
    margin: var(--space-sm) 0 var(--space-md) 0;
    text-transform: uppercase;
}

.landing-nav a {
    color: white;
    text-decoration: none;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--space-sm) var(--space-lg);
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-lg);
    background-color: rgba(139, 115, 85, 0.25);
    transition: all var(--transition-base);
}

.landing-nav a:hover { background-color: var(--color-driftwood); border-color: var(--color-driftwood); }

/* --------------------------------------------------------------------------
   13. Story Page (Minimal V3)
   -------------------------------------------------------------------------- */
.version-indicator {
    text-align: center;
    padding: var(--space-sm);
    background: rgba(184, 160, 36, 0.1);
    color: var(--color-gold);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.minimal-hero {
    height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.minimal-hero h1 {
    font-size: 6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #fff 0%, #888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-sm);
}

.minimal-hero .year-range { font-size: 1.2rem; color: var(--color-gold); letter-spacing: 0.3em; text-transform: uppercase; }

.chapter {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-md);
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--space-xl);
    position: relative;
}

.chapter::before {
    content: '';
    position: absolute;
    left: 60px; top: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(184, 160, 36, 0.3), transparent);
}

.chapter-marker { text-align: right; padding-right: var(--space-lg); position: relative; }

.chapter-marker::after {
    content: '';
    position: absolute;
    right: -6px; top: 10px;
    width: 12px; height: 12px;
    background: var(--color-gold);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(184, 160, 36, 0.5);
}

.chapter-number { font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 5px; }

.chapter-label {
    font-size: 1rem;
    color: var(--color-gold);
    font-weight: 600;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    letter-spacing: 0.1em;
}

.chapter-content { padding-left: var(--space-lg); }

.chapter-content h2 { font-size: 2.5rem; color: #fff; margin-bottom: var(--space-md); font-weight: 300; line-height: 1.2; }
.chapter-content h2 strong { font-weight: 700; color: var(--color-gold); }
.chapter-content p { font-size: 1.1rem; color: rgba(255, 255, 255, 0.7); line-height: 2; max-width: 600px; }

.chapter-image { margin-top: var(--space-lg); border-radius: var(--radius-lg); overflow: hidden; position: relative; }
.chapter-image img { width: 100%; height: 300px; object-fit: cover; filter: grayscale(30%); transition: all 0.5s ease; }
.chapter-image:hover img { filter: grayscale(0%); transform: scale(1.02); }
.chapter-image::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(184, 160, 36, 0.3); border-radius: var(--radius-lg); pointer-events: none; }

.stats-row { display: flex; gap: var(--space-xl); margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.stat { text-align: center; }
.stat-value { font-size: 2.5rem; font-weight: 700; color: var(--color-gold); display: block; }
.stat-label { font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 0.1em; }

.divider { max-width: 1000px; margin: 0 auto; padding: var(--space-xl) var(--space-md); text-align: center; }
.divider-line { display: flex; align-items: center; gap: var(--space-md); }
.divider-line::before, .divider-line::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(184, 160, 36, 0.3), transparent); }
.divider-icon { font-size: 1.5rem; }

.manifesto { max-width: 800px; margin: var(--space-xl) auto; padding: var(--space-xl); text-align: center; }
.manifesto h2 { font-size: 1rem; color: var(--color-gold); text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: var(--space-lg); }
.manifesto p { font-size: 1.8rem; color: #fff; line-height: 1.6; font-weight: 300; }
.manifesto p strong { color: var(--color-gold); font-weight: 600; }

/* --------------------------------------------------------------------------
   14. Boards Page (Card Grid V1)
   -------------------------------------------------------------------------- */
.boards-intro { max-width: 900px; margin: 0 auto var(--space-xl); text-align: center; padding: 0 var(--space-md); }
.boards-intro h1 { font-size: 2.5rem; margin-bottom: var(--space-md); text-transform: uppercase; letter-spacing: 0.1em; }
.boards-intro .tagline { font-size: 1.2rem; color: var(--color-text-muted); line-height: 1.8; margin-bottom: var(--space-md); }
.boards-intro .quote { font-style: italic; color: var(--color-gold); font-size: 1.1rem; padding: var(--space-md); border-left: 3px solid var(--color-gold); text-align: left; background: rgba(184, 160, 36, 0.05); border-radius: 0 var(--radius-md) var(--radius-md) 0; }

.category-section { margin-bottom: var(--space-xl); }
.category-header { text-align: center; margin-bottom: var(--space-lg); padding-bottom: var(--space-sm); border-bottom: 2px solid rgba(255, 255, 255, 0.1); }
.category-header h2 { font-size: 1.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-gold); margin-bottom: var(--space-xs); }
.category-header p { color: var(--color-text-muted); font-size: 0.95rem; }

.models-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-lg); max-width: 1200px; margin: 0 auto; padding: 0 var(--space-md); }

.model-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg); padding: var(--space-lg); transition: all var(--transition-base); }
.model-card:hover { border-color: rgba(184, 160, 36, 0.3); transform: translateY(-2px); }
.model-card h3 { color: var(--color-white); font-size: 1.2rem; margin-bottom: var(--space-sm); text-transform: uppercase; letter-spacing: 0.05em; }
.model-card p { color: var(--color-text-muted); font-size: 0.9rem; line-height: 1.7; }

.materials-section { max-width: 900px; margin: var(--space-xl) auto; padding: var(--space-lg); background: rgba(184, 160, 36, 0.05); border: 1px solid rgba(184, 160, 36, 0.2); border-radius: var(--radius-lg); }
.materials-section h2 { color: var(--color-gold); font-size: 1.5rem; margin-bottom: var(--space-md); text-transform: uppercase; letter-spacing: 0.1em; }
.materials-section p { color: var(--color-text); line-height: 1.8; font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   15. Designer Page
   -------------------------------------------------------------------------- */
.designer-page { min-height: 100vh; padding: var(--space-lg) var(--space-md); }

.designer-header { text-align: center; margin-bottom: var(--space-xl); }
.designer-header h1 { font-size: 2.5rem; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: var(--space-sm); }
.designer-header .subtitle { color: var(--color-gold); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: var(--space-sm); }
.designer-header p { color: var(--color-text-muted); max-width: 600px; margin: 0 auto; line-height: 1.7; }

.designer-container { display: grid; grid-template-columns: 1fr 400px; gap: var(--space-xl); max-width: 1400px; margin: 0 auto; }

.board-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg); padding: var(--space-xl); min-height: 700px; position: relative; }

.board-svg-container { position: relative; width: 100%; max-width: 280px; }
.board-svg { width: 100%; height: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4)); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); }

.board-dimensions { margin-top: var(--space-lg); text-align: center; padding: var(--space-md); background: rgba(184, 160, 36, 0.1); border: 1px solid rgba(184, 160, 36, 0.2); border-radius: var(--radius-md); }
.board-dimensions h3 { color: var(--color-gold); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--space-xs); }
.board-dimensions p { color: var(--color-text); font-size: 1.1rem; font-weight: 500; }

.controls-panel { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg); padding: var(--space-lg); }

.control-section { margin-bottom: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.control-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.control-section h3 { color: var(--color-gold); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: var(--space-md); display: flex; align-items: center; gap: var(--space-sm); }
.control-section h3::before { content: ''; width: 12px; height: 2px; background: var(--color-gold); }

.options-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }

.option-btn { display: flex; flex-direction: column; align-items: center; padding: var(--space-md); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-base); color: var(--color-text); }
.option-btn:hover { border-color: rgba(184, 160, 36, 0.4); background: rgba(184, 160, 36, 0.05); }
.option-btn.active { border-color: var(--color-gold); background: rgba(184, 160, 36, 0.1); }
.option-btn svg { width: 60px; height: 80px; margin-bottom: var(--space-xs); fill: none; stroke: currentColor; stroke-width: 2; transition: all var(--transition-base); }
.option-btn.active svg { stroke: var(--color-gold); }
.option-btn span { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; }

.slider-control { margin-bottom: var(--space-md); }
.slider-control:last-child { margin-bottom: 0; }
.slider-label { display: flex; justify-content: space-between; margin-bottom: var(--space-xs); font-size: 0.85rem; color: var(--color-text-muted); }
.slider-value { color: var(--color-gold); font-weight: 600; }

input[type="range"] { width: 100%; height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; outline: none; -webkit-appearance: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; background: var(--color-gold); border-radius: 50%; cursor: pointer; transition: transform 0.2s ease; }
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }

.color-options { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.color-swatch { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; transition: all var(--transition-base); border: 2px solid transparent; }
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--color-gold); }

.fin-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); }
.fin-btn { padding: var(--space-sm); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-base); color: var(--color-text); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; text-align: center; }
.fin-btn:hover { border-color: rgba(184, 160, 36, 0.4); }
.fin-btn.active { border-color: var(--color-gold); background: rgba(184, 160, 36, 0.1); color: var(--color-gold); }

.summary-btn { width: 100%; padding: var(--space-md); background: var(--color-gold); color: #1a1a1a; border: none; border-radius: var(--radius-md); font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: all var(--transition-base); margin-top: var(--space-lg); }
.summary-btn:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(184, 160, 36, 0.3); }

.stringer { stroke: rgba(139, 90, 43, 0.6); stroke-width: 1.5; }
.board-preview:hover .board-svg { transform: perspective(1000px) rotateY(-5deg); }

.experimental-badge { position: absolute; top: var(--space-md); right: var(--space-md); background: linear-gradient(135deg, #ff6b6b 0%, #ffa502 100%); color: #fff; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }

/* --------------------------------------------------------------------------
   16. Follow Page — Smash Balloon dark-theme overrides
   -------------------------------------------------------------------------- */

/* Feed wrapper */
.sb-feed-container {
    margin: var(--space-lg) 0;
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Strip the plugin's white background */
#sb_instagram,
#sb_instagram .sbi_inner,
.sbi_header_img_wrap,
.sbi_bio_wrap {
    background: transparent !important;
}

/* Remove default white card bg on each photo */
#sb_instagram .sbi_photo_wrap {
    background: transparent !important;
}

/* Rounded photo corners */
#sb_instagram .sbi_photo img {
    border-radius: var(--radius-sm);
    transition: transform var(--transition-base), opacity var(--transition-base);
}

#sb_instagram .sbi_photo_wrap:hover img {
    transform: scale(1.04);
    opacity: 0.85;
}

/* Hide the plugin's own header since we have our own */
#sb_instagram .sbi_header {
    display: none !important;
}

/* Load more button */
#sb_instagram .sbi_load_btn {
    background: transparent !important;
    border: 1px solid rgba(184, 160, 36, 0.5) !important;
    color: var(--color-gold) !important;
    font-family: var(--font-primary) !important;
    font-weight: var(--font-weight-bold) !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border-radius: var(--radius-md) !important;
    transition: all var(--transition-base) !important;
    padding: var(--space-sm) var(--space-lg) !important;
}

#sb_instagram .sbi_load_btn:hover {
    background: var(--color-gold) !important;
    color: #1a1a1a !important;
    border-color: var(--color-gold) !important;
}

/* --------------------------------------------------------------------------
   16b. Follow (Instagram) Page — profile header & CTA
   -------------------------------------------------------------------------- */
.instagram-embed-wrapper { background: linear-gradient(145deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 2rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); }

.instagram-profile-header { display: flex; align-items: center; gap: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 1.5rem; }

.profile-avatar { width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); padding: 4px; flex-shrink: 0; }
.profile-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background-color: #2d3436; }

.profile-details { flex: 1; }
.profile-details h2 { color: #fff; font-size: 1.5rem; margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.5rem; }
.verified-badge { width: 18px; height: 18px; fill: #3897f0; }
.profile-handle { color: #b0b0b0; font-size: 1rem; margin-bottom: 0.75rem; }
.profile-bio { color: #e8e8e8; font-size: 0.95rem; line-height: 1.5; }

.follow-button { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color: white; padding: 0.75rem 2rem; border-radius: 8px; font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; transition: transform 0.3s ease, box-shadow 0.3s ease; text-decoration: none; display: inline-block; flex-shrink: 0; }
.follow-button:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(225, 48, 108, 0.4); }

.posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 1.5rem; border-radius: 8px; overflow: hidden; }
.post-item { aspect-ratio: 1; position: relative; overflow: hidden; background: rgba(0,0,0,0.3); }
.post-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.post-item:hover img { transform: scale(1.08); }
.post-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.post-item:hover .post-overlay { opacity: 1; }
.post-stats { display: flex; gap: 1.5rem; color: white; font-weight: 600; }
.post-stats span { display: flex; align-items: center; gap: 0.4rem; }

.view-profile-cta { text-align: center; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.view-profile-cta p { color: #b0b0b0; margin-bottom: 1rem; font-size: 0.95rem; }

.instagram-btn { display: inline-flex; align-items: center; gap: 0.75rem; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color: white; padding: 1rem 2rem; border-radius: 12px; font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; transition: transform 0.3s ease, box-shadow 0.3s ease; text-decoration: none; }
.instagram-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(225, 48, 108, 0.5); }
.instagram-btn svg { width: 24px; height: 24px; }

/* --------------------------------------------------------------------------
   17. Blog — Listing (home.php)
   -------------------------------------------------------------------------- */
.blog-section {
    padding: var(--space-lg) var(--space-md);
    max-width: 1200px;
    margin: 0 auto;
}

.blog-header {
    text-align: center;
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.blog-header h1 {
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-white);
    margin-bottom: var(--space-xs);
}

.blog-header p {
    color: var(--color-text-muted);
    font-size: 1rem;
    letter-spacing: 0.05em;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.blog-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-4px);
    border-color: rgba(184, 160, 36, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.blog-card-image {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-base);
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.04);
}

.blog-card-content {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    flex-wrap: wrap;
}

.blog-date {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.blog-cat {
    font-size: 0.7rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #1a1a1a;
    background: var(--color-gold);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-base), color var(--transition-base);
    text-decoration: none;
}

.blog-cat:hover {
    background: var(--color-white);
    color: #1a1a1a;
}

.blog-card-title {
    font-size: 1.2rem;
    margin-bottom: var(--space-sm);
    line-height: 1.4;
}

.blog-card-title a {
    color: var(--color-white);
    text-decoration: none;
    transition: color var(--transition-base);
}

.blog-card-title a:hover { color: var(--color-gold); }

.blog-card-excerpt {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: var(--space-md);
    flex: 1;
}

.blog-read-more {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.8rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-gold);
    border-bottom: 1px solid rgba(184, 160, 36, 0.4);
    padding-bottom: 2px;
    transition: color var(--transition-base), border-color var(--transition-base);
    text-decoration: none;
}

.blog-read-more:hover {
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.4);
}

.blog-pagination {
    text-align: center;
    margin-top: var(--space-xl);
}

.blog-pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-sm);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: all var(--transition-base);
}

.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers.current {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: #1a1a1a;
}

.blog-empty {
    text-align: center;
    padding: var(--space-xl);
    color: var(--color-text-muted);
    font-size: 1rem;
    letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   18. Blog — Single Post (single.php)
   -------------------------------------------------------------------------- */
article.single-post {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--space-md) var(--space-xl);
}

.single-post-hero {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: var(--space-xl);
    max-height: 500px;
    overflow: hidden;
}

.single-post-hero img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}

.single-post-header {
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.single-post-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.back-link {
    font-size: 0.8rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-base);
}

.back-link:hover { color: var(--color-gold); }

.single-date {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.single-post-title {
    font-size: 2.8rem;
    color: var(--color-white);
    line-height: 1.2;
    margin-bottom: var(--space-md);
    letter-spacing: -0.01em;
}

.single-post-cats {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Post body content typography
   -------------------------------------------------------------------------- */
.single-post-content {
    font-size: 1.05rem;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.82);
}

.single-post-content p {
    margin-bottom: 1.5em;
}

.single-post-content h2 {
    color: var(--color-white);
    font-size: 1.8rem;
    margin: 2em 0 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.single-post-content h3 {
    color: var(--color-gold);
    font-size: 1.2rem;
    margin: 1.5em 0 0.5em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.single-post-content h4 {
    color: var(--color-white);
    font-size: 1rem;
    margin: 1.5em 0 0.5em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.single-post-content a {
    color: var(--color-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-base);
}

.single-post-content a:hover { color: var(--color-white); }

.single-post-content img {
    width: 100%;
    border-radius: var(--radius-md);
    margin: var(--space-lg) 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.single-post-content blockquote {
    margin: var(--space-lg) 0;
    padding: var(--space-md) var(--space-lg);
    border-left: 3px solid var(--color-gold);
    background: rgba(184, 160, 36, 0.05);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
    font-size: 1.15rem;
    color: var(--color-white);
    line-height: 1.7;
}

.single-post-content ul,
.single-post-content ol {
    padding-left: 1.5em;
    margin-bottom: 1.5em;
}

.single-post-content li { margin-bottom: 0.5em; }

.single-post-content hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: var(--space-xl) 0;
}

/* Prev / Next navigation */
.post-navigation {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
}

.post-nav-prev,
.post-nav-next {
    flex: 1;
    min-width: 0;
}

.post-nav-next { text-align: right; }

.post-navigation a {
    font-size: 0.85rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-base);
    display: inline-block;
    max-width: 100%;
    line-height: 1.4;
}

.post-navigation a:hover { color: var(--color-gold); }

/* --------------------------------------------------------------------------
   YouTube Embeds (injected by cleanup.js)
   -------------------------------------------------------------------------- */
.yt-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    margin: var(--space-lg) 0;
    background: #000;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.yt-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --------------------------------------------------------------------------
   Instagram Setup Notice (shown when Smash Balloon not active)
   -------------------------------------------------------------------------- */
.instagram-setup-notice {
    max-width: 540px;
    margin: var(--space-xl) auto;
    padding: var(--space-xl) var(--space-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    text-align: center;
}

.setup-ig-icon {
    width: 48px;
    height: 48px;
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.instagram-setup-notice h3 {
    font-size: 1.1rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #e8e8e8;
    margin-bottom: 0.5em;
}

.instagram-setup-notice p {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-bottom: var(--space-md);
}

.setup-steps {
    text-align: left;
    color: var(--color-text);
    font-size: 0.85rem;
    line-height: 1.7;
    margin: 0 auto var(--space-lg);
    max-width: 380px;
    padding-left: 1.25em;
}

.setup-steps li { margin-bottom: 0.3em; }

/* --------------------------------------------------------------------------
   Comments Section (archived comments styled as cards via comments.js)
   -------------------------------------------------------------------------- */
.comments-section {
    max-width: 760px;
    margin: var(--space-xl) auto 0;
    padding: var(--space-xl) var(--space-lg) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.comments-heading {
    font-size: 0.8rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}

.comment-card {
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    padding: 0.6em 0 0.6em var(--space-md);
    margin-bottom: var(--space-md);
}

.comment-card:last-child { margin-bottom: 0; }

.comment-header {
    display: flex;
    align-items: baseline;
    gap: 0.8em;
    margin-bottom: 0.4em;
    flex-wrap: wrap;
}

.comment-author {
    font-size: 0.8rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #e8e8e8;
}

.comment-date {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.comment-body {
    font-size: 0.9rem;
    color: var(--color-text);
    line-height: 1.65;
}

.comment-body p {
    margin: 0 0 0.4em;
}

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

/* --------------------------------------------------------------------------
   19. Story Page V2 — Immersive Full-Screen Sections
   -------------------------------------------------------------------------- */
.immersive-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.immersive-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 100%);
    z-index: 1;
}

.immersive-section .bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.6;
    transform: scale(1.1);
    transition: transform 8s ease-out;
}

.immersive-section:hover .bg-image {
    transform: scale(1);
}

.section-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: var(--space-xl);
}

.section-content.right {
    margin-left: auto;
    text-align: right;
}

.section-number {
    font-size: 8rem;
    font-weight: bold;
    color: rgba(184, 160, 36, 0.2);
    line-height: 1;
    margin-bottom: -2rem;
}

.section-content h2 {
    font-size: 3rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-md);
    position: relative;
}

.section-content h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 80px;
    height: 4px;
    background: var(--color-gold);
}

.section-content.right h2::after {
    left: auto;
    right: 0;
}

.section-content p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.9;
    margin-top: var(--space-lg);
}

.section-content .highlight {
    color: var(--color-gold);
    font-weight: 600;
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    animation: bounce 2s infinite;
}

.scroll-indicator::after {
    content: '↓';
    display: block;
    font-size: 1.5rem;
    margin-top: 5px;
}

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

.quote-section {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    padding: var(--space-xl);
    text-align: center;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.big-quote {
    max-width: 900px;
    font-size: 2rem;
    font-style: italic;
    color: #fff;
    line-height: 1.6;
    position: relative;
}

.big-quote::before {
    content: '\201C';
    font-size: 10rem;
    position: absolute;
    top: -60px;
    left: -40px;
    color: rgba(184, 160, 36, 0.2);
    font-family: Georgia, serif;
    line-height: 1;
}

.quote-author {
    display: block;
    margin-top: var(--space-lg);
    color: var(--color-gold);
    font-style: normal;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   20. Boards Page V3 — Editorial / Magazine Layout
   -------------------------------------------------------------------------- */
.editorial-hero {
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    max-width: 900px;
    margin: 0 auto;
}

.editorial-hero h1 {
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--space-md);
}

.editorial-hero .subtitle {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    line-height: 1.8;
    margin-bottom: var(--space-lg);
}

.editorial-hero .motto {
    display: inline-block;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.85rem;
}

.full-width-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    margin: var(--space-lg) 0;
    display: block;
}

.editorial-section {
    max-width: 800px;
    margin: 0 auto var(--space-xl);
    padding: 0 var(--space-md);
}

.section-label {
    display: inline-block;
    background: var(--color-gold);
    color: #1a1a1a;
    padding: 0.3em 1em;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-md);
}

.section-title {
    font-size: 2rem;
    margin-bottom: var(--space-md);
    line-height: 1.2;
}

.section-intro {
    font-size: 1.15rem;
    color: var(--color-text);
    line-height: 1.9;
    margin-bottom: var(--space-lg);
}

.image-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    margin: var(--space-lg) 0;
}

.image-row img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    display: block;
}

.pull-quote {
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
    border-left: 4px solid var(--color-gold);
    background: rgba(255, 255, 255, 0.03);
}

.pull-quote p {
    font-size: 1.3rem;
    font-style: italic;
    color: var(--color-white);
    line-height: 1.6;
    margin: 0;
}

.pull-quote cite {
    display: block;
    margin-top: var(--space-sm);
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-style: normal;
}

.board-category {
    max-width: 1080px;
    margin: 0 auto clamp(4rem, 7vw, 6rem);
    padding: 0 var(--space-md);
}

.board-category + .board-category {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: clamp(3rem, 5vw, 4.5rem);
}

.board-category .section-intro,
.board-category .pull-quote {
    max-width: 720px;
}

.materials-feature {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.015) 100%);
    padding: var(--space-xl);
    margin: var(--space-xl) 0;
    text-align: center;
}

.materials-feature h2 {
    color: var(--color-white);
    font-size: 1.8rem;
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.materials-feature p {
    max-width: 700px;
    margin: 0 auto;
    color: var(--color-text);
    line-height: 1.9;
    font-size: 1.05rem;
}

.cta-section {
    text-align: center;
    padding: var(--space-xl);
    background: rgba(255, 255, 255, 0.03);
}

.cta-section h2 { font-size: 1.8rem; margin-bottom: var(--space-sm); }

.cta-section p {
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.cta-section a {
    display: inline-block;
    padding: var(--space-sm) var(--space-lg);
    background: var(--color-gold);
    color: #1a1a1a;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    text-decoration: none;
}

.cta-section a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(184, 160, 36, 0.3);
}

/* --------------------------------------------------------------------------
   21. Boards Page V11 — Unified Model Entries
   -------------------------------------------------------------------------- */
.model-entry {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    column-gap: clamp(2rem, 4vw, 3rem);
    row-gap: var(--space-md);
    align-items: start;
    /* The gap BETWEEN models must clearly exceed any gap WITHIN one, or the
       entries read as a continuous wall instead of discrete units. Internal
       gaps top out at 1.5rem, so this is a ~3x differential. */
    margin-bottom: clamp(3.5rem, 6vw, 5.5rem);
}

/* Containment without cards: a hairline top rule reusing the divider language
   already used between board categories. This groups each model's copy, thumbs
   and photo into one visible unit without wrapping ~20 entries in bordered
   boxes, which would fight the dark editorial look and read as a generic card
   grid. The first entry in a category is skipped so it doesn't double up with
   the section heading rule above it.

   All four adjacency combinations are listed. An earlier version matched only
   same-type siblings (entry+entry, pair+pair), which meant the entry->pair and
   pair->entry boundaries — most of the transitions on this page — got neither
   the rule nor its padding. The result was an audibly uneven cadence: line,
   line, no line, line. Covering every boundary makes the item-level rhythm one
   consistent value instead of two. */
.model-entry + .model-entry,
.model-entry + .model-pair,
.model-pair + .model-entry,
.board-category .model-pair + .model-pair {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: clamp(2.5rem, 4.5vw, 4rem);
}

.model-entry:last-child { margin-bottom: 0; }

.model-entry--media-left { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }

.model-entry--media-left .model-entry-text {
    grid-column: 2;
    grid-row: 1;
}

.model-entry--media-left .model-entry-media {
    grid-column: 1;
    grid-row: 1;
}

/* A short gold kicker anchors the copy to its photo, echoing the gold
   .section-label chips used elsewhere on the page. Quieter than a box, but
   enough to say "this text belongs to this board". */
.model-entry-text h3 {
    font-size: 1.4rem;
    color: var(--color-white);
    margin-bottom: var(--space-sm);
    padding-top: 0.85rem;
    border-top: 2px solid var(--color-gold);
    display: inline-block;
}

.model-entry-text p {
    color: var(--color-text);
    line-height: 1.8;
    font-size: 1rem;
}

.model-entry-media { min-width: 0; }

.board-photo-hero,
.model-entry-thumbs .board-photo-open {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: block;
    overflow: hidden;
    background: #111516;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-sm);
    cursor: zoom-in;
}

.board-photo-hero img,
.model-entry-thumbs .board-photo-open img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 260ms ease;
}

.board-photo-hero { aspect-ratio: 4 / 5; }

.board-photo-open:focus-visible {
    outline: 3px solid var(--color-gold);
    outline-offset: -3px;
    z-index: 2;
}

.model-entry-thumbs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.model-entry-thumbs .board-photo-open { aspect-ratio: 1 / 1; }

.model-entry-viewall {
    display: inline-block;
    margin-top: 0.65rem;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: color 180ms ease;
}

.model-entry-viewall:hover,
.model-entry-viewall:focus-visible {
    color: var(--color-white);
}

/* Desktop editorial balance.
   The media column (4:5 hero + thumb row + "view all") is intrinsically about
   1.75x its own width tall, so it always ran ~500px longer than the 4-6 lines
   of copy beside it, and `align-items: start` dropped all of that slack into a
   hole under the text. Instead of relocating the whitespace, we re-flow the
   media block with `display: contents`: the hero keeps the full width of its
   column and spans the whole row, while the thumbnails and the "view all" link
   drop into the empty space beneath the copy. Nothing moves in the markup, so
   the [data-board-gallery] lightbox wiring is untouched.
   Below 769px the entries collapse to a single column and none of this applies. */
@media (min-width: 769px) {
    /* Exactly three content rows (copy / thumbs / view-all) and no trailing
       spacer. A 4th `1fr` row would add a row-gap below the last link that the
       stretched hero has to cover, putting the two columns out of alignment
       again — the spacer is only needed when the hero sizes itself. */
    .model-entry {
        grid-template-rows: auto auto auto;
    }

    .model-entry > .model-entry-media { display: contents; }

    .model-entry .model-entry-text {
        grid-column: 1;
        grid-row: 1;
    }

    /* No max-width: the thumb row fills the copy column so its right edge lines
       up with the paragraph above it. A narrower cap left a ragged notch to the
       right of the thumbnails, which was the main source of the broken
       silhouette down the left side of the page. */
    .model-entry .model-entry-thumbs {
        grid-column: 1;
        grid-row: 2;
        margin-top: 0;
    }

    .model-entry .model-entry-viewall {
        grid-column: 1;
        grid-row: 3;
        justify-self: start;
        align-self: start;
        margin-top: 0;
    }

    /* The hero spans the whole row and STRETCHES to it, instead of being sized
       by its own 4:5 aspect-ratio. The row is sized by the copy column, so both
       columns terminate on exactly the same line — no jagged bottom edge. The
       img inside is already height:100% + object-fit:cover, so it fills without
       distorting; min-height keeps short entries from cropping to a squat band. */
    .model-entry .board-photo-hero {
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: stretch;
        aspect-ratio: auto;
        /* Floor only — stops a very short entry cropping the photo to a squat
           band. Kept low so it rarely binds; when it does bind (short copy, no
           thumbs) the photo runs slightly past the text, which reads far better
           than a distorted crop. */
        min-height: 18rem;
    }

    .model-entry--media-left .model-entry-text,
    .model-entry--media-left .model-entry-thumbs,
    .model-entry--media-left .model-entry-viewall { grid-column: 2; }

    .model-entry--media-left .board-photo-hero { grid-column: 1; }

    /* Entries with no thumb row have only copy + link in the left column. These
       previously used `1fr auto auto 1fr` to centre the copy, which pushed the
       heading BELOW the top of its own photo and left the text floating in a
       void — the most visibly "off" moment on the page. Aligning to the top
       instead puts the gold kicker level with the top edge of the photo, and
       the stretched hero still lands both columns on the same bottom line. */
    .model-entry:not(:has(.model-entry-thumbs)) {
        grid-template-rows: auto auto;
        row-gap: 0;
    }

    .model-entry:not(:has(.model-entry-thumbs)) .model-entry-text { grid-row: 1; }

    .model-entry:not(:has(.model-entry-thumbs)) .model-entry-viewall {
        grid-row: 2;
        margin-top: 0.65rem;
    }
}

.model-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    column-gap: var(--space-lg);
    row-gap: 2.5rem;
    margin-bottom: clamp(3.5rem, 6vw, 5.5rem);
}

.model-pair:last-child { margin-bottom: 0; }

/* The grid already stretches every mini to the tallest cell in its row, but the
   "view all" link sat directly under a description of whatever length, so the
   links landed at different heights across a row — the last visible instance of
   the ragged-bottom problem. Making each mini a column flex container and
   pushing the link with `margin-top: auto` parks it on the shared bottom edge.
   In the single-column layout below 769px each mini is its own row, so the auto
   margin has no slack to absorb and this degrades to the old behaviour. */
.model-mini {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.model-mini .model-entry-viewall {
    margin-top: auto;
    padding-top: 0.65rem;
    /* Keeps the link (and its focus ring) shrink-to-fit instead of stretching
       to the full column width as a flex item otherwise would. */
    align-self: flex-start;
}

.model-mini .model-entry-media { margin-bottom: var(--space-sm); }

/* Fills its grid cell so the photo's right edge matches the caption below it. */
.model-mini .board-photo-hero { aspect-ratio: 1 / 1; }

.model-mini h4 {
    color: var(--color-white);
    font-size: 1.1rem;
    margin-bottom: var(--space-xs);
}

.model-mini p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
}

.board-lightbox {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    color: var(--color-white);
    background: transparent;
    border: none;
    overflow: hidden;
}

.board-lightbox:not([open]) { display: none; }

.board-lightbox::backdrop {
    background: rgba(5, 7, 8, 0.93);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.board-lightbox[open] .board-lightbox-shell {
    animation: board-lightbox-in 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes board-lightbox-in {
    from { opacity: 0; transform: scale(0.975); }
    to   { opacity: 1; transform: scale(1); }
}

.board-lightbox-shell {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    height: 100%;
    padding: var(--space-sm) clamp(var(--space-sm), 4vw, var(--space-xl)) var(--space-md);
}

.board-lightbox-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-bottom: var(--space-sm);
}

.board-lightbox-heading {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    min-width: 0;
}

.board-lightbox-title {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: clamp(1.05rem, 2.4vw, 1.35rem);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board-lightbox-count {
    flex: none;
    padding: 0.2em 0.7em;
    color: var(--color-gold);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
    border: 1px solid rgba(184, 160, 36, 0.35);
    border-radius: 999px;
}

.board-lightbox-figure {
    min-width: 0;
    min-height: 0;
    margin: 0;
}

.board-lightbox-media {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    place-items: center;
    overflow: hidden;
}

.board-lightbox-media img {
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65);
    transition: opacity 200ms ease;
}

.board-lightbox-media.is-loading img { opacity: 0; }
.board-lightbox-media.is-error img { display: none; }

.board-lightbox-spinner {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 2.4rem;
    height: 2.4rem;
    margin: -1.2rem 0 0 -1.2rem;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-top-color: var(--color-gold);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.board-lightbox-media.is-loading .board-lightbox-spinner {
    opacity: 1;
    animation: board-lightbox-spin 800ms linear infinite;
}

@keyframes board-lightbox-spin {
    to { transform: rotate(360deg); }
}

.board-lightbox-status {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    color: var(--color-text-muted);
    text-align: center;
}

.board-lightbox-media.is-loading .board-lightbox-status { opacity: 0; }

.board-lightbox-status[hidden] { display: none; }

.board-lightbox-fallback {
    display: none;
    margin-top: var(--space-sm);
    color: var(--color-gold);
    text-decoration: underline;
}

.board-lightbox-media.is-error .board-lightbox-fallback { display: block; }

.board-lightbox-button,
.board-lightbox-close {
    display: grid;
    place-items: center;
    padding: 0;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(20, 24, 26, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font: inherit;
    cursor: pointer;
    transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.board-lightbox-close {
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
}

.board-lightbox-button {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 3.1rem;
    height: 3.1rem;
    transform: translateY(-50%);
}

.board-lightbox-previous { left: clamp(var(--space-xs), 2.5vw, var(--space-lg)); }
.board-lightbox-next { right: clamp(var(--space-xs), 2.5vw, var(--space-lg)); }

.board-lightbox-button[hidden] { display: none; }

.board-lightbox-button:hover,
.board-lightbox-button:focus-visible,
.board-lightbox-close:hover,
.board-lightbox-close:focus-visible {
    color: #1a1a1a;
    background: var(--color-gold);
    border-color: var(--color-gold);
    outline: none;
}

.board-lightbox-button:hover,
.board-lightbox-button:focus-visible { transform: translateY(-50%) scale(1.06); }

.board-lightbox-thumbs {
    display: flex;
    gap: 0.55rem;
    justify-self: center;
    max-width: 100%;
    padding-top: var(--space-sm);
    overflow-x: auto;
    scrollbar-width: none;
}

.board-lightbox-thumbs::-webkit-scrollbar { display: none; }

.board-lightbox-thumbs[hidden] { display: none; }

.board-lightbox-thumb {
    flex: none;
    width: 3.4rem;
    height: 3.4rem;
    padding: 0;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-sm, 6px);
    overflow: hidden;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 140ms ease, border-color 140ms ease;
}

.board-lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.board-lightbox-thumb:hover,
.board-lightbox-thumb:focus-visible {
    opacity: 0.85;
    outline: none;
}

.board-lightbox-thumb.is-active {
    opacity: 1;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 1px var(--color-gold);
}

@media (prefers-reduced-motion: reduce) {
    .board-photo-hero img,
    .model-entry-thumbs .board-photo-open img,
    .model-entry-viewall,
    .board-lightbox-media img,
    .board-lightbox-button,
    .board-lightbox-close,
    .board-lightbox-thumb {
        transition: none;
    }

    .board-photo-hero:hover img,
    .model-entry-thumbs .board-photo-open:hover img { transform: none; }

    .board-lightbox[open] .board-lightbox-shell { animation: none; }
}

@media (hover: hover) and (pointer: fine) {
    .board-photo-hero:hover img,
    .model-entry-thumbs .board-photo-open:hover img { transform: scale(1.015); }
}

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .designer-container { grid-template-columns: 1fr; }
    .board-preview { min-height: 500px; }
    .model-entry { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); }
    .model-entry--media-left { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); }
}

@media (max-width: 768px) {
    .blog-grid { grid-template-columns: 1fr; }
    .single-post-title { font-size: 2rem; }
    .single-post-hero img { height: 280px; }
    .post-navigation { flex-direction: column; }
    .post-nav-next { text-align: left; }

    .logo { width: 90%; max-width: 500px; }
    .nav ul { flex-wrap: wrap; }
    .nav ul li a { padding: 0.25em 0.5em; font-size: 0.8rem; }

    .definition-block { margin: var(--space-md); padding: 1em; font-size: 1rem; }
    .photo-gallery { padding: var(--space-md); gap: var(--space-sm); }
    .photo-gallery img:first-child { height: 250px; }

    .timeline::after { left: 20px; }
    .timeline-item { width: 100%; padding-left: 50px; padding-right: var(--space-sm); }
    .timeline-item.left, .timeline-item.right { left: 0; padding-left: 50px; padding-right: var(--space-sm); }
    .timeline-item::after, .timeline-item.left::after, .timeline-item.right::after { left: 11px; right: auto; }
    .timeline-item.left .timeline-content::before, .timeline-item.right .timeline-content::before { left: -20px; right: auto; border-left-color: transparent; border-right-color: rgba(255, 255, 255, 0.12); }

    .boards-grid { grid-template-columns: 1fr; padding: 0 var(--space-sm); }
    .instagram-feed { grid-template-columns: repeat(2, 1fr); }
    .instagram-profile { flex-direction: column; text-align: center; }
    .instagram-follow-btn { margin-left: 0; margin-top: var(--space-sm); }

    .minimal-hero h1 { font-size: 3rem; }
    .chapter { grid-template-columns: 1fr; gap: var(--space-md); }
    .chapter::before { display: none; }
    .chapter-marker { text-align: left; padding-right: 0; display: flex; align-items: center; gap: var(--space-sm); }
    .chapter-marker::after { position: static; }
    .chapter-label { writing-mode: horizontal-tb; transform: none; }
    .chapter-content { padding-left: 0; }
    .chapter-content h2 { font-size: 1.8rem; }
    .stats-row { flex-wrap: wrap; gap: var(--space-md); }
    .stat { flex: 1 1 40%; }
    .manifesto p { font-size: 1.3rem; }

    .instagram-profile-header { flex-direction: column; text-align: center; }
    .profile-avatar { width: 80px; height: 80px; }
    .profile-details h2 { justify-content: center; font-size: 1.3rem; }
    .posts-grid { grid-template-columns: repeat(2, 1fr); }

    /* V2 Immersive Story */
    .section-number { font-size: 5rem; }
    .section-content h2 { font-size: 2rem; }
    .section-content p { font-size: 1rem; }
    .section-content { padding: var(--space-lg); }
    .section-content.right { margin-left: 0; text-align: left; }
    .section-content.right h2::after { left: 0; right: auto; }
    .big-quote { font-size: 1.3rem; }
    .big-quote::before { font-size: 6rem; top: -40px; left: -20px; }

    /* V3 Editorial Boards */
    .editorial-hero h1 { font-size: 2rem; }
    .image-row { grid-template-columns: 1fr; }
    .image-row img { height: 250px; }
    .full-width-image { height: 250px; }

    /* V11 Unified Model Entries */
    .board-category { padding-inline: var(--space-sm); }
    .model-entry,
    .model-entry--media-left { grid-template-columns: minmax(0, 1fr); }
    .model-entry--media-left .model-entry-text,
    .model-entry--media-left .model-entry-media {
        grid-column: auto;
        grid-row: auto;
    }
    .model-pair { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {
    .board-lightbox-shell { padding-inline: var(--space-sm); }
    .board-lightbox-button {
        width: 2.6rem;
        height: 2.6rem;
        background: rgba(13, 16, 17, 0.82);
    }
    .board-lightbox-thumb { width: 2.8rem; height: 2.8rem; }
}

@media (max-width: 480px) {
    html { font-size: 14px; }
    .logo { width: 95%; }
    .landing-logo { width: 95%; }
    .landing-caption { font-size: 0.85rem; text-align: center; }
    .nav ul li a { padding: 0.25em 0.5em; font-size: 0.7rem; letter-spacing: 0.05em; }
    .photo-gallery img { height: 200px; }
    .photo-gallery img:first-child { height: 200px; }
    .board-card img { height: 220px; }
    .definition-block { font-size: 0.9rem; }
    .timeline-content h3 { font-size: 1rem; }
    .timeline-content p { font-size: 0.9rem; }
    .instagram-feed { grid-template-columns: repeat(2, 1fr); gap: 2px; }
    .instagram-avatar { width: 60px; height: 60px; }
    .options-grid { grid-template-columns: 1fr; }
    .fin-options { grid-template-columns: repeat(2, 1fr); }
    .posts-grid { grid-template-columns: repeat(2, 1fr); gap: 2px; }
    .profile-avatar { width: 70px; height: 70px; }
}

/* ==========================================================================
   18. v17 — Fixed Nav Bar (sitewide) + "Immersive Chapters" Homepage
   --------------------------------------------------------------------------
   Everything in section 18.4 and below is scoped to `body.home` on purpose:
   the 100svh full-bleed sections, the film-grain overlay and scroll-snap must
   not leak onto the interior pages. Sections 18.1-18.3 ARE sitewide.
   ========================================================================== */

/* --------------------------------------------------------------------------
   18.1 Additional design tokens
   (Reuses --color-gold / --color-sand / --color-foam / --color-driftwood.)
   -------------------------------------------------------------------------- */
:root {
    --f-display: "Fraunces", Georgia, 'Times New Roman', serif;
    --f-body: "Archivo", -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --f-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --ink: #14181a;
    --gold-bright: #d8bf46;

    --nav-h: 76px;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* --------------------------------------------------------------------------
   18.2 Fixed header bar (sitewide)
   -------------------------------------------------------------------------- */
header.site-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--nav-h);
    z-index: 50;
    display: flex;
    align-items: center;
    /* No mark in the bar any more — the links sit alone against the right edge.
       The burger is `order: 1` on mobile so it also lands on the right. */
    justify-content: flex-end;
    padding: 0 clamp(18px, 4vw, 54px);
    text-align: left;
    background-color: transparent;
    border-bottom: 1px solid transparent;
    transition: border-color 0.5s var(--ease);
}

/* The translucent/blurred panel lives on a pseudo-element, NOT on the bar
   itself. A non-none `backdrop-filter` turns an element into the containing
   block for its fixed-position descendants, which would trap the full-screen
   mobile menu (`nav.links { position: fixed; inset: 0 }`) inside the 64px bar. */
header.site-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: rgba(20, 24, 26, 0);
    transition: background-color 0.5s var(--ease);
}

header.site-bar.solid { border-bottom-color: rgba(184, 160, 36, 0.22); }

header.site-bar.solid::before {
    background-color: rgba(20, 24, 26, 0.82);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
}

/* Interior pages have no hero to sit over, so the bar is opaque from the top. */
body:not(.home) header.site-bar { border-bottom-color: rgba(184, 160, 36, 0.22); }

body:not(.home) header.site-bar::before {
    background-color: rgba(20, 24, 26, 0.9);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
}

/* The bar is out of flow, so every page except the homepage needs the height
   back. The homepage hero deliberately sits underneath it. The landing page
   template never renders the bar at all. */
body:not(.home):not(.landing-page) { padding-top: var(--nav-h); }

/* --- Page crest: the full circular badge on interior pages --- */
.page-crest {
    text-align: center;
    padding: clamp(2rem, 5vw, 3.4rem) var(--space-md) clamp(1rem, 2.5vw, 1.8rem);
}

.page-crest a {
    display: inline-block;
    line-height: 0;
}

.crest-mark {
    width: clamp(180px, 26vw, 300px);
    height: auto;
    max-width: 100%;
    margin: 0 auto;
    /* The SVG ships gold already — no recolour filter, unlike the old .logo rule. */
    filter: drop-shadow(0 6px 26px rgba(0, 0, 0, 0.45));
    transition: transform var(--transition-base);
}

.page-crest a:hover .crest-mark { transform: scale(1.02); }

.page-crest a:focus-visible {
    outline: 3px solid var(--color-gold);
    outline-offset: 6px;
}

/* --- Menu (rendered by Iconoclast_Nav_Walker / iconoclast_fallback_nav) --- */
nav.nav.links {
    padding: 0;
    background-color: transparent;
    flex: 1 1 auto;
    min-width: 0;
}

nav.links > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: clamp(12px, 2.4vw, 38px);
}

nav.links > ul > li { position: relative; }

nav.links > ul > li > a {
    font-family: var(--f-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-foam);
    display: block;
    position: relative;
    padding: 6px 0;
    opacity: 0.85;
    white-space: nowrap;
    transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
}

nav.links > ul > li > a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    height: 1px;
    width: 0;
    background-color: var(--gold-bright);
    transition: width 0.35s var(--ease);
}

nav.links > ul > li > a:hover { opacity: 1; color: var(--color-foam); }
nav.links > ul > li > a:hover::after { width: 100%; }

nav.links > ul > li > a.active { opacity: 1; color: var(--gold-bright); }
nav.links > ul > li > a.active::after { width: 100%; }

/* Dropdowns hang off the right edge now that the menu is right-aligned. */
nav.links ul li.dropdown .dropdown-menu {
    left: auto;
    right: 0;
    transform: none;
}

.site-bar .burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 8px;
    z-index: 3;
}

.site-bar .burger span {
    display: block;
    width: 26px;
    height: 2px;
    background-color: var(--color-foam);
    /* The bar is transparent over the hero, and the top of that photo is bright
       sunrise sky — pale bars vanish against it. A shadow keeps the control
       legible over any image without adding a visible plate behind it. */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

@media (max-width: 860px) {
    :root { --nav-h: 64px; }

    .site-bar .burger { display: flex; }
    .site-bar .burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .site-bar .burger.open span:nth-child(2) { opacity: 0; }
    .site-bar .burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    nav.nav.links {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow-y: auto;
        background-color: rgba(20, 24, 26, 0.97);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transform: translateY(-100%);
        transition: transform 0.5s var(--ease);
    }

    nav.nav.links.open { transform: none; }

    nav.links > ul {
        flex-direction: column;
        justify-content: center;
        flex-wrap: wrap;
        gap: 26px;
    }

    nav.links > ul > li { text-align: center; }
    nav.links > ul > li > a { font-size: 16px; }

    /* Sub-items stack inline inside the overlay instead of floating. */
    nav.links ul li.dropdown .dropdown-menu {
        display: block;
        position: static;
        left: auto; right: auto;
        transform: none;
        min-width: 0;
        margin-top: 10px;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
}

/* --------------------------------------------------------------------------
   18.3 Footer type refresh (sitewide)
   -------------------------------------------------------------------------- */
footer {
    border-top: 1px solid rgba(184, 160, 36, 0.2);
    padding: var(--space-lg) var(--space-md);
}

footer p { font-family: var(--f-body); }

.footer-motto {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.4;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--color-sand);
    margin-bottom: var(--space-xs);
}

.footer-credit {
    font-family: var(--f-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-driftwood);
    margin-top: var(--space-sm);
}

.footer-links a { font-family: var(--f-body); letter-spacing: 0.08em; }

/* ==========================================================================
   18.4 HOMEPAGE ONLY — everything below is scoped to body.home
   ========================================================================== */
body.home {
    font-family: var(--f-body);
    background-color: var(--ink);
    color: var(--color-foam);
    line-height: 1.55;
    overflow-x: hidden;
    /* Scroll snap that guides but never traps. */
    scroll-snap-type: y proximity;
}

/* Cinematic film grain overlay */
body.home::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 60;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.home .home-main { padding: 0; flex: 1 1 auto; }

/* --- Scroll progress bar --- */
body.home #progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0;
    z-index: 70;
    background: linear-gradient(90deg, var(--color-gold), var(--gold-bright));
    box-shadow: 0 0 12px rgba(216, 191, 70, 0.6);
    transition: width 0.1s linear;
}

/* --- Side progress rail --- */
body.home .rail {
    position: fixed;
    top: 50%;
    right: 26px;
    transform: translateY(-50%);
    z-index: 45;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-end;
}

body.home .rail button {
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--color-foam);
    opacity: 0.5;
    transition: opacity 0.35s var(--ease);
}

body.home .rail button:hover { opacity: 0.95; }
body.home .rail button.active { opacity: 1; }

body.home .rail .r-label {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    text-align: right;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
    transition: max-width 0.4s var(--ease), opacity 0.3s var(--ease);
}

body.home .rail button:hover .r-label,
body.home .rail button.active .r-label { max-width: 160px; opacity: 0.95; }

body.home .rail .r-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid var(--color-foam);
    position: relative;
    flex: none;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
    transition: 0.35s var(--ease);
}

body.home .rail button.active .r-dot {
    background-color: var(--gold-bright);
    border-color: var(--gold-bright);
    box-shadow: 0 0 0 4px rgba(216, 191, 70, 0.22), 0 1px 5px rgba(0, 0, 0, 0.55);
}

/* --- Section base --- */
body.home section.snap {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    scroll-snap-align: start;
    overflow: hidden;
    display: flex;
}

body.home .media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

body.home .media img,
body.home .media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Ken Burns slow drift — applied when the section is active */
body.home .kb { transform: scale(1.08); transition: transform 9s ease-out; }
body.home section.in .kb { transform: scale(1.16); }

body.home .scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* --- Hero --- */
/* Badge sits top-left. The nav bar is transparent over the hero and carries no
   mark of its own now, so the badge occupies that corner instead. */
body.home #hero { align-items: flex-start; justify-content: flex-start; }

body.home #hero .scrim {
    background:
        radial-gradient(120% 90% at 50% 46%, rgba(20, 24, 26, 0) 30%, rgba(20, 24, 26, 0.55) 100%),
        linear-gradient(180deg, rgba(20, 24, 26, 0.55) 0%, rgba(20, 24, 26, 0) 26%, rgba(20, 24, 26, 0) 55%, rgba(20, 24, 26, 0.85) 100%);
}

body.home .hero-core {
    position: relative;
    z-index: 2;
    text-align: left;
    /* Clears the fixed bar, then shares the chapters' left margin — the same
       margin the "Begin" cue uses at the bottom of the hero. */
    padding: calc(var(--nav-h) + clamp(14px, 3vh, 40px)) clamp(22px, 7vw, 110px) 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Wrapper carries the warm radial bloom behind the badge and is the element the
   scroll script transforms; the badge itself owns the load-in keyframe. */
body.home .hero-logo-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
    margin: 0;
}

body.home .hero-logo-wrap::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 180%; height: 180%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle, rgba(216, 191, 70, 0.22) 0%, rgba(216, 191, 70, 0.1) 38%, transparent 65%),
        radial-gradient(circle, rgba(20, 24, 26, 0.58) 0%, rgba(20, 24, 26, 0.4) 42%, rgba(20, 24, 26, 0.16) 62%, transparent 76%);
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    animation: iconoBloomIn 2s var(--ease) 0.1s forwards;
}

body.home .hero-logo {
    width: min(360px, 58vw);
    height: auto;
    filter: drop-shadow(0 0 50px rgba(216, 191, 70, 0.5)) drop-shadow(0 2px 14px rgba(20, 24, 26, 0.35));
    opacity: 0;
    transform: translateY(28px) scale(0.96);
    animation: iconoHeroIn 1.5s var(--ease) 0.25s forwards;
}

@keyframes iconoHeroIn { to { opacity: 1; transform: none; } }
@keyframes iconoBloomIn { to { opacity: 1; } }

body.home .scroll-cue {
    position: absolute;
    left: clamp(22px, 7vw, 110px);
    bottom: 30px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    opacity: 0;
    animation: iconoHeroIn 1s ease 1.5s forwards;
}

body.home .scroll-cue span {
    font-family: var(--f-mono);
    font-size: 9.5px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--color-sand);
    opacity: 0.8;
}

body.home .scroll-cue .track {
    width: 1px;
    height: 52px;
    background: linear-gradient(var(--gold-bright), transparent);
    position: relative;
    overflow: hidden;
}

body.home .scroll-cue .track::after {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 40%;
    background-color: var(--color-foam);
    animation: iconoCue 1.9s var(--ease) infinite;
}

@keyframes iconoCue {
    0%        { transform: translateY(-100%); }
    60%, 100% { transform: translateY(320%); }
}

/* --- Definition interstitial --- */
body.home #definition {
    align-items: center;
    justify-content: center;
    background-color: var(--ink);
}

body.home #definition .scrim {
    background: linear-gradient(180deg, rgba(20, 24, 26, 0.86), rgba(20, 24, 26, 0.7) 45%, rgba(20, 24, 26, 0.92));
}

body.home #definition .media video { opacity: 0.55; }

body.home .def {
    position: relative;
    z-index: 2;
    max-width: 920px;
    padding: 0 clamp(24px, 6vw, 40px);
    text-align: center;
}

body.home .def .eyebrow {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.44em;
    text-transform: uppercase;
    color: var(--gold-bright);
    margin-bottom: 34px;
}

body.home .def .word {
    font-family: var(--f-display);
    font-weight: 700;
    font-variation-settings: "opsz" 144;
    font-size: clamp(48px, 10.8vw, 138px);
    line-height: 0.94;
    letter-spacing: -0.015em;
    color: var(--color-foam);
}

/* CSS-drawn dot. Fraunces (opsz 144 / wght 700) x-height = .4434em and the
   lowercase "o" spans -.010em..+.4534em, so the optical middle of the lowercase
   letters sits at .2217em above the baseline. The span is empty, so
   vertical-align raises its BOTTOM edge: .2217 - (.1 / 2) = .1717em. */
body.home .def .word .dot {
    display: inline-block;
    width: 0.1em;
    height: 0.1em;
    border-radius: 50%;
    background-color: var(--color-gold);
    vertical-align: 0.17em;
    margin: 0 0.12em;
}

body.home .def .pos {
    display: block;
    margin-top: 16px;
    font-family: var(--f-display);
    font-style: italic;
    font-variation-settings: "opsz" 20;
    font-weight: 400;
    font-size: clamp(14px, 2vw, 20px);
    letter-spacing: 0.03em;
    color: var(--color-driftwood);
}

body.home .def .body {
    margin: 30px auto 0;
    max-width: 640px;
    font-size: clamp(16px, 2.1vw, 20px);
    color: var(--color-sand);
    line-height: 1.7;
}

body.home .def .syn {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 12px;
}

body.home .def .chip {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 8px 15px;
    border: 1px solid rgba(230, 213, 184, 0.28);
    border-radius: 100px;
    color: var(--color-sand);
}

body.home .def .chip.anti { border-color: rgba(184, 160, 36, 0.5); color: var(--gold-bright); }
body.home .def .chip.anti s { text-decoration-color: rgba(216, 191, 70, 0.55); }

/* Reveal utility for the definition children */
body.home .rise {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 1s var(--ease), transform 1s var(--ease);
}

body.home section.in .rise { opacity: 1; transform: none; }
body.home section.in .rise:nth-child(2) { transition-delay: 0.1s; }
body.home section.in .rise:nth-child(3) { transition-delay: 0.22s; }
body.home section.in .rise:nth-child(4) { transition-delay: 0.34s; }
body.home section.in .rise:nth-child(5) { transition-delay: 0.46s; }

/* --- Story chapters ---
   NOTE: `.chapter` is also a page-story.php class (section 13). These rules are
   scoped to body.home and reset the grid geometry that rule set would impose. */
body.home section.snap.chapter {
    align-items: flex-end;
    display: flex;
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

body.home .chapter::before { content: none; }

body.home .chapter .scrim {
    background: linear-gradient(180deg, rgba(20, 24, 26, 0.55) 0%, rgba(20, 24, 26, 0) 30%, rgba(20, 24, 26, 0) 42%, rgba(20, 24, 26, 0.9) 100%);
}

body.home .chapter.dark .scrim {
    background:
        linear-gradient(90deg, rgba(20, 24, 26, 0.9) 0%, rgba(20, 24, 26, 0.35) 55%, rgba(20, 24, 26, 0.1) 100%),
        linear-gradient(180deg, rgba(20, 24, 26, 0.4), rgba(20, 24, 26, 0) 40%, rgba(20, 24, 26, 0.85));
}

body.home .ch-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 clamp(22px, 7vw, 110px) clamp(64px, 10vh, 110px);
    display: flex;
}

body.home .chapter.align-right .ch-inner { justify-content: flex-end; text-align: right; }
body.home .chapter.align-left .ch-inner { justify-content: flex-start; }

body.home .ch-block { max-width: 600px; position: relative; }

body.home .ch-numeral {
    font-family: var(--f-display);
    font-weight: 700;
    font-style: italic;
    font-variation-settings: "opsz" 144;
    font-size: clamp(120px, 25vw, 334px);
    line-height: 0.7;
    letter-spacing: -0.02em;
    color: transparent;
    -webkit-text-stroke: 1.4px rgba(216, 191, 70, 0.6);
    pointer-events: none;
    position: absolute;
    bottom: calc(100% - 0.18em);
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}

body.home .chapter.align-left .ch-numeral { left: -0.04em; }
body.home .chapter.align-right .ch-numeral { right: -0.04em; }
body.home section.in .ch-numeral { opacity: 1; transform: none; }

body.home .ch-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--gold-bright);
    margin-bottom: 18px;
    opacity: 0;
    transform: translateY(24px);
    transition: 0.9s var(--ease);
}

body.home .ch-kicker::before { content: ""; width: 34px; height: 1px; background-color: var(--gold-bright); }
body.home .chapter.align-right .ch-kicker { flex-direction: row-reverse; }

body.home .ch-title {
    font-family: var(--f-display);
    font-weight: 600;
    font-variation-settings: "opsz" 144;
    font-size: clamp(39px, 6.4vw, 85px);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--color-foam);
    margin-bottom: 22px;
    text-shadow: 0 4px 34px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateY(30px);
    transition: 1s var(--ease) 0.08s;
}

body.home .ch-body {
    font-size: clamp(16px, 1.95vw, 19.5px);
    color: var(--color-sand);
    line-height: 1.72;
    max-width: 52ch;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transform: translateY(30px);
    transition: 1s var(--ease) 0.18s;
}

body.home .chapter.align-right .ch-body { margin-left: auto; }

body.home .ch-quote {
    margin: 30px 0 0;
    padding-left: 22px;
    border-left: 2px solid var(--color-gold);
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 500;
    font-variation-settings: "opsz" 36;
    font-size: clamp(18px, 2.3vw, 25px);
    line-height: 1.45;
    color: var(--color-foam);
    opacity: 0;
    transform: translateY(30px);
    transition: 1s var(--ease) 0.28s;
}

body.home .chapter.align-right .ch-quote {
    padding-left: 0;
    padding-right: 22px;
    border-left: 0;
    border-right: 2px solid var(--color-gold);
    margin-left: auto;
}

body.home .ch-quote cite {
    display: block;
    margin-top: 14px;
    font-style: normal;
    font-family: var(--f-body);
    font-variation-settings: normal;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-bright);
}

body.home section.in .ch-kicker,
body.home section.in .ch-title,
body.home section.in .ch-body,
body.home section.in .ch-quote { opacity: 1; transform: none; }

/* --- CTA / boards --- */
body.home #boards { align-items: center; justify-content: center; text-align: center; }

body.home #boards .scrim {
    background: linear-gradient(180deg, rgba(20, 24, 26, 0.72), rgba(20, 24, 26, 0.5) 45%, rgba(20, 24, 26, 0.9));
}

body.home .cta { position: relative; z-index: 2; padding: 0 24px; max-width: 820px; }

body.home .cta .eyebrow {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.44em;
    text-transform: uppercase;
    color: var(--gold-bright);
    margin-bottom: 24px;
}

body.home .cta h2 {
    font-family: var(--f-display);
    font-weight: 600;
    font-variation-settings: "opsz" 144;
    font-size: clamp(41px, 7.6vw, 90px);
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: var(--color-foam);
    margin-bottom: 20px;
    text-shadow: 0 4px 34px rgba(0, 0, 0, 0.5);
}

body.home .cta h2 em { font-style: italic; color: var(--gold-bright); }

body.home .cta p {
    font-size: clamp(16px, 2.1vw, 20px);
    color: var(--color-sand);
    max-width: 560px;
    margin: 0 auto 40px;
    line-height: 1.7;
}

body.home .cta-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

body.home .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 16px 34px;
    border-radius: 100px;
    transition: 0.35s var(--ease);
}

body.home .btn.primary { background-color: var(--color-gold); color: var(--ink); }
body.home .btn.primary:hover {
    background-color: var(--gold-bright);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(184, 160, 36, 0.35);
}

body.home .btn.ghost { border: 1px solid rgba(245, 240, 232, 0.4); color: var(--color-foam); }
body.home .btn.ghost:hover { border-color: var(--gold-bright); color: var(--gold-bright); transform: translateY(-2px); }

/* --- Homepage responsive --- */
@media (max-width: 860px) {
    body.home .rail { display: none; }
    body.home .ch-numeral { font-size: clamp(97px, 34vw, 184px); -webkit-text-stroke-width: 1.1px; }
    body.home .chapter.align-right .ch-inner { text-align: left; justify-content: flex-start; }
    body.home .chapter.align-right .ch-kicker { flex-direction: row; }
    body.home .chapter.align-right .ch-body,
    body.home .chapter.align-right .ch-quote { margin-left: 0; }
    body.home .chapter.align-right .ch-quote {
        padding-left: 22px;
        padding-right: 0;
        border-right: 0;
        border-left: 2px solid var(--color-gold);
    }
    body.home .chapter.align-right .ch-numeral { right: auto; left: -0.02em; }
}

@media (max-width: 480px) {
    body.home .ch-inner { padding-bottom: clamp(54px, 12vh, 90px); }
    body.home .def .syn { gap: 8px; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body.home { scroll-snap-type: none; }

    body.home *,
    body.home *::after,
    body.home *::before {
        animation: none !important;
        transition: none !important;
    }

    body.home .kb,
    body.home section.in .kb { transform: none; }

    body.home .hero-logo,
    body.home .scroll-cue,
    body.home .rise,
    body.home .ch-numeral,
    body.home .ch-kicker,
    body.home .ch-title,
    body.home .ch-body,
    body.home .ch-quote { opacity: 1; transform: none; }

    body.home .hero-logo-wrap::before { opacity: 1; }
    body.home #definition .media video { display: none; }
}

/* --------------------------------------------------------------------------
   18. Contact form (Contact / Follow page)
   -------------------------------------------------------------------------- */
.contact-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 4rem) var(--space-md) clamp(3rem, 6vw, 5rem);
}

.contact-inner { max-width: 780px; }

.contact-section h1 {
    font-family: var(--f-display, inherit);
    font-size: clamp(2rem, 5vw, 3.2rem);
    color: var(--color-white);
    line-height: 1.05;
    margin: var(--space-sm) 0 var(--space-md);
}

.contact-intro {
    color: var(--color-text-muted);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: var(--space-xl);
    max-width: 62ch;
}

/* Feedback banners */
.contact-notice {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-lg);
    line-height: 1.6;
}

.contact-notice--ok {
    background: rgba(184, 160, 36, 0.12);
    border-left: 3px solid var(--color-gold);
    color: var(--color-foam);
}

.contact-notice--ok strong { color: var(--color-white); }
.contact-notice--ok span { color: var(--color-text-muted); font-size: 0.95rem; }

.contact-notice--bad {
    background: rgba(190, 90, 70, 0.14);
    border-left: 3px solid #c0705c;
    color: #f0d8d2;
}

/* Layout */
.contact-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-md);
}

/* A row holding a single field still occupies half the width, so it aligns with
   the column above it instead of stretching the full form width. */
.contact-row--single { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.contact-field {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-md);
    min-width: 0;
}

.contact-field label {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-sand);
    margin-bottom: 0.55rem;
}

.contact-field .req { color: var(--color-gold); }

.contact-field .opt {
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--color-text-muted);
    opacity: 0.75;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    font-family: inherit;
    font-size: 1rem;
    color: var(--color-foam);
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-sm);
    padding: 0.85rem 0.95rem;
    width: 100%;
    transition: border-color var(--transition-base), background var(--transition-base);
}

.contact-field textarea { resize: vertical; min-height: 9rem; line-height: 1.7; }

.contact-field input::placeholder,
.contact-field textarea::placeholder { color: rgba(230, 213, 184, 0.38); }

.contact-field input:hover,
.contact-field select:hover,
.contact-field textarea:hover { border-color: rgba(255, 255, 255, 0.26); }

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    outline: none;
    border-color: var(--color-gold);
    background: rgba(0, 0, 0, 0.32);
    box-shadow: 0 0 0 3px rgba(184, 160, 36, 0.16);
}

.contact-field [aria-invalid="true"] { border-color: #c0705c; }

.contact-err {
    color: #e2a494;
    font-size: 0.85rem;
    margin-top: 0.45rem;
}

/* Honeypot — off-screen rather than display:none, which some bots detect. */
.contact-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-sm);
}

.contact-submit {
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-dark);
    background: var(--color-gold);
    border: 0;
    border-radius: 100px;
    padding: 1rem 2.4rem;
    cursor: pointer;
    transition: transform var(--transition-base), background var(--transition-base);
}

.contact-submit:hover { background: #d8bf46; transform: translateY(-2px); }
.contact-submit:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 3px; }

.contact-smallprint {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    opacity: 0.8;
}

@media (max-width: 680px) {
    .contact-row { grid-template-columns: 1fr; gap: 0; }
    .contact-submit { width: 100%; }
}

/* --------------------------------------------------------------------------
   19. Per-photo credit (homepage only)
   -------------------------------------------------------------------------- */
/* Credits sit on the four photographs the photographer is credited for, rather
   than as one blanket line in the footer. Bottom-left so it never collides with
   the side progress rail (fixed, right edge) and clears the chapter copy, which
   sits above it with its own generous bottom padding. */
body.home .photo-credit {
    position: absolute;
    left: clamp(22px, 7vw, 110px);
    bottom: 10px;
    z-index: 4;
    margin: 0;
    font-family: var(--f-mono, monospace);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-sand);
    opacity: 0.45;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
    pointer-events: none;
}

/* The hero's scroll cue already occupies the bottom-left corner, so the credit
   moves to the opposite side there. The rail starts well above the fold edge. */
body.home #hero .photo-credit {
    left: auto;
    right: clamp(22px, 5vw, 64px);
}

@media (max-width: 768px) {
    body.home .photo-credit { font-size: 8px; letter-spacing: 0.14em; opacity: 0.4; }
}