Monochrome Editorial - Free HTML/CSS UI Kit

Color Palette

Obsidian Black #000000

Alabaster White #FFFFFF

Warm Alabaster #FAF8F5

Studio Charcoal #1A1A1A

Muted Platinum #E5E5E5

Typography

Navbars

Stark Floating Navbar

HTML

<header class="mc-navbar">
    <div class="mc-nav-container">
        <a href="#" class="mc-logo">
            <div class="mc-logo-icon">M</div>
            <span>Monochrome</span>
        </a>
        
        <nav class="mc-nav-links">
            <a href="#" class="mc-nav-link active">Collections</a>
            <a href="#" class="mc-nav-link">Architectures</a>
            <a href="#" class="mc-nav-link">Studio</a>
            <a href="#" class="mc-nav-link">Journal</a>
        </nav>
        
        <div class="mc-nav-actions">
            <a href="#" class="mc-btn mc-btn-primary" style="padding: 0.65rem 1.75rem; font-size: 0.7rem;">Enter Studio</a>
        </div>
    </div>
</header>

CSS (Component Only)

/* Component: Stark Floating Navbar */
/* NOTE: This component requires base.css to be included in your page. */

.mc-navbar {
    width: 100%;
    background-color: var(--mc-surface);
    border-bottom: 1px solid var(--mc-border);
    padding: 1.25rem 2.5rem;
    position: relative;
    z-index: 100;
}

.mc-nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mc-nav-links {
    display: flex;
    gap: 2.5rem;
    align-items: center;
}

.mc-nav-link {
    text-decoration: none;
    font-family: var(--mc-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--mc-text-muted);
    transition: var(--mc-transition);
    padding: 0.5rem 0;
    position: relative;
}

.mc-nav-link:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--mc-text);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.mc-nav-link:hover {
    color: var(--mc-text);
}

.mc-nav-link:hover:after {
    transform: scaleX(1);
    transform-origin: left;
}

.mc-nav-link.active {
    color: var(--mc-text);
}

.mc-nav-link.active:after {
    transform: scaleX(1);
}

.mc-nav-actions {
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    .mc-nav-links {
        display: none;
    }
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Reset & Root variables */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --mc-bg: #FFFFFF;
    --mc-bg-muted: #FAF8F5; /* Warm alabaster warm white */
    --mc-surface: #FFFFFF;
    
    --mc-text: #000000;
    --mc-text-muted: #666666;
    --mc-text-light: #999999;
    
    --mc-border: #000000;
    --mc-border-muted: #E5E5E0; /* Soft warm hairline gray */
    
    --mc-radius: 0px; /* Stark architectural sharp corners */
    --mc-radius-sm: 0px;
    --mc-radius-full: 9999px; /* For clean circles and capsules only */
    
    --mc-font-heading: 'Cormorant Garamond', Georgia, serif;
    --mc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Editorial cubic transition */
    --mc-transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

body {
    margin: 0;
    font-family: var(--mc-font-body);
    color: var(--mc-text);
    background-color: var(--mc-bg);
    -webkit-font-smoothing: antialiased;
}

/* Surface containers */
.mc-surface {
    background-color: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    padding: 2.5rem;
    transition: var(--mc-transition);
}

/* Global Logo */
.mc-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    font-family: var(--mc-font-body);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mc-text);
    transition: var(--mc-transition);
}

.mc-logo span {
    font-weight: 300;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

.mc-logo-icon {
    width: 30px;
    height: 30px;
    background-color: var(--mc-text);
    color: var(--mc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0;
    transition: var(--mc-transition);
}

/* Global Buttons */
.mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2.25rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: var(--mc-radius);
    cursor: pointer;
    text-decoration: none;
    transition: var(--mc-transition);
    gap: 0.5rem;
    position: relative;
}

.mc-btn-primary {
    background-color: var(--mc-text);
    color: var(--mc-bg);
    border-color: var(--mc-border);
}

.mc-btn-primary:hover {
    background-color: var(--mc-bg);
    color: var(--mc-text);
}

.mc-btn-outline {
    background-color: transparent;
    color: var(--mc-text);
    border-color: var(--mc-border);
}

.mc-btn-outline:hover {
    background-color: var(--mc-text);
    color: var(--mc-bg);
}

.mc-btn-ghost {
    background-color: transparent;
    color: var(--mc-text);
    border-color: transparent;
    padding-left: 1rem;
    padding-right: 1rem;
}

.mc-btn-ghost:hover {
    background-color: var(--mc-bg-muted);
}

.mc-btn-circle {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mc-btn-block {
    width: 100%;
}

/* Form Fields */
.mc-input {
    width: 100%;
    padding: 0.95rem 1.25rem;
    border: 1px solid var(--mc-border-muted);
    border-radius: var(--mc-radius);
    font-family: var(--mc-font-body);
    font-size: 0.9rem;
    color: var(--mc-text);
    background-color: var(--mc-surface);
    outline: none;
    transition: var(--mc-transition);
}

.mc-input::placeholder {
    color: var(--mc-text-light);
    opacity: 0.7;
}

.mc-input:focus {
    border-color: var(--mc-border);
    background-color: var(--mc-bg-muted);
}

.mc-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mc-text);
}

/* Typography resets */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--mc-font-heading);
    font-weight: 400; /* Editorial serifs are more stunning when thin/medium */
    margin: 0;
    color: var(--mc-text);
    line-height: 1.2;
}

p {
    font-family: var(--mc-font-body);
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
    color: var(--mc-text-muted);
}

