/**
 * V3 DESIGN SYSTEM - SINGLE SOURCE OF TRUTH
 * 
 * THIS FILE CONTAINS ALL DESIGN TOKENS FOR THE ENTIRE SITE.
 * DO NOT MODIFY WITHOUT TEAM APPROVAL.
 * DO NOT OVERRIDE THESE VALUES IN COMPONENTS.
 * 
 * Rule of 6:
 * - 6 typography sizes
 * - 6 primary accent colors
 * - 6n spacing system
 * - 6 major components per page
 */

:root {
    /* ===== STRUCTURAL COLORS - IMMUTABLE ===== */
    /* Used for backgrounds, borders, and supporting elements */
    --black: #0A0A0B;      /* Primary dark background */
    --darkest: #121212;    /* Darker variant for depth */
    --dark: #303333;       /* Lighter dark for contrast */
    --warm: #797E80;       /* Warm gray for inactive states */
    --cool: #a9b0b2;       /* Cool gray for secondary elements */
    --light: #d1d1d1;      /* Light gray for borders */
    --lightest: #ebebeb;   /* Lightest gray for subtle backgrounds */
    --white: #fafafa;      /* Primary light background */

    /* ===== PRIMARY ACCENT COLORS - IMMUTABLE ===== */
    /* Project and feature-specific accent colors */
    --cyan: #00F7FF;       /* Project 6 (+OT), Home page */
    --blue: #0000FF;       /* Project 2 (4D°), Footer contact */
    --purple: #AA00FF;     /* Project 4 (SAVEFACE) */
    --magenta: #FF00CC;    /* About page, Footer cases menu */
    --pink: #FF0044;       /* Project 3 ([A.I]RBNB) */
    --darkblue: #070733;   /* Project 5 (METIS) */
    --teal: #00B3A3;       /* Home page navigation accent */

    /* Project 1 (HI/I'M A.D) uses --warm as accent */

    /* ===== RGB COLOR VALUES ===== */
    /* For use with rgba() functions */
    --cyan-rgb: 0, 247, 255;
    --blue-rgb: 0, 0, 255;
    --purple-rgb: 170, 0, 255;
    --magenta-rgb: 255, 0, 204;
    --pink-rgb: 255, 0, 68;
    --darkblue-rgb: 7, 7, 51;
    --teal-rgb: 0, 179, 163;
    --warm-rgb: 121, 126, 128;
    --cool-rgb: 48, 51, 51;
    --black-rgb: 10, 10, 11;
    --dark-rgb: 36, 36, 36;
    --light-rgb: 209, 209, 209; /* Corrected: matches --light #d1d1d1 (was 187,187,187 = #BBBBBB) */
    --darkest-rgb: 10, 10, 11;
    --lightest-rgb: 235, 235, 235;
    --white-rgb: 250, 250, 250;

    /* ===== TYPOGRAPHY SIZES - EXACTLY 6 ===== */
    --font-size-super-huge: 4.5rem;    /* 72px - Project numbers, major headings */
    --font-size-huge: 3rem;            /* 48px - Project titles, section headers */
    --font-size-large: 1.1rem;         /* 17.6px - Subtitles, medium headings */
    --font-size-standard: 0.9rem;      /* 14.4px - Body text, regular content */
    --font-size-small: 0.8rem;         /* 12.8px - Labels, secondary text */
    --font-size-specialized: 0.65rem;  /* 10.4px - Tags, captions, tiny text */

    /* START CLEAN-FIX-PHASE8-COLLAPSED-ROUND4-RWLDCRD-TOKEN */
    /* ROUND 4 FIX: New responsive wildcard token for collapsed project column numbers
       Value: 36px (2.25rem) - sits between huge (48px) and large (17.6px)
       Purpose: Responsive XS/SM collapsed project column number sizing
       To revert: Delete this line */
    --font-size-r-wldcrd: 2.25rem;     /* 36px - Responsive wildcard for collapsed columns */
    /* END CLEAN-FIX-PHASE8-COLLAPSED-ROUND4-RWLDCRD-TOKEN */

    /* ===== MARQUEE TYPOGRAPHY - ABOUT PAGE SPECIAL CASE ===== */
    --font-size-marquee-xl: 12rem;     /* 192px - Desktop marquee text */
    --font-size-marquee-lg: 10rem;     /* 160px - Large desktop responsive */
    --font-size-marquee-md: 8rem;      /* 128px - Medium desktop responsive */
    --font-size-marquee-sm: 6rem;      /* 96px - Tablet responsive */
    --font-size-marquee-xs: 4rem;      /* 64px - Mobile responsive */
    --font-size-marquee-xxs: 3rem;     /* 48px - Small mobile responsive */

    /* ===== FONT FAMILIES - ONLY 2 ===== */
    --font-primary: 'Chivo Mono', monospace;
    --font-secondary: 'Helvetica Neue', Arial, sans-serif;

    /* ===== FONT WEIGHTS ===== */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;
    --font-weight-black: 900;

    /* ===== SPACING - STRICT 6n SYSTEM ===== */
    --spacing-6: 6px;
    --spacing-12: 12px;
    --spacing-18: 18px;
    --spacing-24: 24px;
    --spacing-30: 30px;
    --spacing-36: 36px;
    --spacing-42: 42px;
    --spacing-48: 48px;
    --spacing-54: 54px;
    --spacing-60: 60px;
    --spacing-72: 72px;
    --spacing-96: 96px;
    --spacing-126: 126px;   /* 21×6 */
    --spacing-144: 144px;   /* 24×6 */
    --spacing-192: 192px;   /* 32×6 */
    --spacing-240: 240px;   /* 40×6 */
    --spacing-360: 360px;   /* 60×6 */
    --spacing-468: 468px;   /* 78×6 - Project 1 & 2 masonry offset */
    --spacing-480: 480px;   /* 80×6 */
    
    /* Explicit spacing-3 for borders */
    --spacing-3: 3px;       /* 0.5×6 */

    /* ===== TRANSITIONS ===== */
    --transition-fast: 200ms;     /* Instant feedback */
    --transition-light: 300ms;    /* Quick interactions */
    --transition-medium: 600ms;   /* Standard animations */
    --transition-heavy: 1200ms;   /* Major state changes */

    /* ===== EASING FUNCTIONS ===== */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-magnetic: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --easing-concrete: cubic-bezier(0.16, 1, 0.3, 1);  /* Same as ease-out */
    --easing-dramatic: cubic-bezier(0.19, 1, 0.22, 1);  /* For cube rotations */
    --easing-smooth: cubic-bezier(0.22, 1, 0.36, 1);    /* For column transitions */

    /* ===== LAYOUT CONSTANTS ===== */
    --header-height-collapsed: 72px;
    --header-height-expanded: 96px;
    --header-width-collapsed: 30%;
    --header-width-expanded: 100%;
    --footer-height-collapsed: 40px;
    --footer-height-expanded: 88px;
    --nav-instructions-height: 40px;
    --header-height: 72px;  /* Default to collapsed */
    --footer-height: 40px;  /* Default to collapsed */

    /* CLEAN-FIX-PHASE8-ZERO-GAP-TOKENS-START */
    /* Footer Extension height tokens for responsive calculations
       To revert: Delete between START/END markers */
    --ftr-ext-toc-height-xl: 88px;
    --ftr-ext-toc-height-xs: 120px;
    --ftr-ext-preview-cases-xl: 640px;
    --ftr-ext-preview-contact-xl: 480px;
    /* CLEAN-FIX-PHASE8-ZERO-GAP-TOKENS-END */

    /* ===== Z-INDEX SCALE ===== */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    
    /* ===== ANIMATION DURATIONS ===== */
    --anim-instant: 100ms;      /* Instant feedback */
    --anim-quick: 200ms;        /* Quick interactions */
    --anim-standard: 300ms;     /* Standard transitions */
    --anim-smooth: 600ms;       /* Smooth animations */
    --anim-dramatic: 1200ms;    /* Major state changes */
    
    /* ===== ANIMATION EASINGS ===== */
    --ease-sharp: cubic-bezier(0.4, 0, 0.6, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-magnetic: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ===== STANDARD ANIMATION PRESETS ===== */
    --cta-hover-duration: var(--anim-standard);
    --cta-hover-transform: scale(1.1) rotateX(180deg);
    --project-expand-duration: var(--anim-smooth);
    --project-expand-flex: 6;
    --marquee-speed: 50px; /* per second */
    --transition-overlay-duration: 800ms;
    --character-reveal-delay: 15ms;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-notification: 800;
    --z-maximum: 900;
    
    /* ===== COORD SYSTEM VARIABLES ===== */
    --coord-point-size: 4px;
    --coord-line-thickness: 1px;
    --coord-color-primary: var(--lightest);
    --coord-line-color: var(--dark);
    --coord-opacity: 0.6;
    
    /* START CLEAN-FIX-8A-B5-CURSOR-TOKENS
       C4 Module Cursor + T2 Seismic Stamp design tokens
       To revert: Delete between START/END CLEAN-FIX-8A-B5-CURSOR-TOKENS markers */
    /* C4 Module Cursor tokens */
    --cursor-size: 12px;                              /* 2×6n */
    --cursor-inner-size: var(--coord-point-size);     /* 4px from design system */
    --cursor-border-width: var(--coord-line-thickness); /* 1px */
    --cursor-border-color: var(--dark);
    --cursor-fill: rgba(18, 18, 18, 0.2);
    --cursor-color: var(--warm);
    --cursor-trail-max-length: 36px;                  /* 6×6n */
    --cursor-trail-opacity: var(--opacity-subtle);
    --cursor-scanner-opacity: var(--opacity-subtle);
    --cursor-inactivity-timeout: 3000;

    /* T2 Seismic Stamp tokens */
    --touch-stamp-size: 12px;                         /* 2×6n */
    --touch-line-length: 18px;                        /* 3×6n */
    --touch-line-thickness: var(--coord-line-thickness);
    --touch-color: var(--dark);
    --touch-opacity: var(--opacity-medium);
    /* END CLEAN-FIX-8A-B5-CURSOR-TOKENS */

    /* ===== LINE AND BORDER STANDARDS ===== */
    /* Based on footer's proven visual hierarchy */
    --line-wrapper-border: 1px solid var(--dark);
    --line-grid-thickness: 1px;
    --line-grid-color: var(--dark);
    --line-grid-opacity: 0.3;
    
    /* ===== COLLAPSED STATE STANDARDS ===== */
    --collapsed-text-color: var(--lightest);
    --collapsed-bg-color: var(--black);
    --collapsed-border-color: var(--dark);

    /* ===== CLIP-PATH DEFINITIONS ===== */
    /* Reusable angular clip-paths for brutalist aesthetic */
    --clip-angular-subtle: polygon(2% 0, 98% 0, 100% 100%, 0% 100%);
    --clip-angular-medium: polygon(5% 0, 95% 0, 100% 100%, 0% 100%);
    --clip-angular-strong: polygon(8% 0, 92% 0, 100% 100%, 0% 100%);
    --clip-hexagon: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
    /* START CLEAN-FIX-OCTAGON-BALANCED-R4 */
    /* Round 4: Balanced octagon with equal angles and sides (15% inset)
       ORIGINAL (for rollback): polygon(8% 0%, 92% 0%, 100% 25%, 100% 75%, 92% 100%, 8% 100%, 0% 75%, 0% 25%)
       Debug: console.log('[Octagon] Clip-path:', getComputedStyle(el).clipPath) */
    --clip-octagon: polygon(15% 0%, 85% 0%, 100% 15%, 100% 85%, 85% 100%, 15% 100%, 0% 85%, 0% 15%);
    /* END CLEAN-FIX-OCTAGON-BALANCED-R4 */
    --clip-header-collapsed: polygon(0% 0, 100% 0, 92% 100%, 8% 100%);
    --clip-header-expanded: polygon(0% 0, 100% 0, 96% 100%, 4% 100%);
    --clip-footer-collapsed: polygon(8% 0, 92% 0, 100% 100%, 0% 100%);
    --clip-footer-expanded: polygon(4% 0, 96% 0, 100% 100%, 0% 100%);
    
    /* ===== OPACITY SCALE ===== */
    /* Standardized opacity values from header/footer patterns */
    --opacity-minimal: 0.05;    /* Very subtle backgrounds */
    --opacity-subtle: 0.2;      /* Grid lines, connections */
    --opacity-light: 0.24;      /* Accent lines */
    --opacity-soft: 0.3;        /* Module indicators */
    --opacity-medium: 0.48;     /* Dividers */
    --opacity-strong: 0.5;      /* Pulse rings */
    --opacity-default: 0.72;    /* Module indicators default */
    --opacity-heavy: 0.82;      /* Project columns expanded */
    --opacity-full: 1.0;        /* Full opacity, no transparency */
    
    /* ===== LETTER SPACING STANDARDS ===== */
    --letter-spacing-tight: 0.2px;
    --letter-spacing-normal: 0.5px;
    
    /* ===== BOX SHADOW STANDARDS ===== */
    --shadow-module-hover: 0 0 6px rgba(250, 250, 250, 0.16);
    
    /* ===== Z-INDEX EXTENSIONS ===== */
    /* Footer-specific high z-index values */
    --z-footer-base: 999;
    --z-footer-overlay: 1000;
    --z-footer-top: 1001;
    --z-footer-max: 1100;
    
    /* ===== CTA DESIGN SYSTEM STANDARDS ===== */
    /* Reusable CTA component variables for header and footer */
    --cta-padding-x: var(--spacing-12);
    --cta-padding-y: var(--spacing-6);
    --cta-module-size: 32px;
    --cta-module-gap: 10px;
    --cta-cube-height: 24px;
    --cta-cube-min-width: 120px;
    --cta-cube-bg-front: rgba(18, 18, 18, 0.05);
    --cta-cube-bg-back: rgba(18, 18, 18, 0.3);
    --cta-cube-text-color-front: var(--cool);
    --cta-cube-text-color-back: var(--white);
    --cta-cube-border-front: 1px solid rgba(48, 51, 51, 0.05);
    --cta-cube-border-back: 1px solid transparent;
    --cta-text-align: left;
    --cta-text-padding-left: 8px;
    --cta-text-padding-right: 8px;
    --cta-accent-line-height: 1px;
    --cta-accent-line-position: -2px;
    --cta-module-border: 1px solid var(--dark);
    --cta-module-bg: rgba(18, 18, 18, 0.05);
    --cta-transition-duration: var(--transition-medium);
    --cta-transition-easing: cubic-bezier(0.19, 1, 0.22, 1);
    
    /* ===== MOCKUP SYSTEM VARIABLES ===== */
    /* Using proper 6n spacing calculations */
    --mockup-item-gap: calc(var(--spacing-6) * 3);      /* 18px */
    --mockup-column-gap: calc(var(--spacing-6) * 4);    /* 24px */
    --mockup-header-height: calc(var(--spacing-6) * 10); /* 60px */
    --phone-mockup-width: calc(var(--spacing-6) * 30);   /* 180px */
    --phone-mockup-height: calc(var(--spacing-6) * 60);  /* 360px */
    --control-btn-size: calc(var(--spacing-6) * 5);      /* 30px */
    
    /* ===== NAVIGATION INSTRUCTIONS COMPONENT ===== */
    /* Home page navigation hints bar */
    --nav-instructions-bg: var(--white);
    --nav-instructions-border: 1px solid var(--light);
    --nav-label-color: var(--warm);
    --nav-value-color: var(--dark);
    --nav-value-weight: var(--font-weight-bold);
    
    /* ===== SCANNER LINE COMPONENT ===== */
    /* Home page animated scanner */
    --scanner-height: 2px;
    --scanner-duration: 3s;
    --scanner-opacity-max: 0.7;
    
    /* ===== PROJECT COLUMNS - GENERIC ===== */
    /* Shared project column variables */
    --project-column-gap: var(--spacing-12);
    --project-number-size: var(--font-size-super-huge);
    --project-title-size: var(--font-size-huge);
    --project-hover-delay: 800ms;
    --project-transition-duration: 0.45s;
    --project-transition-easing: var(--easing-smooth);
    --project-coord-size: 8px;
    --project-coord-line-width: calc(100% - var(--spacing-6));
    --project-coord-line-height: 1px;
    --project-clip-path: polygon(2% 0, 98% 0, 100% 100%, 0% 100%);
    
    /* ===== PROJECT COLUMNS - COLLAPSED STATE ===== */
    /* Collapsed project column specifics */
    --project-collapsed-padding-y: 45px;
    --project-collapsed-padding-x: 15px;
    --project-collapsed-bg: var(--light);
    --project-collapsed-opacity: var(--opacity-full);
    --project-number-weight: var(--font-weight-black);
    --project-title-weight: var(--font-weight-extra-bold);
    --project-title-container-bottom: 45px;
    
    /* ===== PROJECT COLUMNS - EXPANDED STATE ===== */
    /* Expanded project column specifics */
    --project-expanded-bg: var(--white);
    --project-expanded-opacity: var(--opacity-heavy);
    --project-expanded-padding: 40px;
    --project-info-column-flex: 1;
    --project-mockups-column-width: 400px;

    /* ===== RESPONSIVE DESIGN TOKENS - PHASE 8 ===== */
    /* START CLEAN-FIX-PHASE8-TOKENS */
    /* Breakpoint boundary values for media queries */
    --breakpoint-xs-max: 599px;
    --breakpoint-sm-min: 600px;
    --breakpoint-sm-max: 767px;
    --breakpoint-md-min: 768px;
    --breakpoint-md-max: 991px;
    --breakpoint-lg-min: 992px;
    --breakpoint-lg-max: 1199px;
    --breakpoint-xl-min: 1200px;

    /* Mobile-Specific Spacing (6n compliant) */
    --spacing-mobile-xs: 6px;
    --spacing-mobile-sm: 12px;
    --spacing-mobile-md: 18px;
    --spacing-mobile-lg: 24px;
    --spacing-mobile-xl: 30px;

    /* Tablet-Specific Spacing */
    --spacing-tablet-xs: 12px;
    --spacing-tablet-sm: 18px;
    --spacing-tablet-md: 24px;
    --spacing-tablet-lg: 36px;
    --spacing-tablet-xl: 48px;

    /* START CLEAN-FIX-PHASE8-MODAL-TOKENS */
    /* Additional responsive spacing tokens for modal components */
    /* To revert: Delete everything between START/END CLEAN-FIX-PHASE8-MODAL-TOKENS markers */

    /* Base spacing tokens (numeric naming for clarity) */
    --spacing-6: 6px;        /* Base 1×6 - Used for XS compression */
    --spacing-8: 8px;        /* Non-6n: AUDIT - Replace with 6px or 12px in Phase 8.2 */
    --spacing-10: 10px;      /* Non-6n: AUDIT - Replace with 12px in Phase 8.2 */

    /* Additional mobile spacing tokens (numeric naming matches CSS usage) */
    --spacing-mobile-6: 6px;     /* 1×6 - XS mobile tight spacing */
    --spacing-mobile-8: 8px;     /* Non-6n: AUDIT - MD status icon padding */
    --spacing-mobile-10: 10px;   /* Non-6n: AUDIT - MD status icon gap */
    --spacing-mobile-12: 12px;   /* 2×6 - XS mobile standard */
    --spacing-mobile-18: 18px;   /* 3×6 - XS/SM modal sections */
    --spacing-mobile-20: 20px;   /* Non-6n: AUDIT - SM padding */
    --spacing-mobile-24: 24px;   /* 4×6 - XS button padding */

    /* Additional tablet spacing tokens */
    --spacing-tablet-12: 12px;   /* 2×6 - Checkbox gap */
    --spacing-tablet-18: 18px;   /* 3×6 - SM device status */
    --spacing-tablet-24: 24px;   /* 4×6 - LG/SM footer */
    --spacing-tablet-30: 30px;   /* 5×6 - XL modal sections */
    --spacing-tablet-36: 36px;   /* 6×6 - MD/LG horizontal padding */
    --spacing-tablet-48: 48px;   /* 8×6 - LG horizontal padding */
    --spacing-tablet-60: 60px;   /* 10×6 - XL horizontal padding */
    --spacing-tablet-72: 72px;   /* 12×6 - XL button padding */

    /* Component-specific tokens */
    --checkbox-size-mobile: 18px;  /* 3×6 compliant - Mobile checkbox size */
    --checkbox-size-desktop: 24px; /* 4×6 compliant - Desktop checkbox size */

    /* Modal-specific constraint tokens */
    --modal-max-width: 600px;      /* Tall/thin aesthetic constraint */
    --modal-min-width: 280px;      /* Emergency minimum width */
    /* END CLEAN-FIX-PHASE8-MODAL-TOKENS */

    /* Responsive Font Scales - XS (<600px) */
    --font-xs-super-huge: 3rem;      /* 48px - Mobile super-huge (down from 72px) */
    --font-xs-huge: 2rem;            /* 32px - Mobile huge (down from 48px) */
    --font-xs-large: 1rem;           /* 16px - Mobile large (down from 17.6px) */
    --font-xs-standard: 0.875rem;    /* 14px - Mobile standard (down from 14.4px) */
    --font-xs-small: 0.75rem;        /* 12px - Mobile small (down from 12.8px) */
    --font-xs-specialized: 0.625rem; /* 10px - Mobile specialized (down from 10.4px) */

    /* Responsive Font Scales - SM (600-767px) */
    --font-sm-super-huge: 3.5rem;    /* 56px */
    --font-sm-huge: 2.25rem;         /* 36px */
    --font-sm-large: 1.05rem;        /* 16.8px */
    --font-sm-standard: 0.9rem;      /* 14.4px */
    --font-sm-small: 0.775rem;       /* 12.4px */
    --font-sm-specialized: 0.65rem;  /* 10.4px */

    /* Responsive Font Scales - MD (768-991px) */
    --font-md-super-huge: 4rem;      /* 64px */
    --font-md-huge: 2.75rem;         /* 44px */
    --font-md-large: 1.1rem;         /* 17.6px - same as desktop */
    --font-md-standard: 0.9rem;      /* 14.4px - same as desktop */
    --font-md-small: 0.8rem;         /* 12.8px - same as desktop */
    --font-md-specialized: 0.65rem;  /* 10.4px - same as desktop */

    /* Responsive Font Scales - LG (992-1199px) */
    /* LG uses desktop values, no custom tokens needed */

    /* Touch Targets (iOS/Android minimum recommendations) */
    --touch-target-min: 44px;        /* iOS minimum touch target */
    --touch-target-comfort: 48px;    /* Comfortable touch target (6n compliant) */

    /* Animation Durations for Mobile (reduced for performance) */
    --anim-mobile-instant: 80ms;     /* Faster instant feedback */
    --anim-mobile-quick: 150ms;      /* Faster quick interactions */
    --anim-mobile-standard: 250ms;   /* Faster standard transitions */
    --anim-mobile-smooth: 500ms;     /* Faster smooth animations */
    --anim-mobile-dramatic: 1000ms;  /* Faster major state changes */

    /* Animation Durations for Tablet */
    --anim-tablet-instant: 90ms;
    --anim-tablet-quick: 180ms;
    --anim-tablet-standard: 280ms;
    --anim-tablet-smooth: 550ms;
    --anim-tablet-dramatic: 1100ms;

    /* Responsive Layout Constants */
    --header-height-mobile: 60px;    /* Reduced header for mobile (10×6) */
    --header-height-tablet: 66px;    /* Tablet header (11×6) */
    --footer-height-mobile: 48px;    /* Mobile footer (8×6) */
    --footer-height-tablet: 54px;    /* Tablet footer (9×6) */

    /* Viewport-specific maximum widths */
    --content-max-width-mobile: 100%;
    --content-max-width-tablet: 720px;
    --content-max-width-desktop: 1200px;
    /* END CLEAN-FIX-PHASE8-TOKENS */
}

/* ===== BASE RESETS ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
    color: var(--darkest);
    background-color: var(--white);
    overflow-x: hidden;
}

/* ===== TYPOGRAPHY BASE ===== */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
}

/* ===== REUSABLE COMPONENT CLASSES ===== */

/* Timeline Component */
.v3-timeline {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    padding: var(--spacing-24) 0;
}

.v3-timeline-marker {
    position: relative;
    flex: 1;
    height: 2px;
    background: var(--cool);
    overflow: hidden;
}

.v3-timeline-marker::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: currentColor;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.v3-timeline-marker.active {
    background: currentColor;
}

.v3-timeline-label {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--light);
}

.v3-timeline-label.active {
    color: currentColor;
}

/* Tag Component (Angular Design) */
.v3-tag {
    display: inline-block;
    padding: var(--spacing-6) var(--spacing-12);
    font-size: var(--font-size-specialized);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--white);
    background: currentColor;
    position: relative;
    transition: all var(--transition-light) var(--ease-out);
    cursor: pointer;
    clip-path: var(--clip-octagon);
}

.v3-tag:hover {
    transform: scale(1.05);
    filter: brightness(1.2) drop-shadow(0 0 10px currentColor);
}

.v3-tag-text {
    position: relative;
    z-index: 1;
    mix-blend-mode: exclusion;
}

/* Button Base (Angular Design) */
.v3-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-12) var(--spacing-24);
    font-family: var(--font-primary);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);
    background: transparent;
    border: 1px solid currentColor;
    cursor: pointer;
    transition: all var(--transition-light) var(--ease-out);
    position: relative;
    overflow: hidden;
    clip-path: var(--clip-hexagon);
}