/* Utility Colors & Text alignments */
.text-white { color: #FFFFFF !important; }
.text-black { color: #000000 !important; }
.text-muted { color: var(--mc-text-muted) !important; }

.bg-white { background-color: #FFFFFF !important; }
.bg-black { background-color: #000000 !important; }
.bg-warm { background-color: var(--mc-bg-muted) !important; }

.align-center { text-align: center !important; }
.align-right { text-align: right !important; }


/* --- COMPONENT STYLES --- */
.mc-navbar {
    width: 100%;
    background-color: var(--mc-surface);
    border-bottom: 1px solid var(--mc-border);
    padding: 1.25rem 2.5rem;
    position: relative;
    z-index: 100;
}

.mc-nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mc-nav-links {
    display: flex;
    gap: 2.5rem;
    align-items: center;
}

.mc-nav-link {
    text-decoration: none;
    font-family: var(--mc-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--mc-text-muted);
    transition: var(--mc-transition);
    padding: 0.5rem 0;
    position: relative;
}

.mc-nav-link:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--mc-text);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.mc-nav-link:hover {
    color: var(--mc-text);
}

.mc-nav-link:hover:after {
    transform: scaleX(1);
    transform-origin: left;
}

.mc-nav-link.active {
    color: var(--mc-text);
}

.mc-nav-link.active:after {
    transform: scaleX(1);
}

.mc-nav-actions {
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    .mc-nav-links {
        display: none;
    }
}

Architectural Sidebar Navigation

HTML

<aside class="mc-sidebar">
    <div class="mc-sidebar-header">
        <a href="#" class="mc-logo">
            <div class="mc-logo-icon">M</div>
            <span>Monochrome</span>
        </a>
    </div>
    
    <nav class="mc-sidebar-nav">
        <ul>
            <li>
                <a href="#" class="mc-sidebar-link active">
                    <span class="mc-nav-num">01</span>
                    <span class="mc-nav-text">Curated Spaces</span>
                </a>
            </li>
            <li>
                <a href="#" class="mc-sidebar-link">
                    <span class="mc-nav-num">02</span>
                    <span class="mc-nav-text">Architectures</span>
                </a>
            </li>
            <li>
                <a href="#" class="mc-sidebar-link">
                    <span class="mc-nav-num">03</span>
                    <span class="mc-nav-text">Studio Codex</span>
                </a>
            </li>
            <li>
                <a href="#" class="mc-sidebar-link">
                    <span class="mc-nav-num">04</span>
                    <span class="mc-nav-text">Exhibitions</span>
                </a>
            </li>
        </ul>
    </nav>
    
    <div class="mc-sidebar-footer">
        <div class="mc-user-badge">
            <div class="mc-user-avatar">
                <span>AM</span>
            </div>
            <div class="mc-user-info">
                <h4>Alex Moreau</h4>
                <p>Curator in Chief</p>
            </div>
        </div>
    </div>
</aside>

CSS (Component Only)

/* Component: Architectural Sidebar Navigation */
/* NOTE: This component requires base.css to be included in your page. */

.mc-sidebar {
    width: 280px;
    height: 100%;
    min-height: 600px;
    background-color: var(--mc-surface);
    border-right: 1px solid var(--mc-border);
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3rem;
}

.mc-sidebar-header {
    margin-bottom: 2rem;
}

.mc-sidebar-nav {
    flex: 1;
}

.mc-sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mc-sidebar-link {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    text-decoration: none;
    color: var(--mc-text-muted);
    font-family: var(--mc-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.75rem 0;
    border-bottom: 1px solid transparent;
    transition: var(--mc-transition);
}

.mc-nav-num {
    font-family: var(--mc-font-body);
    font-weight: 300;
    font-size: 0.7rem;
    opacity: 0.5;
}

.mc-sidebar-link:hover {
    color: var(--mc-text);
    padding-left: 0.5rem;
}

.mc-sidebar-link.active {
    color: var(--mc-text);
    border-bottom: 1px solid var(--mc-border);
}

.mc-sidebar-footer {
    border-top: 1px solid var(--mc-border-muted);
    padding-top: 2rem;
}

.mc-user-badge {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.mc-user-avatar {
    width: 36px;
    height: 36px;
    background-color: var(--mc-text);
    color: var(--mc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--mc-radius);
    border: 1px solid var(--mc-border);
}

.mc-user-info h4 {
    font-family: var(--mc-font-body);
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.mc-user-info p {
    font-size: 0.7rem;
    color: var(--mc-text-light);
}

@media (max-width: 768px) {
    .mc-sidebar {
        width: 100%;
        height: auto;
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid var(--mc-border);
        padding: 2rem;
    }
    
    .mc-sidebar-nav ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1.5rem;
    }
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Reset & Root variables */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --mc-bg: #FFFFFF;
    --mc-bg-muted: #FAF8F5; /* Warm alabaster warm white */
    --mc-surface: #FFFFFF;
    
    --mc-text: #000000;
    --mc-text-muted: #666666;
    --mc-text-light: #999999;
    
    --mc-border: #000000;
    --mc-border-muted: #E5E5E0; /* Soft warm hairline gray */
    
    --mc-radius: 0px; /* Stark architectural sharp corners */
    --mc-radius-sm: 0px;
    --mc-radius-full: 9999px; /* For clean circles and capsules only */
    
    --mc-font-heading: 'Cormorant Garamond', Georgia, serif;
    --mc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Editorial cubic transition */
    --mc-transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

body {
    margin: 0;
    font-family: var(--mc-font-body);
    color: var(--mc-text);
    background-color: var(--mc-bg);
    -webkit-font-smoothing: antialiased;
}

/* Surface containers */
.mc-surface {
    background-color: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    padding: 2.5rem;
    transition: var(--mc-transition);
}

/* Global Logo */
.mc-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    font-family: var(--mc-font-body);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mc-text);
    transition: var(--mc-transition);
}

.mc-logo span {
    font-weight: 300;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

.mc-logo-icon {
    width: 30px;
    height: 30px;
    background-color: var(--mc-text);
    color: var(--mc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0;
    transition: var(--mc-transition);
}

/* Global Buttons */
.mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2.25rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: var(--mc-radius);
    cursor: pointer;
    text-decoration: none;
    transition: var(--mc-transition);
    gap: 0.5rem;
    position: relative;
}

.mc-btn-primary {
    background-color: var(--mc-text);
    color: var(--mc-bg);
    border-color: var(--mc-border);
}

.mc-btn-primary:hover {
    background-color: var(--mc-bg);
    color: var(--mc-text);
}

.mc-btn-outline {
    background-color: transparent;
    color: var(--mc-text);
    border-color: var(--mc-border);
}

.mc-btn-outline:hover {
    background-color: var(--mc-text);
    color: var(--mc-bg);
}

.mc-btn-ghost {
    background-color: transparent;
    color: var(--mc-text);
    border-color: transparent;
    padding-left: 1rem;
    padding-right: 1rem;
}

.mc-btn-ghost:hover {
    background-color: var(--mc-bg-muted);
}

.mc-btn-circle {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mc-btn-block {
    width: 100%;
}

/* Form Fields */
.mc-input {
    width: 100%;
    padding: 0.95rem 1.25rem;
    border: 1px solid var(--mc-border-muted);
    border-radius: var(--mc-radius);
    font-family: var(--mc-font-body);
    font-size: 0.9rem;
    color: var(--mc-text);
    background-color: var(--mc-surface);
    outline: none;
    transition: var(--mc-transition);
}

.mc-input::placeholder {
    color: var(--mc-text-light);
    opacity: 0.7;
}

.mc-input:focus {
    border-color: var(--mc-border);
    background-color: var(--mc-bg-muted);
}

.mc-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mc-text);
}

/* Typography resets */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--mc-font-heading);
    font-weight: 400; /* Editorial serifs are more stunning when thin/medium */
    margin: 0;
    color: var(--mc-text);
    line-height: 1.2;
}

p {
    font-family: var(--mc-font-body);
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
    color: var(--mc-text-muted);
}

/* Utility Colors & Text alignments */
.text-white { color: #FFFFFF !important; }
.text-black { color: #000000 !important; }
.text-muted { color: var(--mc-text-muted) !important; }

.bg-white { background-color: #FFFFFF !important; }
.bg-black { background-color: #000000 !important; }
.bg-warm { background-color: var(--mc-bg-muted) !important; }

.align-center { text-align: center !important; }
.align-right { text-align: right !important; }


/* --- COMPONENT STYLES --- */
.mc-sidebar {
    width: 280px;
    height: 100%;
    min-height: 600px;
    background-color: var(--mc-surface);
    border-right: 1px solid var(--mc-border);
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3rem;
}

.mc-sidebar-header {
    margin-bottom: 2rem;
}

.mc-sidebar-nav {
    flex: 1;
}

.mc-sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mc-sidebar-link {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    text-decoration: none;
    color: var(--mc-text-muted);
    font-family: var(--mc-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.75rem 0;
    border-bottom: 1px solid transparent;
    transition: var(--mc-transition);
}

.mc-nav-num {
    font-family: var(--mc-font-body);
    font-weight: 300;
    font-size: 0.7rem;
    opacity: 0.5;
}

.mc-sidebar-link:hover {
    color: var(--mc-text);
    padding-left: 0.5rem;
}

.mc-sidebar-link.active {
    color: var(--mc-text);
    border-bottom: 1px solid var(--mc-border);
}

.mc-sidebar-footer {
    border-top: 1px solid var(--mc-border-muted);
    padding-top: 2rem;
}

.mc-user-badge {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.mc-user-avatar {
    width: 36px;
    height: 36px;
    background-color: var(--mc-text);
    color: var(--mc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--mc-radius);
    border: 1px solid var(--mc-border);
}

.mc-user-info h4 {
    font-family: var(--mc-font-body);
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.mc-user-info p {
    font-size: 0.7rem;
    color: var(--mc-text-light);
}

@media (max-width: 768px) {
    .mc-sidebar {
        width: 100%;
        height: auto;
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid var(--mc-border);
        padding: 2rem;
    }
    
    .mc-sidebar-nav ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1.5rem;
    }
}

Hero Sections

Cinematic Centered Hero

HTML

<section class="mc-hero-centered">
    <div class="mc-hero-badge">Curated Studio Issue N&deg;18</div>
    
    <h1 class="mc-hero-title">Stark Architecture.<br>Silent Structural Form.</h1>
    
    <p class="mc-hero-subtitle">Exploring the elegant intersection of volumetric negative space, light, and monochrome structural boundaries. Designed for conscious minimal curation.</p>
    
    <div class="mc-hero-actions">
        <a href="#" class="mc-btn mc-btn-primary">Explore Curation</a>
        <a href="#" class="mc-btn mc-btn-outline">Read Monograph</a>
    </div>
    
    <div class="mc-hero-frame">
        <div class="mc-frame-inner">
            <div class="mc-skeleton-nav">
                <div class="mc-skele-dot"></div>
                <div class="mc-skele-bar"></div>
            </div>
            <div class="mc-frame-grid">
                <div class="mc-frame-block block-main">
                    <div class="mc-frame-img-fallback">
                        <svg viewBox="0 0 24 24" width="48" height="48" stroke="currentColor" stroke-width="0.8" fill="none"><rect x="3" y="3" width="18" height="18" rx="0" ry="0"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
                        <span>Exhibition Space / No. 04</span>
                    </div>
                </div>
                <div class="mc-frame-block block-side">
                    <div class="mc-skele-line text-lg"></div>
                    <div class="mc-skele-line"></div>
                    <div class="mc-skele-line"></div>
                    <div class="mc-skele-line text-sm"></div>
                </div>
            </div>
        </div>
    </div>
</section>

CSS (Component Only)

/* Component: Cinematic Centered Hero */
/* NOTE: This component requires base.css to be included in your page. */

.mc-hero-centered {
    max-width: 1000px;
    margin: 4rem auto;
    padding: 0 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mc-hero-badge {
    font-family: var(--mc-font-body);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--mc-text-light);
    margin-bottom: 2rem;
}

.mc-hero-title {
    font-size: 4rem;
    line-height: 1.15;
    margin-bottom: 2rem;
    max-width: 800px;
}

.mc-hero-subtitle {
    font-size: 1.1rem;
    max-width: 600px;
    margin-bottom: 3rem;
    line-height: 1.8;
}

.mc-hero-actions {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 5rem;
}

/* Editorial Mockup Frame */
.mc-hero-frame {
    width: 100%;
    border: 1px solid var(--mc-border);
    padding: 1rem;
    background-color: var(--mc-bg);
}

.mc-frame-inner {
    border: 1px solid var(--mc-border-muted);
    padding: 2rem;
    background-color: var(--mc-bg-muted);
}

.mc-skeleton-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--mc-border-muted);
}

.mc-skele-dot {
    width: 12px;
    height: 12px;
    background-color: var(--mc-border);
}

.mc-skele-bar {
    width: 80px;
    height: 8px;
    background-color: var(--mc-border-muted);
}

.mc-frame-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 2.5rem;
    text-align: left;
}

.mc-frame-block {
    background-color: var(--mc-surface);
    border: 1px solid var(--mc-border-muted);
}

.block-main {
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc-frame-img-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--mc-text-light);
}

.mc-frame-img-fallback span {
    font-family: var(--mc-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.block-side {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.mc-skele-line {
    height: 10px;
    background-color: var(--mc-bg-muted);
    width: 100%;
}

.mc-skele-line.text-lg { width: 40%; height: 16px; background-color: var(--mc-text); margin-bottom: 0.5rem; }
.mc-skele-line.text-sm { width: 70%; }

@media (max-width: 768px) {
    .mc-hero-title { font-size: 2.75rem; }
    .mc-hero-actions { flex-direction: column; width: 100%; gap: 1rem; }
    .mc-hero-actions .mc-btn { width: 100%; }
    .mc-frame-grid { grid-template-columns: 1fr; }
    .block-side { display: none; }
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Reset & Root variables */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --mc-bg: #FFFFFF;
    --mc-bg-muted: #FAF8F5; /* Warm alabaster warm white */
    --mc-surface: #FFFFFF;
    
    --mc-text: #000000;
    --mc-text-muted: #666666;
    --mc-text-light: #999999;
    
    --mc-border: #000000;
    --mc-border-muted: #E5E5E0; /* Soft warm hairline gray */
    
    --mc-radius: 0px; /* Stark architectural sharp corners */
    --mc-radius-sm: 0px;
    --mc-radius-full: 9999px; /* For clean circles and capsules only */
    
    --mc-font-heading: 'Cormorant Garamond', Georgia, serif;
    --mc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Editorial cubic transition */
    --mc-transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

body {
    margin: 0;
    font-family: var(--mc-font-body);
    color: var(--mc-text);
    background-color: var(--mc-bg);
    -webkit-font-smoothing: antialiased;
}

/* Surface containers */
.mc-surface {
    background-color: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    padding: 2.5rem;
    transition: var(--mc-transition);
}

/* Global Logo */
.mc-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    font-family: var(--mc-font-body);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mc-text);
    transition: var(--mc-transition);
}

.mc-logo span {
    font-weight: 300;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

.mc-logo-icon {
    width: 30px;
    height: 30px;
    background-color: var(--mc-text);
    color: var(--mc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0;
    transition: var(--mc-transition);
}

/* Global Buttons */
.mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2.25rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: var(--mc-radius);
    cursor: pointer;
    text-decoration: none;
    transition: var(--mc-transition);
    gap: 0.5rem;
    position: relative;
}

.mc-btn-primary {
    background-color: var(--mc-text);
    color: var(--mc-bg);
    border-color: var(--mc-border);
}

.mc-btn-primary:hover {
    background-color: var(--mc-bg);
    color: var(--mc-text);
}

.mc-btn-outline {
    background-color: transparent;
    color: var(--mc-text);
    border-color: var(--mc-border);
}

.mc-btn-outline:hover {
    background-color: var(--mc-text);
    color: var(--mc-bg);
}

.mc-btn-ghost {
    background-color: transparent;
    color: var(--mc-text);
    border-color: transparent;
    padding-left: 1rem;
    padding-right: 1rem;
}

.mc-btn-ghost:hover {
    background-color: var(--mc-bg-muted);
}

.mc-btn-circle {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mc-btn-block {
    width: 100%;
}

/* Form Fields */
.mc-input {
    width: 100%;
    padding: 0.95rem 1.25rem;
    border: 1px solid var(--mc-border-muted);
    border-radius: var(--mc-radius);
    font-family: var(--mc-font-body);
    font-size: 0.9rem;
    color: var(--mc-text);
    background-color: var(--mc-surface);
    outline: none;
    transition: var(--mc-transition);
}

.mc-input::placeholder {
    color: var(--mc-text-light);
    opacity: 0.7;
}

.mc-input:focus {
    border-color: var(--mc-border);
    background-color: var(--mc-bg-muted);
}

.mc-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mc-text);
}

/* Typography resets */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--mc-font-heading);
    font-weight: 400; /* Editorial serifs are more stunning when thin/medium */
    margin: 0;
    color: var(--mc-text);
    line-height: 1.2;
}

p {
    font-family: var(--mc-font-body);
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
    color: var(--mc-text-muted);
}

/* Utility Colors & Text alignments */
.text-white { color: #FFFFFF !important; }
.text-black { color: #000000 !important; }
.text-muted { color: var(--mc-text-muted) !important; }

.bg-white { background-color: #FFFFFF !important; }
.bg-black { background-color: #000000 !important; }
.bg-warm { background-color: var(--mc-bg-muted) !important; }

.align-center { text-align: center !important; }
.align-right { text-align: right !important; }


/* --- COMPONENT STYLES --- */
.mc-hero-centered {
    max-width: 1000px;
    margin: 4rem auto;
    padding: 0 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mc-hero-badge {
    font-family: var(--mc-font-body);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--mc-text-light);
    margin-bottom: 2rem;
}

.mc-hero-title {
    font-size: 4rem;
    line-height: 1.15;
    margin-bottom: 2rem;
    max-width: 800px;
}

.mc-hero-subtitle {
    font-size: 1.1rem;
    max-width: 600px;
    margin-bottom: 3rem;
    line-height: 1.8;
}

.mc-hero-actions {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 5rem;
}

/* Editorial Mockup Frame */
.mc-hero-frame {
    width: 100%;
    border: 1px solid var(--mc-border);
    padding: 1rem;
    background-color: var(--mc-bg);
}

.mc-frame-inner {
    border: 1px solid var(--mc-border-muted);
    padding: 2rem;
    background-color: var(--mc-bg-muted);
}

.mc-skeleton-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--mc-border-muted);
}

.mc-skele-dot {
    width: 12px;
    height: 12px;
    background-color: var(--mc-border);
}

.mc-skele-bar {
    width: 80px;
    height: 8px;
    background-color: var(--mc-border-muted);
}

.mc-frame-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 2.5rem;
    text-align: left;
}

.mc-frame-block {
    background-color: var(--mc-surface);
    border: 1px solid var(--mc-border-muted);
}

.block-main {
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc-frame-img-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--mc-text-light);
}

.mc-frame-img-fallback span {
    font-family: var(--mc-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.block-side {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.mc-skele-line {
    height: 10px;
    background-color: var(--mc-bg-muted);
    width: 100%;
}

.mc-skele-line.text-lg { width: 40%; height: 16px; background-color: var(--mc-text); margin-bottom: 0.5rem; }
.mc-skele-line.text-sm { width: 70%; }

@media (max-width: 768px) {
    .mc-hero-title { font-size: 2.75rem; }
    .mc-hero-actions { flex-direction: column; width: 100%; gap: 1rem; }
    .mc-hero-actions .mc-btn { width: 100%; }
    .mc-frame-grid { grid-template-columns: 1fr; }
    .block-side { display: none; }
}

Asymmetrical Split Hero

HTML

<section class="mc-hero-split">
    <div class="mc-split-grid">
        <div class="mc-split-content">
            <h1 class="mc-split-title">Monolithic Space.<br>Absolute Tone.</h1>
            <p class="mc-split-desc">A deep exploration of the structural voids, extreme highlights, and silent shadows that construct premium modern editorial interfaces.</p>
            <div class="mc-split-actions">
                <a href="#" class="mc-btn mc-btn-primary">Enter Atelier</a>
                <a href="#" class="mc-btn mc-btn-outline">Curate Space</a>
            </div>
        </div>
        
        <div class="mc-split-visual">
            <div class="mc-visual-main bg-black text-white">
                <div class="mc-visual-header">
                    <span class="mc-visual-title" style="color: #999999; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.15em;">Issue Vol. 04</span>
                    <span class="mc-badge bg-white text-black" style="font-size: 0.6rem; font-weight: 800; border: none; border-radius: 0;">1 OF 500</span>
                </div>
                <div class="mc-visual-metric">800px</div>
                <p class="mc-visual-desc">Stark column focal width specified for structural layout N&deg;4.</p>
            </div>
            
            <div class="mc-visual-overlay bg-white text-black">
                <div class="mc-editorial-author">
                    <div class="mc-author-stamp">A</div>
                    <div class="mc-author-info">
                        <h4>Atelier Moreau</h4>
                        <p>Studio Issue Curator</p>
                    </div>
                </div>
            </div>
            
            <div class="mc-visual-accent"></div>
        </div>
    </div>
</section>

CSS (Component Only)

/* Component: Asymmetrical Split Hero */
/* NOTE: This component requires base.css to be included in your page. */

.mc-hero-split {
    max-width: 1200px;
    margin: 4rem auto;
    padding: 0 2rem;
}

.mc-split-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 5rem;
    align-items: center;
}

.mc-split-content {
    text-align: left;
}

.mc-split-title {
    font-size: 4rem;
    line-height: 1.15;
    margin-bottom: 2rem;
}

.mc-split-desc {
    font-size: 1.1rem;
    color: var(--mc-text-muted);
    margin-bottom: 3rem;
    line-height: 1.8;
}

.mc-split-actions {
    display: flex;
    gap: 1.5rem;
}

/* Stark Overlapping Visual Stack */
.mc-split-visual {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc-visual-main {
    width: 310px;
    padding: 2rem !important;
    position: absolute;
    top: 1.5rem;
    left: 0.75rem;
    z-index: 2;
    transform: rotate(-3.5deg);
    border: 1px solid var(--mc-border);
}

.mc-visual-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.mc-badge {
    font-family: var(--mc-font-body);
    font-weight: 800;
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
    letter-spacing: 0.05em;
}

.mc-visual-metric {
    font-family: var(--mc-font-heading);
    font-size: 3.5rem;
    margin-bottom: 1rem;
    line-height: 1;
}

.mc-visual-desc {
    max-width: 58%;
    font-family: var(--mc-font-body);
    font-size: 0.8rem;
    line-height: 1.6;
}

.mc-visual-overlay {
    width: 210px;
    padding: 1.25rem !important;
    position: absolute;
    bottom: 1.5rem;
    right: 0.75rem;
    z-index: 3;
    transform: rotate(2deg);
    border: 1px solid var(--mc-border);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);
}

.mc-editorial-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mc-author-stamp {
    width: 32px;
    height: 32px;
    background-color: var(--mc-text);
    color: var(--mc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mc-font-heading);
    font-size: 1rem;
    font-weight: 700;
}

.mc-author-info h4 {
    font-family: var(--mc-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.15rem;
}

.mc-author-info p {
    font-size: 0.65rem;
    color: var(--mc-text-light);
}

.mc-visual-accent {
    width: 80px;
    height: 80px;
    border: 1px solid var(--mc-border-muted);
    position: absolute;
    top: 1rem;
    right: 3rem;
    z-index: 1;
    opacity: 0.5;
}

@media (max-width: 900px) {
    .mc-split-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
        text-align: center;
    }
    .mc-split-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .mc-split-actions {
        justify-content: center;
    }
    .mc-split-visual {
        max-width: 450px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .mc-split-title { font-size: 2.75rem; }
    .mc-visual-main { width: 280px; left: 0; }
    .mc-visual-overlay { width: 190px; right: 0; }
    .mc-split-actions { flex-direction: column; width: 100%; gap: 1rem; }
    .mc-split-actions .mc-btn { width: 100%; }
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Reset & Root variables */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --mc-bg: #FFFFFF;
    --mc-bg-muted: #FAF8F5; /* Warm alabaster warm white */
    --mc-surface: #FFFFFF;
    
    --mc-text: #000000;
    --mc-text-muted: #666666;
    --mc-text-light: #999999;
    
    --mc-border: #000000;
    --mc-border-muted: #E5E5E0; /* Soft warm hairline gray */
    
    --mc-radius: 0px; /* Stark architectural sharp corners */
    --mc-radius-sm: 0px;
    --mc-radius-full: 9999px; /* For clean circles and capsules only */
    
    --mc-font-heading: 'Cormorant Garamond', Georgia, serif;
    --mc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Editorial cubic transition */
    --mc-transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

body {
    margin: 0;
    font-family: var(--mc-font-body);
    color: var(--mc-text);
    background-color: var(--mc-bg);
    -webkit-font-smoothing: antialiased;
}

/* Surface containers */
.mc-surface {
    background-color: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    padding: 2.5rem;
    transition: var(--mc-transition);
}

/* Global Logo */
.mc-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    font-family: var(--mc-font-body);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mc-text);
    transition: var(--mc-transition);
}

.mc-logo span {
    font-weight: 300;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

.mc-logo-icon {
    width: 30px;
    height: 30px;
    background-color: var(--mc-text);
    color: var(--mc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0;
    transition: var(--mc-transition);
}

/* Global Buttons */
.mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2.25rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: var(--mc-radius);
    cursor: pointer;
    text-decoration: none;
    transition: var(--mc-transition);
    gap: 0.5rem;
    position: relative;
}

.mc-btn-primary {
    background-color: var(--mc-text);
    color: var(--mc-bg);
    border-color: var(--mc-border);
}

.mc-btn-primary:hover {
    background-color: var(--mc-bg);
    color: var(--mc-text);
}

.mc-btn-outline {
    background-color: transparent;
    color: var(--mc-text);
    border-color: var(--mc-border);
}

.mc-btn-outline:hover {
    background-color: var(--mc-text);
    color: var(--mc-bg);
}

.mc-btn-ghost {
    background-color: transparent;
    color: var(--mc-text);
    border-color: transparent;
    padding-left: 1rem;
    padding-right: 1rem;
}

.mc-btn-ghost:hover {
    background-color: var(--mc-bg-muted);
}

.mc-btn-circle {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mc-btn-block {
    width: 100%;
}

/* Form Fields */
.mc-input {
    width: 100%;
    padding: 0.95rem 1.25rem;
    border: 1px solid var(--mc-border-muted);
    border-radius: var(--mc-radius);
    font-family: var(--mc-font-body);
    font-size: 0.9rem;
    color: var(--mc-text);
    background-color: var(--mc-surface);
    outline: none;
    transition: var(--mc-transition);
}

.mc-input::placeholder {
    color: var(--mc-text-light);
    opacity: 0.7;
}

.mc-input:focus {
    border-color: var(--mc-border);
    background-color: var(--mc-bg-muted);
}

.mc-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mc-text);
}

/* Typography resets */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--mc-font-heading);
    font-weight: 400; /* Editorial serifs are more stunning when thin/medium */
    margin: 0;
    color: var(--mc-text);
    line-height: 1.2;
}

p {
    font-family: var(--mc-font-body);
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
    color: var(--mc-text-muted);
}

/* Utility Colors & Text alignments */
.text-white { color: #FFFFFF !important; }
.text-black { color: #000000 !important; }
.text-muted { color: var(--mc-text-muted) !important; }

.bg-white { background-color: #FFFFFF !important; }
.bg-black { background-color: #000000 !important; }
.bg-warm { background-color: var(--mc-bg-muted) !important; }

.align-center { text-align: center !important; }
.align-right { text-align: right !important; }


/* --- COMPONENT STYLES --- */
.mc-hero-split {
    max-width: 1200px;
    margin: 4rem auto;
    padding: 0 2rem;
}

.mc-split-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 5rem;
    align-items: center;
}

.mc-split-content {
    text-align: left;
}

.mc-split-title {
    font-size: 4rem;
    line-height: 1.15;
    margin-bottom: 2rem;
}

.mc-split-desc {
    font-size: 1.1rem;
    color: var(--mc-text-muted);
    margin-bottom: 3rem;
    line-height: 1.8;
}

.mc-split-actions {
    display: flex;
    gap: 1.5rem;
}

/* Stark Overlapping Visual Stack */
.mc-split-visual {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc-visual-main {
    width: 310px;
    padding: 2rem !important;
    position: absolute;
    top: 1.5rem;
    left: 0.75rem;
    z-index: 2;
    transform: rotate(-3.5deg);
    border: 1px solid var(--mc-border);
}

.mc-visual-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.mc-badge {
    font-family: var(--mc-font-body);
    font-weight: 800;
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
    letter-spacing: 0.05em;
}

.mc-visual-metric {
    font-family: var(--mc-font-heading);
    font-size: 3.5rem;
    margin-bottom: 1rem;
    line-height: 1;
}

.mc-visual-desc {
    max-width: 58%;
    font-family: var(--mc-font-body);
    font-size: 0.8rem;
    line-height: 1.6;
}

.mc-visual-overlay {
    width: 210px;
    padding: 1.25rem !important;
    position: absolute;
    bottom: 1.5rem;
    right: 0.75rem;
    z-index: 3;
    transform: rotate(2deg);
    border: 1px solid var(--mc-border);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);
}

.mc-editorial-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mc-author-stamp {
    width: 32px;
    height: 32px;
    background-color: var(--mc-text);
    color: var(--mc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mc-font-heading);
    font-size: 1rem;
    font-weight: 700;
}

.mc-author-info h4 {
    font-family: var(--mc-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.15rem;
}

.mc-author-info p {
    font-size: 0.65rem;
    color: var(--mc-text-light);
}

.mc-visual-accent {
    width: 80px;
    height: 80px;
    border: 1px solid var(--mc-border-muted);
    position: absolute;
    top: 1rem;
    right: 3rem;
    z-index: 1;
    opacity: 0.5;
}

@media (max-width: 900px) {
    .mc-split-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
        text-align: center;
    }
    .mc-split-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .mc-split-actions {
        justify-content: center;
    }
    .mc-split-visual {
        max-width: 450px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .mc-split-title { font-size: 2.75rem; }
    .mc-visual-main { width: 280px; left: 0; }
    .mc-visual-overlay { width: 190px; right: 0; }
    .mc-split-actions { flex-direction: column; width: 100%; gap: 1rem; }
    .mc-split-actions .mc-btn { width: 100%; }
}

Buttons

Stark Solid Buttons

HTML

<div class="mc-btn-container">
    <button class="mc-btn mc-btn-primary">Aquire Issue</button>
    <button class="mc-btn mc-btn-primary mc-btn-dark">Curate Gallery</button>
    <button class="mc-btn mc-btn-primary mc-btn-accent">Confirm Atelier</button>
</div>

CSS (Component Only)

/* Component: Stark Solid Buttons */
/* NOTE: This component requires base.css to be included in your page. */

.mc-btn-container {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.mc-btn-dark {
    background-color: #1A1A1A !important;
    border-color: #1A1A1A !important;
}

.mc-btn-dark:hover {
    background-color: var(--mc-bg) !important;
    color: #1A1A1A !important;
}

.mc-btn-accent {
    background-color: var(--mc-text) !important;
    color: var(--mc-bg) !important;
    border-color: var(--mc-border) !important;
}

.mc-btn-accent:hover {
    background-color: var(--mc-bg-muted) !important;
    color: var(--mc-text) !important;
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Reset & Root variables */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --mc-bg: #FFFFFF;
    --mc-bg-muted: #FAF8F5; /* Warm alabaster warm white */
    --mc-surface: #FFFFFF;
    
    --mc-text: #000000;
    --mc-text-muted: #666666;
    --mc-text-light: #999999;
    
    --mc-border: #000000;
    --mc-border-muted: #E5E5E0; /* Soft warm hairline gray */
    
    --mc-radius: 0px; /* Stark architectural sharp corners */
    --mc-radius-sm: 0px;
    --mc-radius-full: 9999px; /* For clean circles and capsules only */
    
    --mc-font-heading: 'Cormorant Garamond', Georgia, serif;
    --mc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Editorial cubic transition */
    --mc-transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

body {
    margin: 0;
    font-family: var(--mc-font-body);
    color: var(--mc-text);
    background-color: var(--mc-bg);
    -webkit-font-smoothing: antialiased;
}

/* Surface containers */
.mc-surface {
    background-color: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    padding: 2.5rem;
    transition: var(--mc-transition);
}

/* Global Logo */
.mc-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    font-family: var(--mc-font-body);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mc-text);
    transition: var(--mc-transition);
}

.mc-logo span {
    font-weight: 300;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

.mc-logo-icon {
    width: 30px;
    height: 30px;
    background-color: var(--mc-text);
    color: var(--mc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0;
    transition: var(--mc-transition);
}

/* Global Buttons */
.mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2.25rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: var(--mc-radius);
    cursor: pointer;
    text-decoration: none;
    transition: var(--mc-transition);
    gap: 0.5rem;
    position: relative;
}

.mc-btn-primary {
    background-color: var(--mc-text);
    color: var(--mc-bg);
    border-color: var(--mc-border);
}

.mc-btn-primary:hover {
    background-color: var(--mc-bg);
    color: var(--mc-text);
}

.mc-btn-outline {
    background-color: transparent;
    color: var(--mc-text);
    border-color: var(--mc-border);
}

.mc-btn-outline:hover {
    background-color: var(--mc-text);
    color: var(--mc-bg);
}

.mc-btn-ghost {
    background-color: transparent;
    color: var(--mc-text);
    border-color: transparent;
    padding-left: 1rem;
    padding-right: 1rem;
}

.mc-btn-ghost:hover {
    background-color: var(--mc-bg-muted);
}

.mc-btn-circle {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mc-btn-block {
    width: 100%;
}

/* Form Fields */
.mc-input {
    width: 100%;
    padding: 0.95rem 1.25rem;
    border: 1px solid var(--mc-border-muted);
    border-radius: var(--mc-radius);
    font-family: var(--mc-font-body);
    font-size: 0.9rem;
    color: var(--mc-text);
    background-color: var(--mc-surface);
    outline: none;
    transition: var(--mc-transition);
}

.mc-input::placeholder {
    color: var(--mc-text-light);
    opacity: 0.7;
}

.mc-input:focus {
    border-color: var(--mc-border);
    background-color: var(--mc-bg-muted);
}

.mc-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mc-text);
}

/* Typography resets */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--mc-font-heading);
    font-weight: 400; /* Editorial serifs are more stunning when thin/medium */
    margin: 0;
    color: var(--mc-text);
    line-height: 1.2;
}

p {
    font-family: var(--mc-font-body);
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
    color: var(--mc-text-muted);
}

/* Utility Colors & Text alignments */
.text-white { color: #FFFFFF !important; }
.text-black { color: #000000 !important; }
.text-muted { color: var(--mc-text-muted) !important; }

.bg-white { background-color: #FFFFFF !important; }
.bg-black { background-color: #000000 !important; }
.bg-warm { background-color: var(--mc-bg-muted) !important; }

.align-center { text-align: center !important; }
.align-right { text-align: right !important; }


/* --- COMPONENT STYLES --- */
.mc-btn-container {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.mc-btn-dark {
    background-color: #1A1A1A !important;
    border-color: #1A1A1A !important;
}

.mc-btn-dark:hover {
    background-color: var(--mc-bg) !important;
    color: #1A1A1A !important;
}

.mc-btn-accent {
    background-color: var(--mc-text) !important;
    color: var(--mc-bg) !important;
    border-color: var(--mc-border) !important;
}

.mc-btn-accent:hover {
    background-color: var(--mc-bg-muted) !important;
    color: var(--mc-text) !important;
}

Hairline Outline Buttons

HTML

<div class="mc-btn-container">
    <button class="mc-btn mc-btn-outline">Read Monograph</button>
    <button class="mc-btn mc-btn-ghost">View Archive</button>
    
    <div class="mc-socials-group">
        <a href="#" class="mc-btn mc-btn-circle mc-btn-outline" aria-label="Twitter">
            <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
        </a>
        <a href="#" class="mc-btn mc-btn-circle mc-btn-outline" aria-label="LinkedIn">
            <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
        </a>
        <a href="#" class="mc-btn mc-btn-circle mc-btn-outline" aria-label="Instagram">
            <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
        </a>
    </div>
</div>

CSS (Component Only)

/* Component: Hairline Outline Buttons */
/* NOTE: This component requires base.css to be included in your page. */

.mc-btn-container {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.mc-socials-group {
    display: flex;
    gap: 0.75rem;
}

.mc-socials-group .mc-btn-circle {
    border-radius: 50% !important;
}

.mc-socials-group .mc-btn-circle svg {
    display: block;
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Reset & Root variables */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --mc-bg: #FFFFFF;
    --mc-bg-muted: #FAF8F5; /* Warm alabaster warm white */
    --mc-surface: #FFFFFF;
    
    --mc-text: #000000;
    --mc-text-muted: #666666;
    --mc-text-light: #999999;
    
    --mc-border: #000000;
    --mc-border-muted: #E5E5E0; /* Soft warm hairline gray */
    
    --mc-radius: 0px; /* Stark architectural sharp corners */
    --mc-radius-sm: 0px;
    --mc-radius-full: 9999px; /* For clean circles and capsules only */
    
    --mc-font-heading: 'Cormorant Garamond', Georgia, serif;
    --mc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Editorial cubic transition */
    --mc-transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

body {
    margin: 0;
    font-family: var(--mc-font-body);
    color: var(--mc-text);
    background-color: var(--mc-bg);
    -webkit-font-smoothing: antialiased;
}

/* Surface containers */
.mc-surface {
    background-color: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    padding: 2.5rem;
    transition: var(--mc-transition);
}

/* Global Logo */
.mc-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    font-family: var(--mc-font-body);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mc-text);
    transition: var(--mc-transition);
}

.mc-logo span {
    font-weight: 300;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

.mc-logo-icon {
    width: 30px;
    height: 30px;
    background-color: var(--mc-text);
    color: var(--mc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0;
    transition: var(--mc-transition);
}

/* Global Buttons */
.mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2.25rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: var(--mc-radius);
    cursor: pointer;
    text-decoration: none;
    transition: var(--mc-transition);
    gap: 0.5rem;
    position: relative;
}

.mc-btn-primary {
    background-color: var(--mc-text);
    color: var(--mc-bg);
    border-color: var(--mc-border);
}

.mc-btn-primary:hover {
    background-color: var(--mc-bg);
    color: var(--mc-text);
}

.mc-btn-outline {
    background-color: transparent;
    color: var(--mc-text);
    border-color: var(--mc-border);
}

.mc-btn-outline:hover {
    background-color: var(--mc-text);
    color: var(--mc-bg);
}

.mc-btn-ghost {
    background-color: transparent;
    color: var(--mc-text);
    border-color: transparent;
    padding-left: 1rem;
    padding-right: 1rem;
}

.mc-btn-ghost:hover {
    background-color: var(--mc-bg-muted);
}

.mc-btn-circle {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mc-btn-block {
    width: 100%;
}

/* Form Fields */
.mc-input {
    width: 100%;
    padding: 0.95rem 1.25rem;
    border: 1px solid var(--mc-border-muted);
    border-radius: var(--mc-radius);
    font-family: var(--mc-font-body);
    font-size: 0.9rem;
    color: var(--mc-text);
    background-color: var(--mc-surface);
    outline: none;
    transition: var(--mc-transition);
}

.mc-input::placeholder {
    color: var(--mc-text-light);
    opacity: 0.7;
}

.mc-input:focus {
    border-color: var(--mc-border);
    background-color: var(--mc-bg-muted);
}

.mc-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mc-text);
}

/* Typography resets */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--mc-font-heading);
    font-weight: 400; /* Editorial serifs are more stunning when thin/medium */
    margin: 0;
    color: var(--mc-text);
    line-height: 1.2;
}

p {
    font-family: var(--mc-font-body);
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
    color: var(--mc-text-muted);
}

/* Utility Colors & Text alignments */
.text-white { color: #FFFFFF !important; }
.text-black { color: #000000 !important; }
.text-muted { color: var(--mc-text-muted) !important; }

.bg-white { background-color: #FFFFFF !important; }
.bg-black { background-color: #000000 !important; }
.bg-warm { background-color: var(--mc-bg-muted) !important; }

.align-center { text-align: center !important; }
.align-right { text-align: right !important; }


/* --- COMPONENT STYLES --- */
.mc-btn-container {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.mc-socials-group {
    display: flex;
    gap: 0.75rem;
}

.mc-socials-group .mc-btn-circle {
    border-radius: 50% !important;
}

.mc-socials-group .mc-btn-circle svg {
    display: block;
}

Forms

Stark Editorial Login

HTML

<div class="mc-login-card mc-surface">
    <div class="mc-login-header">
        <h2>Enter Atelier</h2>
        <p>Enter credentials to access active design workspaces.</p>
    </div>
    
    <form class="mc-login-form" onsubmit="return false;">
        <div class="mc-form-group">
            <label class="mc-label" for="login-email">Email Address</label>
            <input type="email" id="login-email" class="mc-input" placeholder="[email protected]" required>
        </div>
        
        <div class="mc-form-group">
            <label class="mc-label" for="login-password">Password</label>
            <input type="password" id="login-password" class="mc-input" placeholder="••••••••" required>
        </div>
        
        <div class="mc-form-options">
            <label class="mc-checkbox-container">
                <input type="checkbox" checked>
                <span class="mc-checkmark"></span>
                <span class="mc-checkbox-label">Keep session active</span>
            </label>
            <a href="#" class="mc-forgot-link">Lost password?</a>
        </div>
        
        <button type="submit" class="mc-btn mc-btn-primary mc-btn-block">Initialize Session</button>
    </form>
    
    <div class="mc-login-divider">
        <span>or enter via key</span>
    </div>
    
    <div class="mc-social-login">
        <button class="mc-btn mc-btn-circle mc-btn-outline" aria-label="Sign in with Google">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12.24 10.285V13.4h6.887C18.2 15.614 15.645 18 12.24 18c-3.86 0-7-3.14-7-7s3.14-7 7-7c1.7 0 3.3.6 4.6 1.8l2.4-2.4C17.3 1.7 14.9 1 12.24 1c-5.5 0-10 4.5-10 10s4.5 10 10 10c5.8 0 9.8-4.1 9.8-10 0-.6 0-1.1-.1-1.7H12.24z"/></svg>
        </button>
        <button class="mc-btn mc-btn-circle mc-btn-outline" aria-label="Sign in with GitHub">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
        </button>
    </div>
</div>

CSS (Component Only)

/* Component: Stark Editorial Login */
/* NOTE: This component requires base.css to be included in your page. */

.mc-login-card {
    max-width: 440px;
    margin: 2rem auto;
    padding: 3.5rem 3rem !important;
}

.mc-login-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.mc-login-header h2 {
    font-size: 2.25rem;
    margin-bottom: 0.75rem;
}

.mc-login-header p {
    font-size: 0.9rem;
    color: var(--mc-text-muted);
}

.mc-login-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mc-form-group {
    display: flex;
    flex-direction: column;
}

.mc-form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

/* Custom Sharp Checkbox */
.mc-checkbox-container {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    gap: 0.6rem;
    font-weight: 700;
    color: var(--mc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mc-checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.mc-checkmark {
    width: 16px;
    height: 16px;
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-sm);
    display: inline-block;
    position: relative;
    transition: var(--mc-transition);
}

.mc-checkbox-container:hover input ~ .mc-checkmark {
    background-color: var(--mc-bg-muted);
}

.mc-checkbox-container input:checked ~ .mc-checkmark {
    background-color: var(--mc-text);
}

.mc-checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 2px;
    width: 3px;
    height: 7px;
    border: solid var(--mc-bg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.mc-checkbox-container input:checked ~ .mc-checkmark:after {
    display: block;
}

.mc-forgot-link {
    color: var(--mc-text-muted);
    text-decoration: underline;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: var(--mc-transition);
}

.mc-forgot-link:hover {
    color: var(--mc-text);
}

/* Divider */
.mc-login-divider {
    text-align: center;
    margin: 2rem 0;
    position: relative;
}

.mc-login-divider:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--mc-border-muted);
    z-index: 1;
}

.mc-login-divider span {
    background-color: var(--mc-surface);
    padding: 0 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mc-text-light);
    position: relative;
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Socials */
.mc-social-login {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.mc-social-login .mc-btn-circle svg {
    display: block;
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Reset & Root variables */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --mc-bg: #FFFFFF;
    --mc-bg-muted: #FAF8F5; /* Warm alabaster warm white */
    --mc-surface: #FFFFFF;
    
    --mc-text: #000000;
    --mc-text-muted: #666666;
    --mc-text-light: #999999;
    
    --mc-border: #000000;
    --mc-border-muted: #E5E5E0; /* Soft warm hairline gray */
    
    --mc-radius: 0px; /* Stark architectural sharp corners */
    --mc-radius-sm: 0px;
    --mc-radius-full: 9999px; /* For clean circles and capsules only */
    
    --mc-font-heading: 'Cormorant Garamond', Georgia, serif;
    --mc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Editorial cubic transition */
    --mc-transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

body {
    margin: 0;
    font-family: var(--mc-font-body);
    color: var(--mc-text);
    background-color: var(--mc-bg);
    -webkit-font-smoothing: antialiased;
}

/* Surface containers */
.mc-surface {
    background-color: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    padding: 2.5rem;
    transition: var(--mc-transition);
}

/* Global Logo */
.mc-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    font-family: var(--mc-font-body);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mc-text);
    transition: var(--mc-transition);
}

.mc-logo span {
    font-weight: 300;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

.mc-logo-icon {
    width: 30px;
    height: 30px;
    background-color: var(--mc-text);
    color: var(--mc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0;
    transition: var(--mc-transition);
}

/* Global Buttons */
.mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2.25rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: var(--mc-radius);
    cursor: pointer;
    text-decoration: none;
    transition: var(--mc-transition);
    gap: 0.5rem;
    position: relative;
}

.mc-btn-primary {
    background-color: var(--mc-text);
    color: var(--mc-bg);
    border-color: var(--mc-border);
}

.mc-btn-primary:hover {
    background-color: var(--mc-bg);
    color: var(--mc-text);
}

.mc-btn-outline {
    background-color: transparent;
    color: var(--mc-text);
    border-color: var(--mc-border);
}

.mc-btn-outline:hover {
    background-color: var(--mc-text);
    color: var(--mc-bg);
}

.mc-btn-ghost {
    background-color: transparent;
    color: var(--mc-text);
    border-color: transparent;
    padding-left: 1rem;
    padding-right: 1rem;
}

.mc-btn-ghost:hover {
    background-color: var(--mc-bg-muted);
}

.mc-btn-circle {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mc-btn-block {
    width: 100%;
}

/* Form Fields */
.mc-input {
    width: 100%;
    padding: 0.95rem 1.25rem;
    border: 1px solid var(--mc-border-muted);
    border-radius: var(--mc-radius);
    font-family: var(--mc-font-body);
    font-size: 0.9rem;
    color: var(--mc-text);
    background-color: var(--mc-surface);
    outline: none;
    transition: var(--mc-transition);
}

.mc-input::placeholder {
    color: var(--mc-text-light);
    opacity: 0.7;
}

.mc-input:focus {
    border-color: var(--mc-border);
    background-color: var(--mc-bg-muted);
}

.mc-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mc-text);
}

/* Typography resets */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--mc-font-heading);
    font-weight: 400; /* Editorial serifs are more stunning when thin/medium */
    margin: 0;
    color: var(--mc-text);
    line-height: 1.2;
}

p {
    font-family: var(--mc-font-body);
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
    color: var(--mc-text-muted);
}

/* Utility Colors & Text alignments */
.text-white { color: #FFFFFF !important; }
.text-black { color: #000000 !important; }
.text-muted { color: var(--mc-text-muted) !important; }

.bg-white { background-color: #FFFFFF !important; }
.bg-black { background-color: #000000 !important; }
.bg-warm { background-color: var(--mc-bg-muted) !important; }

.align-center { text-align: center !important; }
.align-right { text-align: right !important; }


/* --- COMPONENT STYLES --- */
.mc-login-card {
    max-width: 440px;
    margin: 2rem auto;
    padding: 3.5rem 3rem !important;
}

.mc-login-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.mc-login-header h2 {
    font-size: 2.25rem;
    margin-bottom: 0.75rem;
}

.mc-login-header p {
    font-size: 0.9rem;
    color: var(--mc-text-muted);
}

.mc-login-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mc-form-group {
    display: flex;
    flex-direction: column;
}

.mc-form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

/* Custom Sharp Checkbox */
.mc-checkbox-container {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    gap: 0.6rem;
    font-weight: 700;
    color: var(--mc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mc-checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.mc-checkmark {
    width: 16px;
    height: 16px;
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-sm);
    display: inline-block;
    position: relative;
    transition: var(--mc-transition);
}

.mc-checkbox-container:hover input ~ .mc-checkmark {
    background-color: var(--mc-bg-muted);
}

.mc-checkbox-container input:checked ~ .mc-checkmark {
    background-color: var(--mc-text);
}

.mc-checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 2px;
    width: 3px;
    height: 7px;
    border: solid var(--mc-bg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.mc-checkbox-container input:checked ~ .mc-checkmark:after {
    display: block;
}

.mc-forgot-link {
    color: var(--mc-text-muted);
    text-decoration: underline;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: var(--mc-transition);
}

.mc-forgot-link:hover {
    color: var(--mc-text);
}

/* Divider */
.mc-login-divider {
    text-align: center;
    margin: 2rem 0;
    position: relative;
}

.mc-login-divider:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--mc-border-muted);
    z-index: 1;
}

.mc-login-divider span {
    background-color: var(--mc-surface);
    padding: 0 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mc-text-light);
    position: relative;
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Socials */
.mc-social-login {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.mc-social-login .mc-btn-circle svg {
    display: block;
}

Studio Settings Form

HTML

<div class="mc-settings-card mc-surface">
    <div class="mc-settings-header">
        <h3>Atelier Profile</h3>
        <p class="mc-settings-subtitle">Manage public information and curation preferences.</p>
    </div>
    
    <form class="mc-settings-form" onsubmit="return false;">
        <div class="mc-form-row">
            <div class="mc-form-group">
                <label class="mc-label" for="settings-first">First Name</label>
                <input type="text" id="settings-first" class="mc-input" value="Alex">
            </div>
            
            <div class="mc-form-group">
                <label class="mc-label" for="settings-last">Last Name</label>
                <input type="text" id="settings-last" class="mc-input" value="Moreau">
            </div>
        </div>
        
        <div class="mc-form-group">
            <label class="mc-label" for="settings-email">Email Address</label>
            <input type="email" id="settings-email" class="mc-input" value="[email protected]">
        </div>
        
        <div class="mc-form-group">
            <label class="mc-label" for="settings-bio">Biography</label>
            <textarea id="settings-bio" class="mc-input mc-textarea" rows="4">Curator of high-contrast volumetric negative space and silent structural alignments. Built with Cormorant Garamond and Inter.</textarea>
        </div>
        
        <hr class="mc-divider-line">
        
        <div class="mc-toggle-group">
            <div class="mc-toggle-text">
                <h4>Contrast Boost</h4>
                <p>Enhance hairline border weights for extreme high-contrast lighting displays.</p>
            </div>
            <label class="mc-toggle">
                <input type="checkbox" checked>
                <span class="mc-slider"></span>
            </label>
        </div>
        
        <div class="mc-settings-actions">
            <button type="button" class="mc-btn mc-btn-outline">Reset Changes</button>
            <button type="submit" class="mc-btn mc-btn-primary">Save Configurations</button>
        </div>
    </form>
</div>

CSS (Component Only)

/* Component: Studio Settings Form */
/* NOTE: This component requires base.css to be included in your page. */

.mc-settings-card {
    max-width: 600px;
    margin: 2rem auto;
    padding: 3.5rem 3rem !important;
}

.mc-settings-header {
    margin-bottom: 2.5rem;
}

.mc-settings-header h3 {
    font-size: 1.85rem;
    margin-bottom: 0.5rem;
}

.mc-settings-subtitle {
    font-size: 0.9rem;
    color: var(--mc-text-muted);
}

.mc-settings-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mc-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.mc-textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}

.mc-divider-line {
    border: 0;
    height: 1px;
    background-color: var(--mc-border-muted);
    margin: 0.75rem 0;
}

/* Custom Stark Rectangular Toggle Switch */
.mc-toggle-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.mc-toggle-text h4 {
    font-family: var(--mc-font-body);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.mc-toggle-text p {
    font-size: 0.8rem;
    color: var(--mc-text-muted);
}

.mc-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
    flex-shrink: 0;
}

.mc-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.mc-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--mc-surface);
    border: 1px solid var(--mc-border);
    transition: var(--mc-transition);
}

.mc-slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 4px;
    bottom: 4px;
    background-color: var(--mc-text);
    transition: var(--mc-transition);
}

.mc-toggle input:checked + .mc-slider {
    background-color: var(--mc-text);
}

.mc-toggle input:checked + .mc-slider:before {
    background-color: var(--mc-surface);
    transform: translateX(22px);
}

.mc-settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1.5rem;
    margin-top: 1rem;
}

@media (max-width: 600px) {
    .mc-form-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .mc-settings-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .mc-settings-actions .mc-btn {
        width: 100%;
    }
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Reset & Root variables */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --mc-bg: #FFFFFF;
    --mc-bg-muted: #FAF8F5; /* Warm alabaster warm white */
    --mc-surface: #FFFFFF;
    
    --mc-text: #000000;
    --mc-text-muted: #666666;
    --mc-text-light: #999999;
    
    --mc-border: #000000;
    --mc-border-muted: #E5E5E0; /* Soft warm hairline gray */
    
    --mc-radius: 0px; /* Stark architectural sharp corners */
    --mc-radius-sm: 0px;
    --mc-radius-full: 9999px; /* For clean circles and capsules only */
    
    --mc-font-heading: 'Cormorant Garamond', Georgia, serif;
    --mc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Editorial cubic transition */
    --mc-transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

body {
    margin: 0;
    font-family: var(--mc-font-body);
    color: var(--mc-text);
    background-color: var(--mc-bg);
    -webkit-font-smoothing: antialiased;
}

/* Surface containers */
.mc-surface {
    background-color: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    padding: 2.5rem;
    transition: var(--mc-transition);
}

/* Global Logo */
.mc-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    font-family: var(--mc-font-body);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mc-text);
    transition: var(--mc-transition);
}

.mc-logo span {
    font-weight: 300;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

.mc-logo-icon {
    width: 30px;
    height: 30px;
    background-color: var(--mc-text);
    color: var(--mc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0;
    transition: var(--mc-transition);
}

/* Global Buttons */
.mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2.25rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: var(--mc-radius);
    cursor: pointer;
    text-decoration: none;
    transition: var(--mc-transition);
    gap: 0.5rem;
    position: relative;
}

.mc-btn-primary {
    background-color: var(--mc-text);
    color: var(--mc-bg);
    border-color: var(--mc-border);
}

.mc-btn-primary:hover {
    background-color: var(--mc-bg);
    color: var(--mc-text);
}

.mc-btn-outline {
    background-color: transparent;
    color: var(--mc-text);
    border-color: var(--mc-border);
}

.mc-btn-outline:hover {
    background-color: var(--mc-text);
    color: var(--mc-bg);
}

.mc-btn-ghost {
    background-color: transparent;
    color: var(--mc-text);
    border-color: transparent;
    padding-left: 1rem;
    padding-right: 1rem;
}

.mc-btn-ghost:hover {
    background-color: var(--mc-bg-muted);
}

.mc-btn-circle {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mc-btn-block {
    width: 100%;
}

/* Form Fields */
.mc-input {
    width: 100%;
    padding: 0.95rem 1.25rem;
    border: 1px solid var(--mc-border-muted);
    border-radius: var(--mc-radius);
    font-family: var(--mc-font-body);
    font-size: 0.9rem;
    color: var(--mc-text);
    background-color: var(--mc-surface);
    outline: none;
    transition: var(--mc-transition);
}

.mc-input::placeholder {
    color: var(--mc-text-light);
    opacity: 0.7;
}

.mc-input:focus {
    border-color: var(--mc-border);
    background-color: var(--mc-bg-muted);
}

.mc-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mc-text);
}

/* Typography resets */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--mc-font-heading);
    font-weight: 400; /* Editorial serifs are more stunning when thin/medium */
    margin: 0;
    color: var(--mc-text);
    line-height: 1.2;
}

p {
    font-family: var(--mc-font-body);
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
    color: var(--mc-text-muted);
}

/* Utility Colors & Text alignments */
.text-white { color: #FFFFFF !important; }
.text-black { color: #000000 !important; }
.text-muted { color: var(--mc-text-muted) !important; }

.bg-white { background-color: #FFFFFF !important; }
.bg-black { background-color: #000000 !important; }
.bg-warm { background-color: var(--mc-bg-muted) !important; }

.align-center { text-align: center !important; }
.align-right { text-align: right !important; }


/* --- COMPONENT STYLES --- */
.mc-settings-card {
    max-width: 600px;
    margin: 2rem auto;
    padding: 3.5rem 3rem !important;
}

.mc-settings-header {
    margin-bottom: 2.5rem;
}

.mc-settings-header h3 {
    font-size: 1.85rem;
    margin-bottom: 0.5rem;
}

.mc-settings-subtitle {
    font-size: 0.9rem;
    color: var(--mc-text-muted);
}

.mc-settings-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mc-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.mc-textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}

.mc-divider-line {
    border: 0;
    height: 1px;
    background-color: var(--mc-border-muted);
    margin: 0.75rem 0;
}

/* Custom Stark Rectangular Toggle Switch */
.mc-toggle-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.mc-toggle-text h4 {
    font-family: var(--mc-font-body);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.mc-toggle-text p {
    font-size: 0.8rem;
    color: var(--mc-text-muted);
}

.mc-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
    flex-shrink: 0;
}

.mc-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.mc-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--mc-surface);
    border: 1px solid var(--mc-border);
    transition: var(--mc-transition);
}

.mc-slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 4px;
    bottom: 4px;
    background-color: var(--mc-text);
    transition: var(--mc-transition);
}

.mc-toggle input:checked + .mc-slider {
    background-color: var(--mc-text);
}

.mc-toggle input:checked + .mc-slider:before {
    background-color: var(--mc-surface);
    transform: translateX(22px);
}

.mc-settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1.5rem;
    margin-top: 1rem;
}

@media (max-width: 600px) {
    .mc-form-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .mc-settings-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .mc-settings-actions .mc-btn {
        width: 100%;
    }
}

Cards

High-Contrast Metrics Cards

HTML

<div class="mc-stats-grid">
    <div class="mc-stat-card mc-surface bg-black text-white">
        <div class="mc-stat-header">
            <span class="mc-stat-title">Active Curations</span>
            <div class="mc-stat-indicator bg-white"></div>
        </div>
        <div class="mc-stat-value">148</div>
        <div class="mc-stat-footer text-muted">
            <span class="mc-trend-label">Studio space utilization</span>
        </div>
    </div>
    
    <div class="mc-stat-card mc-surface bg-white text-black">
        <div class="mc-stat-header">
            <span class="mc-stat-title">Archival Ledger</span>
            <div class="mc-stat-indicator bg-black"></div>
        </div>
        <div class="mc-stat-value">2,340</div>
        <div class="mc-stat-footer">
            <span class="mc-trend-label">Documented spatial volumes</span>
        </div>
    </div>
    
    <div class="mc-stat-card mc-surface bg-warm text-black" style="border-color: var(--mc-border-muted);">
        <div class="mc-stat-header">
            <span class="mc-stat-title">Exposure Score</span>
            <div class="mc-stat-indicator bg-black" style="opacity: 0.2;"></div>
        </div>
        <div class="mc-stat-value">98.4%</div>
        <div class="mc-stat-footer">
            <span class="mc-trend-label">Average design clarity cycles</span>
        </div>
    </div>
</div>

CSS (Component Only)

/* Component: High-Contrast Metrics Cards */
/* NOTE: This component requires base.css to be included in your page. */

.mc-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.mc-stat-card {
    display: flex;
    flex-direction: column;
    padding: 2.5rem !important;
    border-radius: var(--mc-radius) !important;
    border: 1px solid var(--mc-border) !important;
    position: relative;
    overflow: hidden;
}

.mc-stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

.mc-stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.mc-stat-title {
    font-family: var(--mc-font-body);
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.mc-stat-indicator {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
}

.mc-stat-value {
    font-family: var(--mc-font-heading);
    font-size: 3rem;
    margin-bottom: 1.5rem;
    line-height: 1;
}

.mc-stat-footer {
    font-family: var(--mc-font-body);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.mc-stat-card.bg-black .mc-stat-footer {
    color: #999999;
}

.mc-stat-card.bg-white .mc-stat-footer {
    color: var(--mc-text-muted);
}

.mc-stat-card.bg-warm .mc-stat-footer {
    color: var(--mc-text-muted);
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Reset & Root variables */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --mc-bg: #FFFFFF;
    --mc-bg-muted: #FAF8F5; /* Warm alabaster warm white */
    --mc-surface: #FFFFFF;
    
    --mc-text: #000000;
    --mc-text-muted: #666666;
    --mc-text-light: #999999;
    
    --mc-border: #000000;
    --mc-border-muted: #E5E5E0; /* Soft warm hairline gray */
    
    --mc-radius: 0px; /* Stark architectural sharp corners */
    --mc-radius-sm: 0px;
    --mc-radius-full: 9999px; /* For clean circles and capsules only */
    
    --mc-font-heading: 'Cormorant Garamond', Georgia, serif;
    --mc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Editorial cubic transition */
    --mc-transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

body {
    margin: 0;
    font-family: var(--mc-font-body);
    color: var(--mc-text);
    background-color: var(--mc-bg);
    -webkit-font-smoothing: antialiased;
}

/* Surface containers */
.mc-surface {
    background-color: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    padding: 2.5rem;
    transition: var(--mc-transition);
}

/* Global Logo */
.mc-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    font-family: var(--mc-font-body);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mc-text);
    transition: var(--mc-transition);
}

.mc-logo span {
    font-weight: 300;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

.mc-logo-icon {
    width: 30px;
    height: 30px;
    background-color: var(--mc-text);
    color: var(--mc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0;
    transition: var(--mc-transition);
}

/* Global Buttons */
.mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2.25rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: var(--mc-radius);
    cursor: pointer;
    text-decoration: none;
    transition: var(--mc-transition);
    gap: 0.5rem;
    position: relative;
}

.mc-btn-primary {
    background-color: var(--mc-text);
    color: var(--mc-bg);
    border-color: var(--mc-border);
}

.mc-btn-primary:hover {
    background-color: var(--mc-bg);
    color: var(--mc-text);
}

.mc-btn-outline {
    background-color: transparent;
    color: var(--mc-text);
    border-color: var(--mc-border);
}

.mc-btn-outline:hover {
    background-color: var(--mc-text);
    color: var(--mc-bg);
}

.mc-btn-ghost {
    background-color: transparent;
    color: var(--mc-text);
    border-color: transparent;
    padding-left: 1rem;
    padding-right: 1rem;
}

.mc-btn-ghost:hover {
    background-color: var(--mc-bg-muted);
}

.mc-btn-circle {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mc-btn-block {
    width: 100%;
}

/* Form Fields */
.mc-input {
    width: 100%;
    padding: 0.95rem 1.25rem;
    border: 1px solid var(--mc-border-muted);
    border-radius: var(--mc-radius);
    font-family: var(--mc-font-body);
    font-size: 0.9rem;
    color: var(--mc-text);
    background-color: var(--mc-surface);
    outline: none;
    transition: var(--mc-transition);
}

.mc-input::placeholder {
    color: var(--mc-text-light);
    opacity: 0.7;
}

.mc-input:focus {
    border-color: var(--mc-border);
    background-color: var(--mc-bg-muted);
}

.mc-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mc-text);
}

/* Typography resets */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--mc-font-heading);
    font-weight: 400; /* Editorial serifs are more stunning when thin/medium */
    margin: 0;
    color: var(--mc-text);
    line-height: 1.2;
}

p {
    font-family: var(--mc-font-body);
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
    color: var(--mc-text-muted);
}

/* Utility Colors & Text alignments */
.text-white { color: #FFFFFF !important; }
.text-black { color: #000000 !important; }
.text-muted { color: var(--mc-text-muted) !important; }

.bg-white { background-color: #FFFFFF !important; }
.bg-black { background-color: #000000 !important; }
.bg-warm { background-color: var(--mc-bg-muted) !important; }

.align-center { text-align: center !important; }
.align-right { text-align: right !important; }


/* --- COMPONENT STYLES --- */
.mc-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.mc-stat-card {
    display: flex;
    flex-direction: column;
    padding: 2.5rem !important;
    border-radius: var(--mc-radius) !important;
    border: 1px solid var(--mc-border) !important;
    position: relative;
    overflow: hidden;
}

.mc-stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

.mc-stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.mc-stat-title {
    font-family: var(--mc-font-body);
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.mc-stat-indicator {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
}

.mc-stat-value {
    font-family: var(--mc-font-heading);
    font-size: 3rem;
    margin-bottom: 1.5rem;
    line-height: 1;
}

.mc-stat-footer {
    font-family: var(--mc-font-body);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.mc-stat-card.bg-black .mc-stat-footer {
    color: #999999;
}

.mc-stat-card.bg-white .mc-stat-footer {
    color: var(--mc-text-muted);
}

.mc-stat-card.bg-warm .mc-stat-footer {
    color: var(--mc-text-muted);
}

Editorial Pricing Tier

HTML

<div class="mc-pricing-card mc-surface">
    <div class="mc-pricing-header">
        <h3 class="mc-pricing-title">Atelier Resident</h3>
        <p class="mc-pricing-desc">Stark spatial assets designed for active professional architects.</p>
        <div class="mc-pricing-price">
            <span class="mc-currency">$</span>
            <span class="mc-amount">89</span>
            <span class="mc-period">/mo</span>
        </div>
    </div>
    
    <div class="mc-pricing-features">
        <ul>
            <li>
                <div class="mc-square-bullet"></div>
                Infinite Curated Workspaces
            </li>
            <li>
                <div class="mc-square-bullet"></div>
                Studio Spatial Subdomains
            </li>
            <li>
                <div class="mc-square-bullet"></div>
                100% Volumetric Control
            </li>
            <li class="mc-feature-disabled">
                <div class="mc-square-bullet disabled"></div>
                Personal Curation Director
            </li>
        </ul>
    </div>
    
    <div class="mc-pricing-footer">
        <button class="mc-btn mc-btn-primary mc-btn-block">Initialize Atelier</button>
    </div>
</div>

CSS (Component Only)

/* Component: Editorial Pricing Tier */
/* NOTE: This component requires base.css to be included in your page. */

.mc-pricing-card {
    max-width: 380px;
    margin: 2rem auto;
    padding: 3.5rem 2.5rem 2.5rem;
    position: relative;
    border: 1px solid var(--mc-border) !important;
    border-radius: var(--mc-radius) !important;
}

.mc-pricing-header {
    text-align: center;
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--mc-border-muted);
}

.mc-pricing-title {
    font-size: 1.85rem;
    margin-bottom: 0.5rem;
}

.mc-pricing-desc {
    font-size: 0.85rem;
    color: var(--mc-text-muted);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.mc-pricing-price {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: var(--mc-text);
}

.mc-currency {
    font-family: var(--mc-font-heading);
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
    margin-right: 0.2rem;
}

.mc-amount {
    font-family: var(--mc-font-heading);
    font-size: 3.75rem;
    font-weight: 400;
    line-height: 1;
}

.mc-period {
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mc-text-light);
    margin-bottom: 0.4rem;
    margin-left: 0.2rem;
}

.mc-pricing-features ul {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.mc-pricing-features li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 0.9rem;
    color: var(--mc-text);
    font-weight: 500;
}

.mc-square-bullet {
    width: 6px;
    height: 6px;
    background-color: var(--mc-text);
    flex-shrink: 0;
}

.mc-square-bullet.disabled {
    background-color: var(--mc-text-light);
    opacity: 0.3;
}

.mc-feature-disabled {
    color: var(--mc-text-light) !important;
    text-decoration: line-through;
    opacity: 0.6;
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Reset & Root variables */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --mc-bg: #FFFFFF;
    --mc-bg-muted: #FAF8F5; /* Warm alabaster warm white */
    --mc-surface: #FFFFFF;
    
    --mc-text: #000000;
    --mc-text-muted: #666666;
    --mc-text-light: #999999;
    
    --mc-border: #000000;
    --mc-border-muted: #E5E5E0; /* Soft warm hairline gray */
    
    --mc-radius: 0px; /* Stark architectural sharp corners */
    --mc-radius-sm: 0px;
    --mc-radius-full: 9999px; /* For clean circles and capsules only */
    
    --mc-font-heading: 'Cormorant Garamond', Georgia, serif;
    --mc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Editorial cubic transition */
    --mc-transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

body {
    margin: 0;
    font-family: var(--mc-font-body);
    color: var(--mc-text);
    background-color: var(--mc-bg);
    -webkit-font-smoothing: antialiased;
}

/* Surface containers */
.mc-surface {
    background-color: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    padding: 2.5rem;
    transition: var(--mc-transition);
}

/* Global Logo */
.mc-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    font-family: var(--mc-font-body);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mc-text);
    transition: var(--mc-transition);
}

.mc-logo span {
    font-weight: 300;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

.mc-logo-icon {
    width: 30px;
    height: 30px;
    background-color: var(--mc-text);
    color: var(--mc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0;
    transition: var(--mc-transition);
}

/* Global Buttons */
.mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2.25rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: var(--mc-radius);
    cursor: pointer;
    text-decoration: none;
    transition: var(--mc-transition);
    gap: 0.5rem;
    position: relative;
}

.mc-btn-primary {
    background-color: var(--mc-text);
    color: var(--mc-bg);
    border-color: var(--mc-border);
}

.mc-btn-primary:hover {
    background-color: var(--mc-bg);
    color: var(--mc-text);
}

.mc-btn-outline {
    background-color: transparent;
    color: var(--mc-text);
    border-color: var(--mc-border);
}

.mc-btn-outline:hover {
    background-color: var(--mc-text);
    color: var(--mc-bg);
}

.mc-btn-ghost {
    background-color: transparent;
    color: var(--mc-text);
    border-color: transparent;
    padding-left: 1rem;
    padding-right: 1rem;
}

.mc-btn-ghost:hover {
    background-color: var(--mc-bg-muted);
}

.mc-btn-circle {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mc-btn-block {
    width: 100%;
}

/* Form Fields */
.mc-input {
    width: 100%;
    padding: 0.95rem 1.25rem;
    border: 1px solid var(--mc-border-muted);
    border-radius: var(--mc-radius);
    font-family: var(--mc-font-body);
    font-size: 0.9rem;
    color: var(--mc-text);
    background-color: var(--mc-surface);
    outline: none;
    transition: var(--mc-transition);
}

.mc-input::placeholder {
    color: var(--mc-text-light);
    opacity: 0.7;
}

.mc-input:focus {
    border-color: var(--mc-border);
    background-color: var(--mc-bg-muted);
}

.mc-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mc-text);
}

/* Typography resets */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--mc-font-heading);
    font-weight: 400; /* Editorial serifs are more stunning when thin/medium */
    margin: 0;
    color: var(--mc-text);
    line-height: 1.2;
}

p {
    font-family: var(--mc-font-body);
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
    color: var(--mc-text-muted);
}

/* Utility Colors & Text alignments */
.text-white { color: #FFFFFF !important; }
.text-black { color: #000000 !important; }
.text-muted { color: var(--mc-text-muted) !important; }

.bg-white { background-color: #FFFFFF !important; }
.bg-black { background-color: #000000 !important; }
.bg-warm { background-color: var(--mc-bg-muted) !important; }

.align-center { text-align: center !important; }
.align-right { text-align: right !important; }


/* --- COMPONENT STYLES --- */
.mc-pricing-card {
    max-width: 380px;
    margin: 2rem auto;
    padding: 3.5rem 2.5rem 2.5rem;
    position: relative;
    border: 1px solid var(--mc-border) !important;
    border-radius: var(--mc-radius) !important;
}

.mc-pricing-header {
    text-align: center;
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--mc-border-muted);
}

.mc-pricing-title {
    font-size: 1.85rem;
    margin-bottom: 0.5rem;
}

.mc-pricing-desc {
    font-size: 0.85rem;
    color: var(--mc-text-muted);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.mc-pricing-price {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: var(--mc-text);
}

.mc-currency {
    font-family: var(--mc-font-heading);
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
    margin-right: 0.2rem;
}

.mc-amount {
    font-family: var(--mc-font-heading);
    font-size: 3.75rem;
    font-weight: 400;
    line-height: 1;
}

.mc-period {
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mc-text-light);
    margin-bottom: 0.4rem;
    margin-left: 0.2rem;
}

.mc-pricing-features ul {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.mc-pricing-features li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 0.9rem;
    color: var(--mc-text);
    font-weight: 500;
}

.mc-square-bullet {
    width: 6px;
    height: 6px;
    background-color: var(--mc-text);
    flex-shrink: 0;
}

.mc-square-bullet.disabled {
    background-color: var(--mc-text-light);
    opacity: 0.3;
}

.mc-feature-disabled {
    color: var(--mc-text-light) !important;
    text-decoration: line-through;
    opacity: 0.6;
}

Tables

Stark Grid Data Table

HTML

<div class="mc-table-wrapper mc-surface">
    <div class="mc-table-header">
        <h3>Atelier Spatial Catalog</h3>
        <button class="mc-btn mc-btn-outline" style="padding: 0.5rem 1.5rem; font-size: 0.7rem;">Export Sheet</button>
    </div>
    
    <div class="mc-table-container">
        <table class="mc-table">
            <thead>
                <tr>
                    <th>Ledger ID</th>
                    <th>Artist / Curator</th>
                    <th>Date Curated</th>
                    <th>Focal Scale</th>
                    <th>Spatial Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>#AT-9021</td>
                    <td>
                        <div class="mc-table-user">
                            <div class="mc-table-avatar">MC</div>
                            <span>Michael Chen</span>
                        </div>
                    </td>
                    <td>18 May 2026</td>
                    <td>12,500 PX</td>
                    <td><span class="mc-status status-active">ACTIVE</span></td>
                </tr>
                
                <tr>
                    <td>#AT-9022</td>
                    <td>
                        <div class="mc-table-user">
                            <div class="mc-table-avatar">CD</div>
                            <span>Clara Dupont</span>
                        </div>
                    </td>
                    <td>18 May 2026</td>
                    <td>2,800 PX</td>
                    <td><span class="mc-status status-pending">PENDING</span></td>
                </tr>
                
                <tr>
                    <td>#AT-9023</td>
                    <td>
                        <div class="mc-table-user">
                            <div class="mc-table-avatar">DS</div>
                            <span>David Smith</span>
                        </div>
                    </td>
                    <td>17 May 2026</td>
                    <td>9,450 PX</td>
                    <td><span class="mc-status status-active">ACTIVE</span></td>
                </tr>
                
                <tr>
                    <td>#AT-9024</td>
                    <td>
                        <div class="mc-table-user">
                            <div class="mc-table-avatar">ED</div>
                            <span>Emily Davis</span>
                        </div>
                    </td>
                    <td>16 May 2026</td>
                    <td>1,200 PX</td>
                    <td><span class="mc-status status-inactive">ARCHIVED</span></td>
                </tr>
            </tbody>
        </table>
    </div>
    
    <div class="mc-table-pagination">
        <span class="mc-text-muted" style="font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;">Showing 1 to 4 of 48 records</span>
        <div class="mc-pagination-controls">
            <button class="mc-btn mc-btn-ghost" disabled style="padding: 0.4rem 1rem; font-size: 0.7rem;">Prev</button>
            <button class="mc-btn mc-btn-primary" style="padding: 0.4rem 1rem; font-size: 0.7rem; min-width: 32px; height: 32px;">1</button>
            <button class="mc-btn mc-btn-ghost" style="padding: 0.4rem 1rem; font-size: 0.7rem; min-width: 32px; height: 32px;">2</button>
            <button class="mc-btn mc-btn-ghost" style="padding: 0.4rem 1rem; font-size: 0.7rem; min-width: 32px; height: 32px;">3</button>
            <button class="mc-btn mc-btn-ghost" style="padding: 0.4rem 1rem; font-size: 0.7rem;">Next</button>
        </div>
    </div>
</div>

CSS (Component Only)

/* Component: Stark Grid Data Table */
/* NOTE: This component requires base.css to be included in your page. */

.mc-table-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 !important;
    overflow: hidden;
    border-radius: var(--mc-radius) !important;
    border: 1px solid var(--mc-border) !important;
}

.mc-table-header {
    padding: 2rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--mc-border);
    background-color: var(--mc-bg-muted);
}

.mc-table-header h3 {
    margin: 0;
    font-size: 1.5rem;
}

.mc-table-container {
    width: 100%;
    overflow-x: auto;
}

.mc-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

.mc-table th {
    text-align: left;
    padding: 1.25rem 2.5rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--mc-bg);
    background-color: var(--mc-text);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border-bottom: 1px solid var(--mc-border);
}

.mc-table td {
    padding: 1.25rem 2.5rem;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--mc-border-muted);
    color: var(--mc-text);
    vertical-align: middle;
    background-color: var(--mc-surface);
    font-weight: 500;
    transition: var(--mc-transition);
}

.mc-table tbody tr:last-child td {
    border-bottom: none;
}

.mc-table tbody tr {
    transition: var(--mc-transition);
}

.mc-table tbody tr:hover td {
    background-color: var(--mc-bg-muted);
}

.mc-table-user {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.mc-table-avatar {
    width: 30px;
    height: 30px;
    background-color: var(--mc-text);
    color: var(--mc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid var(--mc-border);
    flex-shrink: 0;
}

.mc-status {
    padding: 0.25rem 0.75rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    display: inline-block;
}

.status-active {
    background-color: var(--mc-text);
    color: var(--mc-bg);
    border: 1px solid var(--mc-border);
}

.status-pending {
    background-color: transparent;
    color: var(--mc-text);
    border: 1px solid var(--mc-border);
}

.status-inactive {
    background-color: transparent;
    color: var(--mc-text-light);
    border: 1px solid var(--mc-border-muted);
}

.mc-table-pagination {
    padding: 1.75rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--mc-border);
    background-color: var(--mc-bg-muted);
}

.mc-pagination-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

@media (max-width: 768px) {
    .mc-table-header { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
    .mc-table-pagination { flex-direction: column; gap: 1.25rem; text-align: center; }
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Reset & Root variables */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --mc-bg: #FFFFFF;
    --mc-bg-muted: #FAF8F5; /* Warm alabaster warm white */
    --mc-surface: #FFFFFF;
    
    --mc-text: #000000;
    --mc-text-muted: #666666;
    --mc-text-light: #999999;
    
    --mc-border: #000000;
    --mc-border-muted: #E5E5E0; /* Soft warm hairline gray */
    
    --mc-radius: 0px; /* Stark architectural sharp corners */
    --mc-radius-sm: 0px;
    --mc-radius-full: 9999px; /* For clean circles and capsules only */
    
    --mc-font-heading: 'Cormorant Garamond', Georgia, serif;
    --mc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Editorial cubic transition */
    --mc-transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

body {
    margin: 0;
    font-family: var(--mc-font-body);
    color: var(--mc-text);
    background-color: var(--mc-bg);
    -webkit-font-smoothing: antialiased;
}

/* Surface containers */
.mc-surface {
    background-color: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    padding: 2.5rem;
    transition: var(--mc-transition);
}

/* Global Logo */
.mc-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    font-family: var(--mc-font-body);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mc-text);
    transition: var(--mc-transition);
}

.mc-logo span {
    font-weight: 300;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

.mc-logo-icon {
    width: 30px;
    height: 30px;
    background-color: var(--mc-text);
    color: var(--mc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0;
    transition: var(--mc-transition);
}

/* Global Buttons */
.mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2.25rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: var(--mc-radius);
    cursor: pointer;
    text-decoration: none;
    transition: var(--mc-transition);
    gap: 0.5rem;
    position: relative;
}

.mc-btn-primary {
    background-color: var(--mc-text);
    color: var(--mc-bg);
    border-color: var(--mc-border);
}

.mc-btn-primary:hover {
    background-color: var(--mc-bg);
    color: var(--mc-text);
}

.mc-btn-outline {
    background-color: transparent;
    color: var(--mc-text);
    border-color: var(--mc-border);
}

.mc-btn-outline:hover {
    background-color: var(--mc-text);
    color: var(--mc-bg);
}

.mc-btn-ghost {
    background-color: transparent;
    color: var(--mc-text);
    border-color: transparent;
    padding-left: 1rem;
    padding-right: 1rem;
}

.mc-btn-ghost:hover {
    background-color: var(--mc-bg-muted);
}

.mc-btn-circle {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mc-btn-block {
    width: 100%;
}

/* Form Fields */
.mc-input {
    width: 100%;
    padding: 0.95rem 1.25rem;
    border: 1px solid var(--mc-border-muted);
    border-radius: var(--mc-radius);
    font-family: var(--mc-font-body);
    font-size: 0.9rem;
    color: var(--mc-text);
    background-color: var(--mc-surface);
    outline: none;
    transition: var(--mc-transition);
}

.mc-input::placeholder {
    color: var(--mc-text-light);
    opacity: 0.7;
}

.mc-input:focus {
    border-color: var(--mc-border);
    background-color: var(--mc-bg-muted);
}

.mc-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mc-text);
}

/* Typography resets */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--mc-font-heading);
    font-weight: 400; /* Editorial serifs are more stunning when thin/medium */
    margin: 0;
    color: var(--mc-text);
    line-height: 1.2;
}

p {
    font-family: var(--mc-font-body);
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
    color: var(--mc-text-muted);
}

/* Utility Colors & Text alignments */
.text-white { color: #FFFFFF !important; }
.text-black { color: #000000 !important; }
.text-muted { color: var(--mc-text-muted) !important; }

.bg-white { background-color: #FFFFFF !important; }
.bg-black { background-color: #000000 !important; }
.bg-warm { background-color: var(--mc-bg-muted) !important; }

.align-center { text-align: center !important; }
.align-right { text-align: right !important; }


/* --- COMPONENT STYLES --- */
.mc-table-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 !important;
    overflow: hidden;
    border-radius: var(--mc-radius) !important;
    border: 1px solid var(--mc-border) !important;
}

.mc-table-header {
    padding: 2rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--mc-border);
    background-color: var(--mc-bg-muted);
}

.mc-table-header h3 {
    margin: 0;
    font-size: 1.5rem;
}

.mc-table-container {
    width: 100%;
    overflow-x: auto;
}

.mc-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

.mc-table th {
    text-align: left;
    padding: 1.25rem 2.5rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--mc-bg);
    background-color: var(--mc-text);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border-bottom: 1px solid var(--mc-border);
}

.mc-table td {
    padding: 1.25rem 2.5rem;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--mc-border-muted);
    color: var(--mc-text);
    vertical-align: middle;
    background-color: var(--mc-surface);
    font-weight: 500;
    transition: var(--mc-transition);
}

.mc-table tbody tr:last-child td {
    border-bottom: none;
}

.mc-table tbody tr {
    transition: var(--mc-transition);
}

.mc-table tbody tr:hover td {
    background-color: var(--mc-bg-muted);
}

.mc-table-user {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.mc-table-avatar {
    width: 30px;
    height: 30px;
    background-color: var(--mc-text);
    color: var(--mc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid var(--mc-border);
    flex-shrink: 0;
}

.mc-status {
    padding: 0.25rem 0.75rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    display: inline-block;
}

.status-active {
    background-color: var(--mc-text);
    color: var(--mc-bg);
    border: 1px solid var(--mc-border);
}

.status-pending {
    background-color: transparent;
    color: var(--mc-text);
    border: 1px solid var(--mc-border);
}

.status-inactive {
    background-color: transparent;
    color: var(--mc-text-light);
    border: 1px solid var(--mc-border-muted);
}

.mc-table-pagination {
    padding: 1.75rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--mc-border);
    background-color: var(--mc-bg-muted);
}

.mc-pagination-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

@media (max-width: 768px) {
    .mc-table-header { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
    .mc-table-pagination { flex-direction: column; gap: 1.25rem; text-align: center; }
}

Lists

Minimalist Ledger List

HTML

<div class="mc-feed-card mc-surface">
    <div class="mc-feed-header">
        <h3>Atelier Spatial Ledger</h3>
        <span class="mc-badge bg-black text-white" style="border: none;">4 Updates</span>
    </div>
    
    <ul class="mc-feed-list">
        <!-- Item 1: Unread -->
        <li class="mc-feed-item mc-unread">
            <div class="mc-feed-avatar">
                <span>SJ</span>
            </div>
            <div class="mc-feed-content">
                <p><strong>Sarah Jenkins</strong> left critique on <span class="mc-feed-highlight">Negative Space / No. 04</span>.</p>
                <span class="mc-feed-time">2 hours ago</span>
            </div>
            <div class="mc-unread-marker bg-black"></div>
        </li>
        
        <!-- Item 2: Read -->
        <li class="mc-feed-item">
            <div class="mc-feed-avatar bg-white text-black" style="border: 1px solid var(--mc-border);">
                <span>MC</span>
            </div>
            <div class="mc-feed-content">
                <p><strong>Michael Chen</strong> completed ledger entry <span class="mc-feed-highlight">Curation Codex N&deg;12</span>.</p>
                <span class="mc-feed-time">5 hours ago</span>
            </div>
        </li>
        
        <!-- Item 3: Unread -->
        <li class="mc-feed-item mc-unread">
            <div class="mc-feed-avatar">
                <span>DM</span>
            </div>
            <div class="mc-feed-content">
                <p><strong>David Moreau</strong> initialized a new gallery workspace <span class="mc-feed-highlight">Stark Architecture</span>.</p>
                <span class="mc-feed-time">Yesterday</span>
            </div>
            <div class="mc-unread-marker bg-black"></div>
        </li>
    </ul>
</div>

CSS (Component Only)

/* Component: Minimalist Ledger List */
/* NOTE: This component requires base.css to be included in your page. */

.mc-feed-card {
    max-width: 500px;
    margin: 2rem auto;
    padding: 2.5rem 2.25rem !important;
    border: 1px solid var(--mc-border) !important;
    border-radius: var(--mc-radius) !important;
}

.mc-feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.mc-feed-header h3 {
    font-size: 1.5rem;
}

.mc-feed-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mc-feed-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem;
    border: 1px solid transparent;
    transition: var(--mc-transition);
    position: relative;
}

.mc-feed-item:hover {
    background-color: var(--mc-bg-muted);
    border-color: var(--mc-border-muted);
}

.mc-feed-item.mc-unread {
    background-color: var(--mc-bg-muted);
    border-color: rgba(0, 0, 0, 0.03);
}

.mc-feed-avatar {
    width: 36px;
    height: 36px;
    background-color: var(--mc-text);
    color: var(--mc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mc-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--mc-radius);
    border: 1px solid var(--mc-border);
    flex-shrink: 0;
}

.mc-feed-content {
    flex: 1;
}

.mc-feed-content p {
    font-size: 0.85rem;
    color: var(--mc-text-muted);
    line-height: 1.6;
    margin-bottom: 0.25rem;
}

.mc-feed-content strong {
    color: var(--mc-text);
}

.mc-feed-highlight {
    font-weight: 700;
    color: var(--mc-text);
    background-color: var(--mc-bg-muted);
    border: 1px solid var(--mc-border-muted);
    padding: 0.15rem 0.4rem;
    font-size: 0.8rem;
}

.mc-feed-time {
    font-size: 0.7rem;
    color: var(--mc-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.mc-unread-marker {
    width: 6px;
    height: 6px;
    margin-left: 0.5rem;
    flex-shrink: 0;
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Reset & Root variables */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --mc-bg: #FFFFFF;
    --mc-bg-muted: #FAF8F5; /* Warm alabaster warm white */
    --mc-surface: #FFFFFF;
    
    --mc-text: #000000;
    --mc-text-muted: #666666;
    --mc-text-light: #999999;
    
    --mc-border: #000000;
    --mc-border-muted: #E5E5E0; /* Soft warm hairline gray */
    
    --mc-radius: 0px; /* Stark architectural sharp corners */
    --mc-radius-sm: 0px;
    --mc-radius-full: 9999px; /* For clean circles and capsules only */
    
    --mc-font-heading: 'Cormorant Garamond', Georgia, serif;
    --mc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Editorial cubic transition */
    --mc-transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

body {
    margin: 0;
    font-family: var(--mc-font-body);
    color: var(--mc-text);
    background-color: var(--mc-bg);
    -webkit-font-smoothing: antialiased;
}

/* Surface containers */
.mc-surface {
    background-color: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    padding: 2.5rem;
    transition: var(--mc-transition);
}

/* Global Logo */
.mc-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    font-family: var(--mc-font-body);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mc-text);
    transition: var(--mc-transition);
}

.mc-logo span {
    font-weight: 300;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

.mc-logo-icon {
    width: 30px;
    height: 30px;
    background-color: var(--mc-text);
    color: var(--mc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0;
    transition: var(--mc-transition);
}

/* Global Buttons */
.mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2.25rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: var(--mc-radius);
    cursor: pointer;
    text-decoration: none;
    transition: var(--mc-transition);
    gap: 0.5rem;
    position: relative;
}

.mc-btn-primary {
    background-color: var(--mc-text);
    color: var(--mc-bg);
    border-color: var(--mc-border);
}

.mc-btn-primary:hover {
    background-color: var(--mc-bg);
    color: var(--mc-text);
}

.mc-btn-outline {
    background-color: transparent;
    color: var(--mc-text);
    border-color: var(--mc-border);
}

.mc-btn-outline:hover {
    background-color: var(--mc-text);
    color: var(--mc-bg);
}

.mc-btn-ghost {
    background-color: transparent;
    color: var(--mc-text);
    border-color: transparent;
    padding-left: 1rem;
    padding-right: 1rem;
}

.mc-btn-ghost:hover {
    background-color: var(--mc-bg-muted);
}

.mc-btn-circle {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mc-btn-block {
    width: 100%;
}

/* Form Fields */
.mc-input {
    width: 100%;
    padding: 0.95rem 1.25rem;
    border: 1px solid var(--mc-border-muted);
    border-radius: var(--mc-radius);
    font-family: var(--mc-font-body);
    font-size: 0.9rem;
    color: var(--mc-text);
    background-color: var(--mc-surface);
    outline: none;
    transition: var(--mc-transition);
}

.mc-input::placeholder {
    color: var(--mc-text-light);
    opacity: 0.7;
}

.mc-input:focus {
    border-color: var(--mc-border);
    background-color: var(--mc-bg-muted);
}

.mc-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mc-text);
}

/* Typography resets */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--mc-font-heading);
    font-weight: 400; /* Editorial serifs are more stunning when thin/medium */
    margin: 0;
    color: var(--mc-text);
    line-height: 1.2;
}

p {
    font-family: var(--mc-font-body);
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
    color: var(--mc-text-muted);
}

/* Utility Colors & Text alignments */
.text-white { color: #FFFFFF !important; }
.text-black { color: #000000 !important; }
.text-muted { color: var(--mc-text-muted) !important; }

.bg-white { background-color: #FFFFFF !important; }
.bg-black { background-color: #000000 !important; }
.bg-warm { background-color: var(--mc-bg-muted) !important; }

.align-center { text-align: center !important; }
.align-right { text-align: right !important; }


/* --- COMPONENT STYLES --- */
.mc-feed-card {
    max-width: 500px;
    margin: 2rem auto;
    padding: 2.5rem 2.25rem !important;
    border: 1px solid var(--mc-border) !important;
    border-radius: var(--mc-radius) !important;
}

.mc-feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.mc-feed-header h3 {
    font-size: 1.5rem;
}

.mc-feed-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mc-feed-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem;
    border: 1px solid transparent;
    transition: var(--mc-transition);
    position: relative;
}

.mc-feed-item:hover {
    background-color: var(--mc-bg-muted);
    border-color: var(--mc-border-muted);
}

.mc-feed-item.mc-unread {
    background-color: var(--mc-bg-muted);
    border-color: rgba(0, 0, 0, 0.03);
}

.mc-feed-avatar {
    width: 36px;
    height: 36px;
    background-color: var(--mc-text);
    color: var(--mc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mc-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--mc-radius);
    border: 1px solid var(--mc-border);
    flex-shrink: 0;
}

.mc-feed-content {
    flex: 1;
}

.mc-feed-content p {
    font-size: 0.85rem;
    color: var(--mc-text-muted);
    line-height: 1.6;
    margin-bottom: 0.25rem;
}

.mc-feed-content strong {
    color: var(--mc-text);
}

.mc-feed-highlight {
    font-weight: 700;
    color: var(--mc-text);
    background-color: var(--mc-bg-muted);
    border: 1px solid var(--mc-border-muted);
    padding: 0.15rem 0.4rem;
    font-size: 0.8rem;
}

.mc-feed-time {
    font-size: 0.7rem;
    color: var(--mc-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.mc-unread-marker {
    width: 6px;
    height: 6px;
    margin-left: 0.5rem;
    flex-shrink: 0;
}

Modals

Stark Overlay Confirmation

HTML

<div class="mc-modal-overlay">
    <div class="mc-modal mc-surface">
        <div class="mc-modal-icon">
            <svg viewBox="0 0 24 24" width="22" height="22" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
        </div>
        
        <div class="mc-modal-body">
            <h3>Wipe Spatial Cache?</h3>
            <p>This action will wipe the local spatial database for the 'Stark Editorial' atelier workspace. All local configurations and curation layers will be permanently lost.</p>
        </div>
        
        <div class="mc-modal-actions">
            <button class="mc-btn mc-btn-outline">Cancel Action</button>
            <button class="mc-btn mc-btn-primary mc-btn-dark">Wipe Cache</button>
        </div>
    </div>
</div>

CSS (Component Only)

/* Component: Stark Overlay Confirmation */
/* NOTE: This component requires base.css to be included in your page. */

.mc-modal-overlay {
    width: 100%;
    min-height: 400px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: grayscale(1) contrast(1.1);
    -webkit-backdrop-filter: grayscale(1) contrast(1.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    border-radius: var(--mc-radius);
    border: 1px solid var(--mc-border);
}

.mc-modal {
    max-width: 450px;
    width: 100%;
    background-color: var(--mc-surface);
    border: 1px solid var(--mc-border) !important;
    border-radius: var(--mc-radius) !important;
    padding: 3rem !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
}

.mc-modal-icon {
    width: 50px;
    height: 50px;
    background-color: var(--mc-text);
    color: var(--mc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    border: 1px solid var(--mc-border);
}

.mc-modal-body {
    margin-bottom: 2.5rem;
}

.mc-modal-body h3 {
    font-size: 1.65rem;
    margin-bottom: 0.75rem;
}

.mc-modal-body p {
    font-size: 0.85rem;
    color: var(--mc-text-muted);
    line-height: 1.6;
}

.mc-modal-actions {
    display: flex;
    gap: 1.25rem;
    width: 100%;
    justify-content: center;
}

.mc-modal-actions .mc-btn {
    flex: 1;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .mc-modal-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Reset & Root variables */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --mc-bg: #FFFFFF;
    --mc-bg-muted: #FAF8F5; /* Warm alabaster warm white */
    --mc-surface: #FFFFFF;
    
    --mc-text: #000000;
    --mc-text-muted: #666666;
    --mc-text-light: #999999;
    
    --mc-border: #000000;
    --mc-border-muted: #E5E5E0; /* Soft warm hairline gray */
    
    --mc-radius: 0px; /* Stark architectural sharp corners */
    --mc-radius-sm: 0px;
    --mc-radius-full: 9999px; /* For clean circles and capsules only */
    
    --mc-font-heading: 'Cormorant Garamond', Georgia, serif;
    --mc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Editorial cubic transition */
    --mc-transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

body {
    margin: 0;
    font-family: var(--mc-font-body);
    color: var(--mc-text);
    background-color: var(--mc-bg);
    -webkit-font-smoothing: antialiased;
}

/* Surface containers */
.mc-surface {
    background-color: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    padding: 2.5rem;
    transition: var(--mc-transition);
}

/* Global Logo */
.mc-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    font-family: var(--mc-font-body);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mc-text);
    transition: var(--mc-transition);
}

.mc-logo span {
    font-weight: 300;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

.mc-logo-icon {
    width: 30px;
    height: 30px;
    background-color: var(--mc-text);
    color: var(--mc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0;
    transition: var(--mc-transition);
}

/* Global Buttons */
.mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2.25rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: var(--mc-radius);
    cursor: pointer;
    text-decoration: none;
    transition: var(--mc-transition);
    gap: 0.5rem;
    position: relative;
}

.mc-btn-primary {
    background-color: var(--mc-text);
    color: var(--mc-bg);
    border-color: var(--mc-border);
}

.mc-btn-primary:hover {
    background-color: var(--mc-bg);
    color: var(--mc-text);
}

.mc-btn-outline {
    background-color: transparent;
    color: var(--mc-text);
    border-color: var(--mc-border);
}

.mc-btn-outline:hover {
    background-color: var(--mc-text);
    color: var(--mc-bg);
}

.mc-btn-ghost {
    background-color: transparent;
    color: var(--mc-text);
    border-color: transparent;
    padding-left: 1rem;
    padding-right: 1rem;
}

.mc-btn-ghost:hover {
    background-color: var(--mc-bg-muted);
}

.mc-btn-circle {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mc-btn-block {
    width: 100%;
}

/* Form Fields */
.mc-input {
    width: 100%;
    padding: 0.95rem 1.25rem;
    border: 1px solid var(--mc-border-muted);
    border-radius: var(--mc-radius);
    font-family: var(--mc-font-body);
    font-size: 0.9rem;
    color: var(--mc-text);
    background-color: var(--mc-surface);
    outline: none;
    transition: var(--mc-transition);
}

.mc-input::placeholder {
    color: var(--mc-text-light);
    opacity: 0.7;
}

.mc-input:focus {
    border-color: var(--mc-border);
    background-color: var(--mc-bg-muted);
}

.mc-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mc-text);
}

/* Typography resets */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--mc-font-heading);
    font-weight: 400; /* Editorial serifs are more stunning when thin/medium */
    margin: 0;
    color: var(--mc-text);
    line-height: 1.2;
}

p {
    font-family: var(--mc-font-body);
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
    color: var(--mc-text-muted);
}

/* Utility Colors & Text alignments */
.text-white { color: #FFFFFF !important; }
.text-black { color: #000000 !important; }
.text-muted { color: var(--mc-text-muted) !important; }

.bg-white { background-color: #FFFFFF !important; }
.bg-black { background-color: #000000 !important; }
.bg-warm { background-color: var(--mc-bg-muted) !important; }

.align-center { text-align: center !important; }
.align-right { text-align: right !important; }


/* --- COMPONENT STYLES --- */
.mc-modal-overlay {
    width: 100%;
    min-height: 400px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: grayscale(1) contrast(1.1);
    -webkit-backdrop-filter: grayscale(1) contrast(1.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    border-radius: var(--mc-radius);
    border: 1px solid var(--mc-border);
}

.mc-modal {
    max-width: 450px;
    width: 100%;
    background-color: var(--mc-surface);
    border: 1px solid var(--mc-border) !important;
    border-radius: var(--mc-radius) !important;
    padding: 3rem !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
}

.mc-modal-icon {
    width: 50px;
    height: 50px;
    background-color: var(--mc-text);
    color: var(--mc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    border: 1px solid var(--mc-border);
}

.mc-modal-body {
    margin-bottom: 2.5rem;
}

.mc-modal-body h3 {
    font-size: 1.65rem;
    margin-bottom: 0.75rem;
}

.mc-modal-body p {
    font-size: 0.85rem;
    color: var(--mc-text-muted);
    line-height: 1.6;
}

.mc-modal-actions {
    display: flex;
    gap: 1.25rem;
    width: 100%;
    justify-content: center;
}

.mc-modal-actions .mc-btn {
    flex: 1;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .mc-modal-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}

Footers

Architectural Simple Footer

HTML

<footer class="mc-footer">
    <div class="mc-footer-container">
        <div class="mc-footer-brand">
            <a href="#" class="mc-logo">
                <div class="mc-logo-icon">M</div>
                <span>Monochrome</span>
            </a>
            <p class="mc-footer-desc">Curating volumetric negative spaces and architectural minimalist guidelines.</p>
        </div>
        
        <nav class="mc-footer-links">
            <a href="#">Atelier</a>
            <a href="#">Monographs</a>
            <a href="#">Exhibitions</a>
            <a href="#">Codex</a>
        </nav>
        
        <div class="mc-footer-socials">
            <a href="#" class="mc-btn mc-btn-circle mc-btn-outline" aria-label="Twitter">
                <svg viewBox="0 0 24 24" width="15" height="15" stroke="currentColor" stroke-width="2.5" fill="none"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
            </a>
            <a href="#" class="mc-btn mc-btn-circle mc-btn-outline" aria-label="LinkedIn">
                <svg viewBox="0 0 24 24" width="15" height="15" stroke="currentColor" stroke-width="2.5" fill="none"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
            </a>
            <a href="#" class="mc-btn mc-btn-circle mc-btn-outline" aria-label="Instagram">
                <svg viewBox="0 0 24 24" width="15" height="15" stroke="currentColor" stroke-width="2.5" fill="none"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
            </a>
        </div>
        
        <div class="mc-footer-copyright">
            <span>&copy; 2026 Atelier Monochrome. Curated via Advanced Agentic Systems.</span>
        </div>
    </div>
</footer>

CSS (Component Only)

/* Component: Architectural Simple Footer */
/* NOTE: This component requires base.css to be included in your page. */

.mc-footer {
    width: 100%;
    background-color: var(--mc-bg-muted);
    border-top: 1px solid var(--mc-border);
    padding: 5rem 2rem 3rem;
}

.mc-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

.mc-footer-brand {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 460px;
}

.mc-footer-desc {
    font-size: 0.85rem;
    color: var(--mc-text-muted);
    line-height: 1.6;
}

.mc-footer-links {
    display: flex;
    gap: 3rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.mc-footer-links a {
    text-decoration: none;
    font-family: var(--mc-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--mc-text-muted);
    transition: var(--mc-transition);
}

.mc-footer-links a:hover {
    color: var(--mc-text);
}

.mc-footer-socials {
    display: flex;
    gap: 1rem;
}

.mc-footer-socials .mc-btn-circle {
    border-radius: 50% !important;
}

.mc-footer-socials .mc-btn-circle svg {
    display: block;
}

.mc-footer-copyright {
    width: 100%;
    border-top: 1px solid var(--mc-border-muted);
    padding-top: 2rem;
    text-align: center;
}

.mc-footer-copyright span {
    font-family: var(--mc-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mc-text-light);
}

@media (max-width: 768px) {
    .mc-footer { padding: 4rem 1.5rem 2rem; }
    .mc-footer-container { gap: 2.5rem; }
    .mc-footer-links { gap: 1.75rem; }
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Reset & Root variables */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --mc-bg: #FFFFFF;
    --mc-bg-muted: #FAF8F5; /* Warm alabaster warm white */
    --mc-surface: #FFFFFF;
    
    --mc-text: #000000;
    --mc-text-muted: #666666;
    --mc-text-light: #999999;
    
    --mc-border: #000000;
    --mc-border-muted: #E5E5E0; /* Soft warm hairline gray */
    
    --mc-radius: 0px; /* Stark architectural sharp corners */
    --mc-radius-sm: 0px;
    --mc-radius-full: 9999px; /* For clean circles and capsules only */
    
    --mc-font-heading: 'Cormorant Garamond', Georgia, serif;
    --mc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Editorial cubic transition */
    --mc-transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

body {
    margin: 0;
    font-family: var(--mc-font-body);
    color: var(--mc-text);
    background-color: var(--mc-bg);
    -webkit-font-smoothing: antialiased;
}

/* Surface containers */
.mc-surface {
    background-color: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    padding: 2.5rem;
    transition: var(--mc-transition);
}

/* Global Logo */
.mc-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    font-family: var(--mc-font-body);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mc-text);
    transition: var(--mc-transition);
}

.mc-logo span {
    font-weight: 300;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

.mc-logo-icon {
    width: 30px;
    height: 30px;
    background-color: var(--mc-text);
    color: var(--mc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0;
    transition: var(--mc-transition);
}

/* Global Buttons */
.mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2.25rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: var(--mc-radius);
    cursor: pointer;
    text-decoration: none;
    transition: var(--mc-transition);
    gap: 0.5rem;
    position: relative;
}

.mc-btn-primary {
    background-color: var(--mc-text);
    color: var(--mc-bg);
    border-color: var(--mc-border);
}

.mc-btn-primary:hover {
    background-color: var(--mc-bg);
    color: var(--mc-text);
}

.mc-btn-outline {
    background-color: transparent;
    color: var(--mc-text);
    border-color: var(--mc-border);
}

.mc-btn-outline:hover {
    background-color: var(--mc-text);
    color: var(--mc-bg);
}

.mc-btn-ghost {
    background-color: transparent;
    color: var(--mc-text);
    border-color: transparent;
    padding-left: 1rem;
    padding-right: 1rem;
}

.mc-btn-ghost:hover {
    background-color: var(--mc-bg-muted);
}

.mc-btn-circle {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mc-btn-block {
    width: 100%;
}

/* Form Fields */
.mc-input {
    width: 100%;
    padding: 0.95rem 1.25rem;
    border: 1px solid var(--mc-border-muted);
    border-radius: var(--mc-radius);
    font-family: var(--mc-font-body);
    font-size: 0.9rem;
    color: var(--mc-text);
    background-color: var(--mc-surface);
    outline: none;
    transition: var(--mc-transition);
}

.mc-input::placeholder {
    color: var(--mc-text-light);
    opacity: 0.7;
}

.mc-input:focus {
    border-color: var(--mc-border);
    background-color: var(--mc-bg-muted);
}

.mc-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--mc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mc-text);
}

/* Typography resets */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--mc-font-heading);
    font-weight: 400; /* Editorial serifs are more stunning when thin/medium */
    margin: 0;
    color: var(--mc-text);
    line-height: 1.2;
}

p {
    font-family: var(--mc-font-body);
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
    color: var(--mc-text-muted);
}

/* Utility Colors & Text alignments */
.text-white { color: #FFFFFF !important; }
.text-black { color: #000000 !important; }
.text-muted { color: var(--mc-text-muted) !important; }

.bg-white { background-color: #FFFFFF !important; }
.bg-black { background-color: #000000 !important; }
.bg-warm { background-color: var(--mc-bg-muted) !important; }

.align-center { text-align: center !important; }
.align-right { text-align: right !important; }


/* --- COMPONENT STYLES --- */
.mc-footer {
    width: 100%;
    background-color: var(--mc-bg-muted);
    border-top: 1px solid var(--mc-border);
    padding: 5rem 2rem 3rem;
}

.mc-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

.mc-footer-brand {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 460px;
}

.mc-footer-desc {
    font-size: 0.85rem;
    color: var(--mc-text-muted);
    line-height: 1.6;
}

.mc-footer-links {
    display: flex;
    gap: 3rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.mc-footer-links a {
    text-decoration: none;
    font-family: var(--mc-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--mc-text-muted);
    transition: var(--mc-transition);
}

.mc-footer-links a:hover {
    color: var(--mc-text);
}

.mc-footer-socials {
    display: flex;
    gap: 1rem;
}

.mc-footer-socials .mc-btn-circle {
    border-radius: 50% !important;
}

.mc-footer-socials .mc-btn-circle svg {
    display: block;
}

.mc-footer-copyright {
    width: 100%;
    border-top: 1px solid var(--mc-border-muted);
    padding-top: 2rem;
    text-align: center;
}

.mc-footer-copyright span {
    font-family: var(--mc-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mc-text-light);
}

@media (max-width: 768px) {
    .mc-footer { padding: 4rem 1.5rem 2rem; }
    .mc-footer-container { gap: 2.5rem; }
    .mc-footer-links { gap: 1.75rem; }
}