.v3-button:hover {
    transform: scale(1.05);
    background: currentColor;
}

.v3-button:hover span {
    mix-blend-mode: exclusion;
}

/* ===== UTILITY CLASSES ===== */
.v3-no-select {
    user-select: none;
    -webkit-user-select: none;
}

.v3-hidden {
    display: none !important;
}

.v3-invisible {
    visibility: hidden;
}

.v3-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== COORDINATE SYSTEM ===== */
.v3-coord-system {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.v3-coord-point {
    width: 8px;
    height: 8px;
    background: var(--coord-color-primary);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    transition: all var(--transition-light) var(--ease-out);
}

.v3-coord-point.active {
    animation: coord-pulse 2s ease-in-out infinite;
}

.v3-coord-line-x,
.v3-coord-line-y {
    position: absolute;
    background: currentColor;
    opacity: 0.5;
    transition: all var(--transition-light) var(--ease-out);
}

.v3-coord-line-x {
    height: 1px;
    width: 50px;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
}

.v3-coord-line-y {
    width: 1px;
    height: 50px;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.v3-coord-system.active .v3-coord-line-x,
.v3-coord-system.active .v3-coord-line-y {
    opacity: 1;
}

/* ===== ANIMATIONS ===== */
@keyframes coord-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.7;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.v3-will-transform {
    will-change: transform;
}

.v3-gpu {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}


/* ===== MEDIA QUERIES ===== */
/* START CLEAN-FIX-PHASE8-BREAKPOINT-DESIGN-SYSTEM */
/* SM Breakpoint - Updated from 768px to 767px for Phase 8 standardization */
@media (max-width: 767px) {
    :root {
        /* Maintain same sizes but adjust for mobile readability if needed */
        /* DO NOT add new size definitions */
    }
}
/* END CLEAN-FIX-PHASE8-BREAKPOINT-DESIGN-SYSTEM */

/* ====================================================================== */
/* ================= GLOBAL RESET & SCROLLBAR HIDING ==================== */
/* ====================================================================== */

/* Hide default cursor globally */
/* Cursor hiding moved to dedicated section below */

/* Prevent page scrolling */
html, body {
    overflow: hidden;
    height: 100%;
    position: relative;
}

/* Hide scrollbars while maintaining functionality */
::-webkit-scrollbar {
    display: none;
}

/* Firefox */
* {
    scrollbar-width: none;
    -ms-overflow-style: none;  /* IE and Edge */
}

/* ====================================================================== */
/* ====================== CUSTOM CURSOR SYSTEM ========================== */
/* ====================================================================== */

/* START CLEAN-FIX-8A-B5-CURSOR-CSS
   C4 Module Cursor (desktop) + Scanner Lines + Beam Trail + T2 Seismic Stamp (touch)
   + C5 Reduced Motion. Replaces original binary cursor with 4-type content-aware system.
   To revert: Delete between START/END CLEAN-FIX-8A-B5-CURSOR-CSS markers and restore
   original cursor CSS block from git history (commit before B5). */

/* --- Hide default cursor site-wide (activated via JS class) --- */
.cursor-active html,
.cursor-active body,
.cursor-active body *,
.cursor-active button,
.cursor-active a,
.cursor-active input,
.cursor-active select,
.cursor-active textarea {
    cursor: none;
}

/* --- C4 Main cursor element: 12px module container --- */
.geometric-cursor {
    position: fixed;
    width: var(--cursor-size);
    height: var(--cursor-size);
    background: var(--cursor-fill);
    border: var(--cursor-border-width) solid var(--cursor-border-color);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 999999;
    opacity: 0;
    transition: border-color var(--transition-fast) ease,
                border-width var(--transition-fast) ease,
                opacity var(--transition-fast) ease;
    will-change: left, top, opacity;
    /* NO mix-blend-mode — intentionally removed for subtlety */
}

.geometric-cursor.visible {
    opacity: var(--opacity-medium);
}

/* --- Inner coord-diamond (::before) --- */
.geometric-cursor::before {
    content: '';
    position: absolute;
    width: var(--cursor-inner-size);
    height: var(--cursor-inner-size);
    background: var(--cursor-color);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    transition: background-color var(--transition-fast) ease;
}

/* --- Simplified to 2-element cursor (::after removed) --- */
.geometric-cursor::after {
    display: none;
}

/* --- Content-aware state: over text --- */
.geometric-cursor.over-text {
    border-color: var(--cool);
}
.geometric-cursor.over-text::before {
    background: var(--cool);
}

/* --- Content-aware state: over assets (images/video) --- */
.geometric-cursor.over-asset {
    opacity: var(--opacity-minimal);
}

/* --- Content-aware state: over interactive elements --- */
.geometric-cursor.over-interactive {
    border-width: 2px;
    border-color: var(--cyan);
}
.geometric-cursor.over-interactive::before {
    animation: coord-pulse 2s ease-in-out infinite;
}

/* --- Content-aware state: over background/empty --- */
.geometric-cursor.over-background {
    opacity: var(--opacity-medium);
}

/* --- Inactivity fade --- */
.geometric-cursor.inactive {
    opacity: 0;
    transition: opacity var(--transition-medium) ease;
}

/* ============================================================================
   START CLEAN-FIX-P5-S7E-PHASE-CLICK-CURSOR-MORPH (V.5 phase-click PORT 2026-05-02)
   ============================================================================
   V.5 cursor morph for phase-label hover — combined O2 (Accent Telegraph) +
   O3 (Magnetic Compress) per user decision 2026-05-02.

   When V3 cursor hovers .stage-label[data-phase-key]:
     - Cursor SHRINKS 12px → 6px (O3 compress behavior)
     - Border + background fill with project accent color (O2 accent behavior)
     - Inner diamond hidden (no room at 6px size)
     - Differentiates from .over-interactive baseline:
         over-interactive: BIGGER (border-width 2px) + cyan + diamond pulse
         over-phase-label: SMALLER (12→6px) + per-project-accent + no diamond
       Three differentiation axes (size direction, color, internal element).

   Per-project accent set via --phase-accent CSS custom property by
   global-cursor.js contentClassifier extension based on .stage-label's
   closest('.project-column').dataset.index lookup:
     P1=warm, P2=blue, P3=pink, P4=purple, P5=darkblue, P6=cyan

   Companion edits:
     - global-cursor.js — contentClassifier.phaseLabelSelector + cursorSystem
       state-class application (extends existing 4-state over-{text,asset,
       interactive,background} pattern)
     - v3-project-columns-responsive.css CLEAN-FIX-P5-S7E-PHASE-CLICK-DOM-AUGMENT
       block (the cursor: pointer fallback rule remains; the :hover color shift
       was removed since this morph is the primary affordance signal)

   To revert: search marker, delete this CSS block + the global-cursor.js
   phase-label classifier extension + restore the :hover color shift in the
   responsive.css companion block.
   ============================================================================ */
.geometric-cursor.over-phase-label {
    width: 6px;
    height: 6px;
    border-width: 1px;
    border-color: var(--phase-accent, var(--cyan));
    background: var(--phase-accent, var(--cyan));
}
.geometric-cursor.over-phase-label::before {
    display: none;
}
/* END CLEAN-FIX-P5-S7E-PHASE-CLICK-CURSOR-MORPH */

/* --- Scanner Lines: full-viewport crosshairs from cursor position --- */
.cursor-scanner-h {
    position: fixed;
    left: 0;
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--cursor-color) 50%,
        transparent 100%);
    pointer-events: none;
    z-index: 999998;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity var(--transition-fast) ease;
    will-change: top, opacity;
}

.cursor-scanner-v {
    position: fixed;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--cursor-color) 50%,
        transparent 100%);
    pointer-events: none;
    z-index: 999998;
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity var(--transition-fast) ease;
    will-change: left, opacity;
}

.cursor-scanner-h.visible,
.cursor-scanner-v.visible {
    opacity: var(--cursor-scanner-opacity);
}

/* Scanner content-aware dimming */
.cursor-scanner-h.over-asset,
.cursor-scanner-v.over-asset {
    opacity: 0;
}

.cursor-scanner-h.over-interactive,
.cursor-scanner-v.over-interactive {
    opacity: var(--opacity-soft);
}

/* Scanner inactivity */
.cursor-scanner-h.inactive,
.cursor-scanner-v.inactive {
    opacity: 0;
    transition: opacity var(--transition-medium) ease;
}

/* --- Beam Trail: 1px structural beam, 36px max, 6-frame delay --- */
.cursor-trail-beam {
    position: fixed;
    height: 1px;
    background: var(--dark);
    pointer-events: none;
    z-index: 999997;
    opacity: 0;
    transform-origin: left center;
    will-change: left, top, width, transform, opacity;
}

.cursor-trail-beam.visible {
    opacity: var(--cursor-trail-opacity);
}

.cursor-trail-beam.inactive {
    opacity: 0;
    transition: opacity var(--transition-medium) ease;
}

/* Trail content-aware opacity */
.cursor-trail-beam.over-asset {
    opacity: var(--opacity-minimal);            /* 0.05 — barely visible, defers to media */
}

.cursor-trail-beam.over-interactive {
    opacity: calc(var(--opacity-subtle) * 0.6); /* ~0.12 — subtle trace behind active elements */
}

/* --- T2 Seismic Stamp: touch-only 12px stamp + 4 extension lines --- */
.touch-stamp {
    position: fixed;
    width: var(--touch-stamp-size);
    height: var(--touch-stamp-size);
    background: var(--touch-color);
    pointer-events: none;
    z-index: 999999;
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
    transition: transform var(--transition-fast) var(--easing-concrete),
                opacity var(--transition-fast) ease;
    will-change: transform, opacity;
}

/* Stamp impact: scale drops from 2 to 1 — heavy block settling */
.touch-stamp.impact {
    transform: translate(-50%, -50%) scale(1);
    opacity: var(--touch-opacity);
}

/* Stamp release: shrink and fade */
.touch-stamp.releasing {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform var(--transition-fast) var(--easing-concrete),
                opacity var(--transition-fast) ease;
}

/* --- Extension lines: four structural members from stamp edges --- */
.touch-stamp-line {
    position: fixed;
    background: var(--touch-color);
    pointer-events: none;
    z-index: 999998;
    opacity: var(--opacity-soft);
}

/* Horizontal lines (top + bottom): 1px tall, grow width */
.touch-stamp-line-h {
    height: var(--touch-line-thickness);
    width: 0;
    transition: width var(--transition-medium) var(--easing-concrete);
}

.touch-stamp-line-h.extended {
    width: var(--touch-line-length);
}

/* Vertical lines (left + right): 1px wide, grow height */
.touch-stamp-line-v {
    width: var(--touch-line-thickness);
    height: 0;
    transition: height var(--transition-medium) var(--easing-concrete);
}

.touch-stamp-line-v.extended {
    height: var(--touch-line-length);
}

/* Line retract on release */
.touch-stamp-line-h.retracting {
    width: 0;
    transition: width var(--transition-fast) var(--easing-concrete);
}

.touch-stamp-line-v.retracting {
    height: 0;
    transition: height var(--transition-fast) var(--easing-concrete);
}

/* --- C5 Reduced Motion: static diamond only, no animations --- */
@media (prefers-reduced-motion: reduce) {
    .geometric-cursor {
        width: var(--cursor-size);
        height: var(--cursor-size);
        background: var(--cursor-color);
        border: none;
        transform: translate(-50%, -50%) rotate(45deg);
        transition: opacity var(--transition-fast) ease;
        animation: none;
    }

    .geometric-cursor::before,
    .geometric-cursor::after {
        display: none;
    }

    .cursor-scanner-h,
    .cursor-scanner-v,
    .cursor-trail-beam {
        display: none;
    }

    /* Touch stamp: remove scale animation, opacity-only */
    .touch-stamp {
        transform: translate(-50%, -50%);
        transition: opacity var(--transition-fast) ease;
    }

    .touch-stamp.impact {
        transform: translate(-50%, -50%);
    }

    /* No extending lines in reduced motion */
    .touch-stamp-line-h,
    .touch-stamp-line-v {
        display: none;
    }
}
/* END CLEAN-FIX-8A-B5-CURSOR-CSS */

/* ===== GLOBAL MARQUEE PAUSE SYSTEM ===== */
.marquees-paused * {
    animation-play-state: paused !important;
}

/* ========================================
   SHARED EXPAND-HINT BASE
   Content + style rules shared between header and footer expand hints.
   Pattern: Unqualified base class (specificity 0,1,0) → parent-qualified
   overrides in each component file (0,2,0 — always wins).
   Directional properties (position offset, z-index, bounce direction,
   auto-hide slide direction) stay in component files.
   ======================================== */

/* START CLEAN-FIX-8A-B8-SHARED-EXPAND-HINT */
/* To revert: Delete between START/END markers, restore original hint rules
   in header-v3.css and footer-v3.css from git commit before this change */

.expand-hint {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    text-align: center;
    padding: var(--spacing-6) var(--spacing-12);
    background: linear-gradient(to right,
                    rgba(10, 10, 11, 0) 0%,
                    rgba(10, 10, 11, 0.08) 10%,
                    rgba(10, 10, 11, 0.08) 90%,
                    rgba(10, 10, 11, 0) 100%);
    backdrop-filter: blur(var(--spacing-6));
    width: auto;
    white-space: nowrap;
    color: var(--white);
    text-shadow: 0 0 var(--spacing-6) rgba(0, 0, 0, 0.8);
    overflow: visible;
    max-width: 80vw;
    pointer-events: auto;
}

.hint-arrow {
    display: inline-block;
    font-size: var(--font-size-standard);
    color: var(--white);
    transition: transform var(--transition-fast) ease, opacity var(--transition-fast) ease;
    margin: 0 var(--spacing-6);
}

.hint-text {
    display: inline-block;
    font-size: var(--font-size-specialized);
    color: var(--white);
    text-transform: lowercase;
    letter-spacing: var(--letter-spacing-normal);
    vertical-align: middle;
}

/* Reduced motion fallback for hint auto-hide animations */
@media (prefers-reduced-motion: reduce) {
    .expand-hint.hint-hiding,
    .expand-hint.hint-showing {
        animation: none;
        transition: opacity 0.3s ease;
    }
    .expand-hint.hint-hiding {
        opacity: 0;
        pointer-events: none;
    }
    .expand-hint.hint-showing {
        opacity: 1;
        pointer-events: auto;
    }
}
/* END CLEAN-FIX-8A-B8-SHARED-EXPAND-HINT */

/* ========================================
   UNIVERSAL CTA HOVER SYSTEM
   Single source of truth for all CTA hover effects
   ======================================== */

/* CSS Custom Properties for position-aware customization */
.cta-link {
    --cta-hover-translate-x: 0;
    --cta-hover-translate-y: 2px;
    --cta-rotation: 0deg;
    --cta-accent-color: var(--cyan);
    --cta-pulse-color: rgba(0, 247, 255, 0.62);
}

/* 1. Cube rotation (front to back flip) */
.cta-link:hover .cube {
    transform: rotateX(180deg);
    transition: transform var(--transition-medium) var(--easing-concrete);
}

/* 2. Translation effect */
.cta-link:hover {
    transform: translate(var(--cta-hover-translate-x), var(--cta-hover-translate-y));
}

/* 3. Module scale to 1.1 */
/* 4. Module border to white */
/* 5. Module glow shadow */
.cta-link:hover .cta-module {
    transform: scale(1.1);
    border-color: var(--white);
    border-width: 1.2px;
    box-shadow: 0 0 6px rgba(250, 250, 250, 0.16);
    transition: all var(--transition-fast) ease;
}

/* 6. Pulse ring animation */
.cta-link:hover .header-pulse-ring,
.cta-link:hover .footer-pulse-ring,
.cta-link:hover .pulse-ring {
    display: block;
    background-color: var(--cta-pulse-color);
    animation: module-pulse-breathe 2s ease-in-out infinite;
}

/* 7. Module name to white */
/* 8. Module name rotation */
.cta-link:hover .module-name {
    color: var(--white);
    transform: rotate(var(--cta-rotation));
    transition: all var(--transition-medium) ease;
}

/* 9. Module indicator scale to 1.2 */
/* 10. Module indicator opacity to 0.84 */
.cta-link:hover .header-module-indicator,
.cta-link:hover .footer-module-indicator,
.cta-link:hover .module-indicator {
    opacity: 0.84;
    transform: scale(1.2);
    transform-origin: center center;
    animation: module-indicator-breathe 2s ease-in-out infinite;
    transition: all var(--transition-fast) ease;
}

/* 11. Accent line expansion on cube back face */
.cta-link:hover .cube-face.back::after {
    width: 100%;
    background-color: var(--cta-accent-color);
    transition: width var(--transition-medium) var(--easing-concrete);
}

/* 12. Cube face changes */
.cta-link:hover .cube-face {
    border-color: rgba(48, 51, 51, 0.4);
    transition: all var(--transition-fast) ease;
}

.cta-link:hover .cube-face.back {
    background-color: rgba(18, 18, 18, 0.6);
}

/* Ensure proper initial states */
.cta-link .cube-face.back::after {
    content: '';
    position: absolute;
    bottom: var(--cta-accent-line-position, 3px);
    left: 0;
    width: 0;
    height: var(--cta-accent-line-height, 2px);
    background-color: var(--cta-accent-color);
    transition: width var(--transition-medium) var(--easing-concrete);
}

/* Animations */
@keyframes module-pulse-breathe {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1.2); 
        opacity: 0.6; 
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.8); 
        opacity: 0.36; 
    }
}

@keyframes module-indicator-breathe {
    0%, 100% {
        transform: scale(1.2);
        opacity: 0.84;
    }
    50% {
        transform: scale(1.8);
        opacity: 0.92;
    }
}

/* START CLEAN-FIX-P5-S7B0A-REDUCED-MOTION-GATE
   Baseline reduced-motion accessibility gate for Phase 5 motion items.

   Design intent (Pre-7B Gate decision 3, Option C hybrid strategy):
   Unconditional micro-commit shipped BEFORE 7B.1 (V5/V6 structural)
   so that any future regression revert of V5/V6 never accidentally
   strips the a11y baseline. This gate must exist in place before
   V7 dot matrix (first new motion item at 7B.2) ships.

   Scope: Complements (does NOT replace) the existing cursor and
   expand-hint reduced-motion blocks at lines ~985 and ~1083 above.
   Those are component-targeted. This block is the P5-motion baseline
   for the project-columns subsystem and the .raf-driven class pattern
   introduced by 7A Fix V4 (marquee rAF conversion, commit 1ea3f5a).

   Targets:
   (1) .raf-driven (+ .raf-driven.paused variant) — the 7A pattern for
       per-column rAF position tracking + M5 breathe scale composition.
       Suppressing animation + resetting scale:1 stops the marquee from
       moving and stops the M5 scale 1.0005 breathe effect without
       disturbing static layout.
   (2) .project-column .scanner-line — existing 7A scanner line pulse
       on project activation. Suppress animation for reduced-motion users.
   (3) .project-column .coord-point — existing 7A coord pulse animations.
       Suppress for reduced-motion users.

   AnimationEngine-routed motion (future M3/M6/M7/M4 via 7C/7D) is
   expected to check window.matchMedia('(prefers-reduced-motion: reduce)')
   at JS registration time — CSS suppression here is a backstop not
   the primary mechanism for engine-routed items. The JS path should
   call animationEngine.register() conditionally OR unregister on
   reduced-motion change events.

   Future extension: As 7B.2 V7 dot matrix, 7C.1 M6 cascade, 7C.2
   M1 momentum, 7C.2b M2 coord, 7C.3 M4 snap, 7D M3/M7 scroll-linked
   items ship, extend this block (or add sub-markers inside the same
   CLEAN-FIX family) to suppress each one's CSS-side animation as
   needed. Each sub-marker should cite the parent CLEAN-FIX-P5-
   S7B0A-REDUCED-MOTION-GATE for traceability.

   ─── UPDATE 2026-04-16 — V7 REVERTED ─────────────────────────
   Sub-marker: CLEAN-FIX-P5-S7C2B-M2-V7-REVERT-TRACEABILITY
   V7 dot matrix was subsequently REVERTED at commit 31576bc.
   The other items listed above (M1/M2/M3/M4/M6/M7) remain
   planned or shipped — 7C.1 M6 cascade, 7C.2 M1 momentum, and
   7C.2b M2 coord echo have landed. This reduced-motion baseline
   remains valid for all active and pending motion items. No
   functional change to this block — historical context above
   is preserved for traceability of original shipping rationale.
   To revert: Search CLEAN-FIX-P5-S7C2B-M2-V7-REVERT-TRACEABILITY
   and remove this update block. Parent gate is unaffected.
   ─────────────────────────────────────────────────────────────

   Evidence: Option C hybrid strategy decision locked 2026-04-13
   (commit c15f21d Step 0.5 doc update) after tri-review by
   @ui-ninja + @code-review-analyst + Plan agent. Pre-7B Gate
   decision 3 specifies shipping reduced-motion as a micro-commit
   independent of V5/V6 structural work for revert-safety.

   Verification: Toggle DevTools "Emulate CSS media feature
   prefers-reduced-motion" → reduce. Expected:
   - Active project column marquee stops scrolling (animation frozen)
   - M5 breathe scale:1.0005 stops (scale reset to 1)
   - Scanner line pulse on project activation stops
   - Coord point pulse animations stop
   - No visual regression on layout (only motion is affected)

   No JS diagnostic for this commit — pure CSS a11y gate. Runtime
   verification is via DevTools emulation, not console logs.

   If not effective: (1) Check that .raf-driven base animation rules
   at v3-mockups-marquee.css have same or lower specificity than
   this block. (2) Verify prefers-reduced-motion media feature is
   being emulated correctly in DevTools. (3) Inspect .raf-driven
   elements in computed styles panel to see which rule is winning
   the animation + scale properties.

   To revert: Search CLEAN-FIX-P5-S7B0A-REDUCED-MOTION-GATE,
   delete everything between START and END markers. The existing
   cursor + expand-hint reduced-motion blocks at lines ~985 and
   ~1083 are untouched by this fix. */
@media (prefers-reduced-motion: reduce) {
    /* 7A V4 rAF marquee + M5 breathe scale pattern */
    .raf-driven {
        animation: none;
        scale: 1;
    }
    .raf-driven.paused {
        scale: 1;
    }
    /* 7A structural motion on project columns */
    .project-column .scanner-line,
    .project-column .coord-point {
        animation: none;
    }

    /* Sub-marker: CLEAN-FIX-P5-S7C2B-M2-REDUCED-MOTION-EXTENSION
       Extends parent reduced-motion gate to suppress C2 pulse variation
       animations shipped 2026-04-16. Covers Sets 2/3/4/6 pulse-ring and
       f.sec module-node targets. Set 1 H-5 Ripple Wave supersede has its
       OWN local reduced-motion block inside its CLEAN-FIX (targets
       `.coord-point::before` pseudo-element which parent gate doesn't
       reach via `.coord-point` element selector).
       To revert this sub-block only: search CLEAN-FIX-P5-S7C2B-M2-
       REDUCED-MOTION-EXTENSION, delete from `/* Sub-marker:` through
       the closing selector block below. Parent 7B.0a gate unaffected. */
    .overview-trigger .module-indicator .pulse-ring.animate,
    .view-case-btn .module-indicator .pulse-ring.animate,
    .project-module .pulse-ring.animate,
    .uc-fsec-module-node {
        animation: none;
    }
}
/* END CLEAN-FIX-P5-S7B0A-REDUCED-MOTION-GATE */

/* =============================================================================
   START CLEAN-FIX-P5-VI2-L1-A11Y-FLOOR (2026-05-11)
   =============================================================================
   VI.2 L1 a11y floor — skip-nav + :focus-visible baseline for the entire site.
   Compressed-wirth Phase A Day 3 Chunk #5. Honors geometric-brutalist character:
   sharp corners (no border-radius), high-contrast outline using --accent or
   --dark, 6n spacing on outline-offset, off-screen-until-focus pattern.

   To revert: Search for "CLEAN-FIX-P5-VI2-L1-A11Y-FLOOR" and delete everything
   between this START fence and the END fence below.
   ============================================================================= */

/* Skip-nav link — off-screen by default, visible on keyboard focus.
   Geometric-brutalist treatment: sharp corners, --black backing, --accent border,
   uppercase per typography lock, 6n spacing. */
.skip-nav {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    transform: translateY(-100%);
    padding: 12px 24px;
    background: var(--black);
    color: var(--accent, #f0f0f0);
    border: 2px solid var(--accent, #f0f0f0);
    font-family: var(--font-primary, 'Chivo Mono', monospace);
    font-size: var(--font-size-standard, 0.9rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.skip-nav:focus,
.skip-nav:focus-visible {
    transform: translateY(0);
    outline: none;
}

/* :focus-visible baseline — fires on KEYBOARD focus only (mouse/touch suppressed
   by browser heuristic). Site-wide minimum a11y floor. Per-component focus
   overrides in v3-request-counter.css remain in effect via cascade specificity. */
:focus-visible {
    outline: 2px solid var(--accent, #f0f0f0);
    outline-offset: 6px;
}

/* Suppress default browser focus ring when :focus-visible is supported and the
   element is in a non-keyboard focus state. */
:focus:not(:focus-visible) {
    outline: none;
}

/* =============================================================================
   END CLEAN-FIX-P5-VI2-L1-A11Y-FLOOR
   ============================================================================= */