/**
 * style-v3.css — Light theme for chrisabass.com
 *
 * Scoped under body.theme-light. Pages that should keep the existing dark
 * theme (case studies, news, /videocue/*) don't get the theme-light body
 * class, so none of these rules apply to them — they continue to inherit
 * style-v2.css.
 *
 * Palette + type from the new "Solver Complex" design direction:
 *   cream paper background, deep ink text, stage orange accent,
 *   DM Serif Display for display type, DM Mono for tags/numbers,
 *   Instrument Sans for body.
 */

/* Palette + base typography applied to every page. Body background
   defaults to cream; dark sections override below via body.body-dark. */
body.theme-light {
    --ink:        #0f0e0c;
    --paper:      #f5f0e8;
    --warm:       #ede8dc;
    --warmer:     #e4ddd0;
    --stage:      #c8451a;
    --gold:       #b8922a;
    --dim:        #6b6560;
    --faint:      #b0aba3;
    --rule:       #d8d2c8;
    --ink-inv:    #f5f0e8;

    /* Dark-section variants — used by .body-dark scope below */
    --dk-bg:        #0f0e0c;
    --dk-surface:   #18171a;
    --dk-surface-2: #22202a;
    --dk-rule:      rgba(255, 255, 255, 0.08);
    --dk-text:      #ccc8be;
    --dk-text-dim:  #8a8680;
    --dk-text-mid:  #6b6560;

    font-family: 'Instrument Sans', sans-serif;
    font-size: 17px;
    line-height: 1.65;
    overflow-x: hidden;
}

/* Light body background — default for everything that's NOT a dark section */
body.theme-light:not(.body-dark) {
    background: var(--paper);
    color: var(--ink);
}

/* Dark body background — case studies, news, /videocue/* */
body.theme-light.body-dark {
    background: var(--dk-bg);
    color: var(--dk-text);
}

/* Noise overlay — subtle paper grain */
body.theme-light::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 999;
    opacity: 0.35;
}

/* ── HEADER / NAV ─────────────────────────────────────────────────────── */
/* Restyle the existing site-header on light pages. The header.php markup
   stays the same; we just paint over it. */

body.theme-light .site-header {
    background: rgba(245, 240, 232, 0.93);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: 0;
    z-index: 200;
    padding: 0;
}

body.theme-light .header-container {
    max-width: none;
    padding: 1.4rem 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body.theme-light .site-branding { display: flex; align-items: center; }

body.theme-light .site-title {
    margin: 0;
    font-family: 'DM Mono', monospace;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em;
}

body.theme-light .site-title a {
    color: var(--ink) !important;
    text-decoration: none;
    text-transform: none !important;
}

body.theme-light .site-description {
    display: none; /* tagline hidden on light theme — nav handles voice */
}

/* Top-level menu only — flex row of nav items on desktop.
   On mobile (max-width: 900px) the original site uses a hamburger pattern:
   menu hidden by default, shown when .main-navigation.toggled. Don't
   override that — only flex the menu where there's room for it. */
@media (min-width: 901px) {
    body.theme-light .main-navigation > ul,
    body.theme-light .main-navigation ul#primary-menu {
        display: flex;
        gap: 2.5rem;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 0;
    }
}

/* Reset list bullets on mobile too */
body.theme-light .main-navigation ul,
body.theme-light .main-navigation ul#primary-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Top-level items: relative positioning so submenu can absolute-position
   from them */
body.theme-light .main-navigation > ul > li,
body.theme-light .main-navigation ul#primary-menu > li {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

body.theme-light .main-navigation a {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.82rem !important;
    color: var(--dim) !important;
    text-decoration: none !important;
    letter-spacing: 0.02em;
    transition: color 0.2s;
    text-transform: none !important;
    font-weight: 400 !important;
    padding: 0 !important;
    display: inline-block;
}

body.theme-light .main-navigation a:hover {
    color: var(--stage) !important;
}

body.theme-light .main-navigation .current-menu-item > a {
    color: var(--ink) !important;
}

/* Submenu (Case Studies dropdown) — desktop: hidden by default, shown on hover */
@media (min-width: 901px) {
    body.theme-light .main-navigation .sub-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        margin: 0;
        padding: 0.5rem 0;
        background: var(--paper);
        border: 1px solid var(--rule);
        min-width: 200px;
        list-style: none;
        z-index: 250;
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    }

    body.theme-light .main-navigation li:hover > .sub-menu,
    body.theme-light .main-navigation li:focus-within > .sub-menu {
        display: block;
    }
}

/* On mobile, render submenu items as a nested indented list inline with
   the parent — touch devices don't have hover, so always expanded. */
@media (max-width: 900px) {
    /* Mobile drawer: light theme — explicit color overrides any v2 vars */
    body.theme-light .main-navigation > ul,
    body.theme-light .main-navigation ul#primary-menu {
        background: #f5f0e8 !important;
        border-top: 1px solid #d8d2c8;
        padding: 1rem 1.5rem !important;
        box-shadow: 0 6px 12px rgba(0,0,0,0.08) !important;
    }

    /* Nav link text in mobile drawer — readable ink against cream */
    body.theme-light .main-navigation a {
        color: #0f0e0c !important;
        text-transform: none !important;
        font-weight: 400 !important;
        font-family: 'Instrument Sans', sans-serif !important;
        font-size: 1rem !important;
        padding: 0.6rem 0 !important;
        letter-spacing: 0;
    }

    body.theme-light .main-navigation a:hover,
    body.theme-light .main-navigation a:focus,
    body.theme-light .main-navigation .current-menu-item > a {
        color: #c8451a !important;
    }

    body.theme-light .main-navigation .sub-menu {
        list-style: none;
        margin: 0.25rem 0 0.5rem 1.25rem !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        position: static !important;
        min-width: 0;
    }

    body.theme-light .main-navigation .sub-menu a {
        color: #6b6560 !important;
        font-size: 0.9rem !important;
        padding: 0.35rem 0 !important;
    }

    /* Hamburger toggle button — visible against cream header */
    body.theme-light .menu-toggle {
        background: var(--ink) !important;
        color: var(--paper) !important;
        border-radius: 3px;
    }
    body.theme-light .menu-toggle:hover {
        background: var(--stage) !important;
    }
}

body.theme-light .main-navigation .sub-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.theme-light .main-navigation .sub-menu a {
    display: block;
    padding: 0.4rem 1rem !important;
}

@media (min-width: 901px) {
    body.theme-light .main-navigation .sub-menu a {
        white-space: nowrap;
    }
    body.theme-light .main-navigation .sub-menu a:hover {
        background: var(--warm);
    }
}

/* Skip link */
body.theme-light .skip-link:focus {
    background: var(--ink);
    color: var(--paper);
}

/* ── PAGE WRAPPER ─────────────────────────────────────────────────────── */
/* style-v2.css forces dark backgrounds on .page-wrapper etc. — override
   only on non-dark pages. On dark pages, let the wrapper inherit the
   dark body background. */

body.theme-light:not(.body-dark) .page-wrapper,
body.theme-light:not(.body-dark) .page-content,
body.theme-light:not(.body-dark) .site-content,
body.theme-light:not(.body-dark) .entry-content,
body.theme-light:not(.body-dark) .site-main,
body.theme-light:not(.body-dark) #main,
body.theme-light:not(.body-dark) #primary,
body.theme-light:not(.body-dark) .wp-site-blocks,
body.theme-light:not(.body-dark) .wp-block-post-content,
body.theme-light:not(.body-dark) .has-global-padding {
    background: var(--paper) !important;
}

/* On dark pages, explicitly force dark backgrounds for these same
   wrappers to override style-v2.css's --color-black setting (which we
   redefined to cream under body.theme-light above, ruining v2's dark
   page-wrappers). */
body.theme-light.body-dark .page-wrapper,
body.theme-light.body-dark .page-content,
body.theme-light.body-dark .site-content,
body.theme-light.body-dark .entry-content,
body.theme-light.body-dark .site-main,
body.theme-light.body-dark #main,
body.theme-light.body-dark #primary,
body.theme-light.body-dark .wp-site-blocks,
body.theme-light.body-dark .wp-block-post-content,
body.theme-light.body-dark .has-global-padding {
    background: var(--dk-bg) !important;
    color: var(--dk-text);
}

/* The Solver Complex homepage uses its own internal containers and needs
   .container to be a no-op there. Everywhere else (default WP pages like
   /videocue/, custom templates that wrap content in .container) keeps
   v2's 1200px max-width and 20px horizontal padding. */
body.home .container,
body.home .container-narrow,
body.page-template-template-solver-complex .container,
body.page-template-template-solver-complex .container-narrow {
    max-width: none;
    padding: 0;
}

/* ── TYPOGRAPHY DEFAULTS ──────────────────────────────────────────────── */
/* Headings — DM Serif Display everywhere, but color is theme-dependent.
   Light pages get ink, dark pages get cream (ink-inv). */
body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4 {
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

body.theme-light:not(.body-dark) h1,
body.theme-light:not(.body-dark) h2,
body.theme-light:not(.body-dark) h3,
body.theme-light:not(.body-dark) h4 {
    color: var(--ink);
}

body.theme-light.body-dark h1,
body.theme-light.body-dark h2,
body.theme-light.body-dark h3,
body.theme-light.body-dark h4 {
    color: var(--ink-inv);
}

body.theme-light h1 em,
body.theme-light h2 em,
body.theme-light h3 em {
    font-style: italic;
    color: var(--stage);
}

/* No universal p color rule — text color cascades from body and any
   block-level styles. This prevents ink-on-dark invisibility when a
   light page contains a dark inline-styled block (and vice versa). */

body.theme-light:not(.body-dark) a { color: var(--stage); }
body.theme-light:not(.body-dark) a:hover { color: var(--ink); }

/* Inline-styled dark blocks on light pages: force readable text inside.
   Covers the common patterns in template-acting, template-voice-acting,
   template-creative-technologist, template-portfolio, etc. Each rule
   targets a recognizable inline style snippet and forces cream text. */
body.theme-light:not(.body-dark) [style*="hero-surface-2, #0F0F0F"],
body.theme-light:not(.body-dark) [style*="hero-surface-2,#0F0F0F"],
body.theme-light:not(.body-dark) [style*="portfolio-surface-2, #0F0F0F"],
body.theme-light:not(.body-dark) [style*="ct-surface, #080808"],
body.theme-light:not(.body-dark) [style*="background: #080808"],
body.theme-light:not(.body-dark) [style*="background: #0F0F0F"],
body.theme-light:not(.body-dark) [style*="background:#080808"],
body.theme-light:not(.body-dark) [style*="background:#0F0F0F"],
body.theme-light:not(.body-dark) [style*="linear-gradient(135deg, #1a3a2e"],
body.theme-light:not(.body-dark) [style*="linear-gradient(135deg, #0082c3"] {
    /* Note: we already convert most of these to cream cards via earlier
       overrides. This rule ensures any text inside still reads even if
       the cream-conversion doesn't catch the exact selector pattern. */
    color: var(--ink) !important;
}

body.theme-light:not(.body-dark) [style*="hero-surface-2"] p,
body.theme-light:not(.body-dark) [style*="hero-surface-2"] li,
body.theme-light:not(.body-dark) [style*="hero-surface-2"] h2,
body.theme-light:not(.body-dark) [style*="hero-surface-2"] h3,
body.theme-light:not(.body-dark) [style*="hero-surface-2"] strong,
body.theme-light:not(.body-dark) [style*="portfolio-surface-2"] p,
body.theme-light:not(.body-dark) [style*="portfolio-surface-2"] li,
body.theme-light:not(.body-dark) [style*="portfolio-surface-2"] h2,
body.theme-light:not(.body-dark) [style*="portfolio-surface-2"] h3,
body.theme-light:not(.body-dark) [style*="portfolio-surface-2"] strong {
    color: var(--ink) !important;
}

/* ── FOOTER ───────────────────────────────────────────────────────────── */
/* Footer is light-themed everywhere — same chrome as the nav. The
   footer.php inline styles handle layout; colors come from here. */

body.theme-light .site-footer,
body.theme-light footer.site-footer {
    background: var(--paper) !important;
    border-top: 1px solid var(--rule);
    color: var(--ink);
    font-family: 'DM Mono', monospace;
    font-size: 0.78rem;
}

body.theme-light .site-footer .footer-flex {
    color: var(--dim);
    max-width: 1400px;
    margin: 0 auto;
}

body.theme-light .site-footer .footer-identity {
    color: var(--dim);
}

body.theme-light .site-footer .footer-identity strong {
    color: var(--ink);
    font-weight: 500;
    font-family: 'DM Serif Display', serif;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

body.theme-light .site-footer .footer-tagline {
    color: var(--faint);
    font-family: 'DM Mono', monospace;
    letter-spacing: 0.06em;
}

body.theme-light .site-footer a {
    color: var(--dim);
    text-decoration: none;
    transition: color 0.2s;
}
body.theme-light .site-footer a:hover { color: var(--stage); }

body.theme-light .site-footer .footer-widget,
body.theme-light .site-footer .widget-title,
body.theme-light .site-footer p {
    color: var(--dim);
}

body.theme-light .site-info {
    font-family: 'DM Mono', monospace;
    font-size: 0.78rem;
    color: var(--faint);
}

/* ── REUSABLE LIGHT-THEME ATOMS ──────────────────────────────────────── */
/* Available to any light-theme template that needs them. */

body.theme-light .eyebrow {
    font-family: 'DM Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--stage);
}

body.theme-light .tag {
    font-family: 'DM Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    color: var(--faint);
    background: var(--warm);
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--rule);
    display: inline-block;
}

/* Buttons */
body.theme-light .btn-light {
    background: var(--ink);
    color: var(--paper);
    padding: 0.85rem 2rem;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: background 0.2s, transform 0.15s;
    display: inline-block;
}
body.theme-light .btn-light:hover {
    background: var(--stage);
    color: #fff;
    transform: translateY(-1px);
}

body.theme-light .btn-outline {
    background: transparent;
    color: var(--dim);
    padding: 0.85rem 2rem;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--rule);
    transition: border-color 0.2s, color 0.2s;
    display: inline-block;
}
body.theme-light .btn-outline:hover {
    border-color: var(--stage);
    color: var(--stage);
}

/* Reveal-on-scroll utility */
body.theme-light .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
body.theme-light .reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
body.theme-light .reveal-delay-1 { transition-delay: 0.1s; }
body.theme-light .reveal-delay-2 { transition-delay: 0.2s; }
body.theme-light .reveal-delay-3 { transition-delay: 0.3s; }

/* Animations */
@keyframes vcLightFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes vcLightFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── RESPONSIVE COMMON ────────────────────────────────────────────────── */
@media (max-width: 900px) {
    body.theme-light .header-container { padding: 1rem 1.5rem; }
    body.theme-light .main-navigation ul { gap: 1.5rem; }
    body.theme-light .site-footer { padding: 2rem 1.5rem; }
}

/* ════════════════════════════════════════════════════════════════════
   DARK SECTIONS — case studies, news, /videocue/* pages
   The body background stays dark, but typography + layout adopt the
   new design language (DM Serif Display, DM Mono, orange accent).
   Scoped to body.body-dark so light pages aren't affected.
   ════════════════════════════════════════════════════════════════════ */

/* Case-study & news content uses .cs-* classes from css/case-study.css.
   Override the type and accent here so they match the homepage's design
   language while keeping their dark palette. */

body.body-dark .cs-container {
    color: var(--dk-text);
    background: transparent; /* let body bg show through */
}

/* Hero typography — switch from Bebas Neue to DM Serif Display */
body.body-dark .cs-hero-title {
    font-family: 'DM Serif Display', serif !important;
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 0.95;
    color: var(--ink-inv);
}

body.body-dark .cs-hero-title em {
    font-style: italic;
    color: var(--stage);
}

body.body-dark .cs-hero-label {
    font-family: 'DM Mono', monospace !important;
    color: var(--stage);
    letter-spacing: 0.14em;
}

body.body-dark .cs-hero-subtitle {
    font-family: 'Instrument Sans', sans-serif !important;
    color: var(--dk-text);
    font-weight: 300;
}

body.body-dark .cs-meta {
    font-family: 'DM Mono', monospace !important;
    color: var(--dk-text-dim);
    letter-spacing: 0.06em;
}

body.body-dark .cs-section-title {
    font-family: 'DM Serif Display', serif !important;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--ink-inv);
}

body.body-dark .cs-stat-number {
    font-family: 'DM Serif Display', serif !important;
    font-weight: 400;
    color: var(--stage);
}

body.body-dark .cs-stat-label {
    font-family: 'DM Mono', monospace !important;
    color: var(--dk-text-dim);
    letter-spacing: 0.04em;
    text-transform: none;
}

body.body-dark .cs-content {
    font-family: 'Instrument Sans', sans-serif !important;
    color: var(--dk-text);
    line-height: 1.7;
}

body.body-dark .cs-content h2,
body.body-dark .cs-content h3 {
    font-family: 'DM Serif Display', serif !important;
    font-weight: 400;
    color: var(--ink-inv);
}

body.body-dark .cs-content strong {
    color: var(--stage);
}

body.body-dark .cs-content a {
    color: var(--stage);
}

body.body-dark .cs-quote {
    background: var(--dk-surface);
    border-left-color: var(--stage);
}

body.body-dark .cs-quote-text {
    font-family: 'DM Serif Display', serif !important;
    font-weight: 400;
    font-style: italic;
    color: var(--ink-inv);
}

body.body-dark .cs-quote-author {
    font-family: 'DM Mono', monospace !important;
    color: var(--dk-text-dim);
    letter-spacing: 0.06em;
}

body.body-dark .cs-tool {
    background: var(--dk-surface);
    border-left-color: var(--stage);
}

body.body-dark .cs-tool-name {
    font-family: 'Instrument Sans', sans-serif !important;
    color: var(--ink-inv);
    font-weight: 600;
}

body.body-dark .cs-tool-note {
    font-family: 'Instrument Sans', sans-serif !important;
    color: var(--dk-text-dim);
}

body.body-dark .cs-link-button {
    background: var(--dk-surface);
    color: var(--ink-inv);
    border-color: var(--stage);
    font-family: 'Instrument Sans', sans-serif !important;
}

body.body-dark .cs-link-button:hover {
    background: var(--stage);
}

body.body-dark .cs-cta-button {
    background: var(--stage);
    color: var(--ink-inv);
    font-family: 'DM Mono', monospace !important;
    letter-spacing: 0.12em;
    font-size: 0.875rem;
    text-transform: uppercase;
}

body.body-dark .cs-cta-button:hover {
    background: var(--ink-inv);
    color: var(--ink);
}

/* Archive cards (case studies + news grid) */
body.body-dark .cs-card {
    background: var(--dk-surface);
    border: 1px solid var(--dk-rule);
}

body.body-dark .cs-card:hover {
    border-color: var(--stage);
}

body.body-dark .cs-card-meta {
    font-family: 'DM Mono', monospace !important;
    color: var(--stage);
    letter-spacing: 0.1em;
}

body.body-dark .cs-card-title {
    font-family: 'DM Serif Display', serif !important;
    font-weight: 400;
    color: var(--ink-inv);
}

body.body-dark .cs-card-excerpt {
    font-family: 'Instrument Sans', sans-serif !important;
    color: var(--dk-text);
}

/* News date */
body.body-dark .cs-news-date {
    font-family: 'DM Mono', monospace !important;
    color: var(--stage);
    letter-spacing: 0.1em;
}

/* News related case study panel */
body.body-dark .cs-news-related {
    background: var(--dk-surface);
    border-left-color: var(--stage);
}

body.body-dark .cs-news-related-label {
    font-family: 'DM Mono', monospace !important;
    color: var(--dk-text-dim);
}

body.body-dark .cs-news-related-title {
    font-family: 'DM Serif Display', serif !important;
    font-weight: 400;
    color: var(--ink-inv);
}

/* Archive header on /case-studies/ and /news/ */
body.body-dark .cs-archive-header {
    border-bottom-color: var(--dk-rule);
}


/* ════════════════════════════════════════════════════════════════════
   LEGACY TEMPLATE FIXUPS — About, Contact, and other older templates
   that were designed for dark theme. These overrides retarget their
   colors to readable light-theme values without rewriting the templates.
   ════════════════════════════════════════════════════════════════════ */

/* Make all body text readable on cream background. The dark theme set
   --color-text-secondary etc. to cream values; those are now invisible
   against cream. Force ink-on-cream for body content — light pages only. */
body.theme-light:not(.body-dark) .entry-content,
body.theme-light:not(.body-dark) .entry-content p,
body.theme-light:not(.body-dark) .entry-content li,
body.theme-light:not(.body-dark) .entry-content strong,
body.theme-light:not(.body-dark) .case-study-section p,
body.theme-light:not(.body-dark) .case-study-section li,
body.theme-light:not(.body-dark) .page-content p,
body.theme-light:not(.body-dark) .page-content li {
    color: var(--ink);
}

body.theme-light:not(.body-dark) .entry-content strong,
body.theme-light:not(.body-dark) .case-study-section strong,
body.theme-light:not(.body-dark) .page-content strong {
    color: var(--ink);
    font-weight: 600;
}

/* Page hero (the dark band at top of About / other pages) */
body.theme-light .page-hero {
    background: var(--warm);
    color: var(--ink);
    padding: 4rem 2rem;
    border-bottom: 1px solid var(--rule);
}

body.theme-light .page-hero .container {
    max-width: 1100px;
    margin: 0 auto;
}

/* Contact page hero — template-contact-page.php sets its own dark-red
   gradient background. Force the subtitle white because the entry-content
   color cascade above turns it ink-on-cream, which is invisible on red. */
body.theme-light .contact-hero .page-subtitle {
    color: #fff;
}

body.theme-light .page-title {
    font-family: 'DM Serif Display', serif;
    color: var(--ink);
    font-weight: 400;
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    line-height: 1.1;
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
}

body.theme-light .page-subtitle {
    color: var(--dim);
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 56ch;
}

/* Section spacing inside legacy templates */
body.theme-light .page-content {
    padding: 3rem 0 5rem;
}

body.theme-light .case-study-section {
    margin-bottom: 3rem;
}

body.theme-light .case-study-section h2 {
    font-family: 'DM Serif Display', serif;
    color: var(--ink);
    font-weight: 400;
    font-size: 1.8rem;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}

body.theme-light .case-study-section h3,
body.theme-light .case-study-section h4 {
    color: var(--ink);
    font-weight: 600;
}

/* Three-pillars cards — used on About */
body.theme-light .three-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

body.theme-light .pillar-card {
    background: var(--warm);
    border: 1px solid var(--rule);
    padding: 1.5rem;
    border-radius: 4px;
}

body.theme-light .pillar-card h3,
body.theme-light .pillar-card h4 {
    font-family: 'DM Serif Display', serif;
    color: var(--ink);
    font-weight: 400;
    font-size: 1.15rem;
    margin: 0 0 0.5rem;
}

body.theme-light .pillar-card p,
body.theme-light .pillar-card li {
    color: var(--ink);
    font-size: 0.95rem;
    line-height: 1.5;
}

body.theme-light .pillar-card ul {
    margin-left: 1.25rem;
    margin-top: 0.5rem;
}

/* Tech stack / tech items — used on About "What I Bring" + Performance Range */
body.theme-light .tech-stack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

body.theme-light .tech-item {
    background: var(--warm);
    border: 1px solid var(--rule);
    padding: 1.25rem;
    border-radius: 4px;
}

body.theme-light .tech-item strong {
    display: block;
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    font-size: 1.05rem;
    color: var(--ink);
    margin-bottom: 0.4rem;
}

body.theme-light .tech-item p {
    color: var(--dim);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
}

/* Override the inline --color-surface dark cards inside About template */
body.theme-light .case-study-section[style*="--color-surface"],
body.theme-light .case-study-section [style*="--color-surface"] {
    background: var(--warm) !important;
    border-color: var(--rule) !important;
}

/* Buttons used in legacy templates */
body.theme-light .btn,
body.theme-light .btn-primary,
body.theme-light .btn-secondary {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 3px;
    transition: background 0.2s, color 0.2s, transform 0.15s;
}

body.theme-light .btn-primary,
body.theme-light a.btn-primary {
    background: var(--ink) !important;
    color: var(--paper) !important;
    border: 1px solid var(--ink);
}

body.theme-light .btn-primary:hover {
    background: var(--stage) !important;
    color: #fff !important;
    border-color: var(--stage);
    transform: translateY(-1px);
}

body.theme-light .btn-secondary,
body.theme-light a.btn-secondary {
    background: transparent !important;
    color: var(--ink) !important;
    border: 1px solid var(--rule);
}

body.theme-light .btn-secondary:hover {
    border-color: var(--stage);
    color: var(--stage) !important;
}

/* Lead paragraph (intro on About page) */
body.theme-light .lead {
    color: var(--ink);
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    font-style: italic;
}

/* Links in legacy templates */
body.theme-light .entry-content a,
body.theme-light .case-study-section a {
    color: var(--stage);
    text-decoration: underline;
    text-decoration-color: rgba(200, 69, 26, 0.3);
}
body.theme-light .entry-content a:hover,
body.theme-light .case-study-section a:hover {
    color: var(--ink);
    text-decoration-color: var(--ink);
}
body.theme-light .entry-content a.btn,
body.theme-light .entry-content a.btn-primary,
body.theme-light .entry-content a.btn-secondary,
body.theme-light .case-study-section a.btn,
body.theme-light .case-study-section a.btn-primary,
body.theme-light .case-study-section a.btn-secondary {
    text-decoration: none;
}

/* Acting page (and similar templates) — inline-styled dark cards with cream
   text. The cards use background: var(--hero-surface-2, #0F0F0F) inline,
   which falls through to #0F0F0F since --hero-surface-2 isn't defined in
   the light theme. We need to override at a higher specificity. */
body.theme-light .case-study-section [style*="hero-surface-2"],
body.theme-light .case-study-section [style*="background: var(--hero-surface-2"],
body.theme-light .case-study-section [style*="background:var(--hero-surface-2"] {
    background: var(--warm) !important;
    color: var(--ink) !important;
    border: 1px solid var(--rule) !important;
}

/* Cream-colored text inside those cards (h2/p/strong tagged with hero-text vars) */
body.theme-light .case-study-section [style*="hero-text-primary"] {
    color: var(--ink) !important;
}

/* Redefine the legacy --color-* and --hero-* variables under non-dark
   pages only, so legacy templates inherit readable light-theme values.
   Dark pages keep style-v2.css's original (cream-on-dark) definitions. */
body.theme-light:not(.body-dark) {
    --hero-surface-2:     #ede8dc;  /* warm cream (was #0F0F0F) */
    --hero-bg-primary:    #c8451a;  /* stage orange — stays meaningful */
    --hero-text-primary:  #0f0e0c;  /* ink (was #F4F1EC cream) */
    --hero-text-secondary:#6b6560;  /* dim (was light gray) */

    --color-text-primary: #0f0e0c;  /* ink (was cream) */
    --color-text-secondary: #6b6560; /* dim (was light) */
    --color-text-muted:   #b0aba3;
    --color-surface:      #ede8dc;
    --color-surface-2:    #ede8dc;
    --color-surface-3:    #e4ddd0;
    --color-border:       rgba(15,14,12,0.08);
    --color-black:        #f5f0e8;  /* invert: where "black" was the bg, now cream */
    --color-white:        #0f0e0c;  /* invert: where "white" was text, now ink */
    --color-red:          #c8451a;
    --color-red-dark:     #a83a16;
    --color-gold:         #b8922a;
}

/* Linear-gradient dark backgrounds (like "Your Horror Show Project" card
   with the green gradient) — these can't be remapped via custom property
   trick. Force-override any inline gradient background that includes our
   former dark colors. The selector is broad but only matches inline-styled
   elements that explicitly hardcoded dark gradients. */
body.theme-light [style*="linear-gradient(135deg, #1a3a2e"],
body.theme-light [style*="linear-gradient(135deg, #0d1f17"] {
    background: var(--warm) !important;
    color: var(--ink) !important;
}

/* ════════════════════════════════════════════════════════════════════
   HOMEPAGE — Solver Complex template-specific rules
   All scoped under body.theme-light so they can't leak to dark pages.
   ════════════════════════════════════════════════════════════════════ */

/* ── HERO ─────────────────────────────────────────────────────────── */
body.theme-light .sc-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 90vh;
    border-bottom: 1px solid var(--rule);
}

body.theme-light .sc-hero-left {
    padding: 5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid var(--rule);
}

body.theme-light .sc-hero .eyebrow {
    display: block;
    margin-bottom: 2rem;
    opacity: 0;
    animation: vcLightFadeUp 0.6s ease forwards 0.15s;
}

body.theme-light .sc-hero-title {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(3.5rem, 6vw, 5.5rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin-bottom: 2rem;
    opacity: 0;
    animation: vcLightFadeUp 0.6s ease forwards 0.3s;
    color: var(--ink);
    font-weight: 400;
}

body.theme-light .sc-hero-title em {
    font-style: italic;
    color: var(--stage);
}

body.theme-light .sc-hero-def {
    max-width: 44ch;
    color: var(--dim);
    font-size: 1rem;
    line-height: 1.7;
    opacity: 0;
    animation: vcLightFadeUp 0.6s ease forwards 0.45s;
}

body.theme-light .sc-hero-def strong {
    color: var(--ink);
    font-weight: 600;
}

body.theme-light .sc-hero-bottom {
    opacity: 0;
    animation: vcLightFadeUp 0.6s ease forwards 0.65s;
}

body.theme-light .sc-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--rule);
    padding-top: 2rem;
    gap: 2rem;
}

body.theme-light .sc-stat-num {
    font-family: 'DM Serif Display', serif;
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.3rem;
    color: var(--ink);
    font-weight: 400;
}

body.theme-light .sc-stat-num em {
    font-style: normal;
    color: var(--stage);
}

body.theme-light .sc-stat-label {
    font-size: 0.78rem;
    color: var(--faint);
    line-height: 1.4;
    font-family: 'DM Mono', monospace;
    letter-spacing: 0.02em;
}

/* HERO RIGHT — concept cards */
body.theme-light .sc-hero-right {
    display: flex;
    flex-direction: column;
    opacity: 0;
    animation: vcLightFadeIn 0.8s ease forwards 0.5s;
}

body.theme-light .sc-concept-card {
    flex: 1;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid var(--rule);
    position: relative;
    overflow: hidden;
    transition: background 0.3s;
}

body.theme-light .sc-concept-card:last-child { border-bottom: none; }

body.theme-light .sc-concept-savior { background: var(--warm); }
body.theme-light .sc-concept-solver { background: var(--ink); }

body.theme-light .sc-concept-tag {
    font-family: 'DM Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

body.theme-light .sc-concept-savior .sc-concept-tag { color: var(--faint); }
body.theme-light .sc-concept-solver .sc-concept-tag { color: var(--stage); }

body.theme-light .sc-concept-name {
    font-family: 'DM Serif Display', serif;
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 1rem;
    font-weight: 400;
}

body.theme-light .sc-concept-savior .sc-concept-name { color: var(--ink); }
body.theme-light .sc-concept-solver .sc-concept-name { color: var(--ink-inv); }

body.theme-light .sc-concept-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 36ch;
}

body.theme-light .sc-concept-savior .sc-concept-desc { color: var(--dim); }
body.theme-light .sc-concept-solver .sc-concept-desc { color: #9a9590; }

body.theme-light .sc-concept-desc strong {
    color: var(--stage);
    font-weight: 600;
}

body.theme-light .sc-solver-badge {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--stage);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Mono', monospace;
    font-size: 0.55rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: #fff;
    text-align: center;
    line-height: 1.3;
}

/* ── SECTION LAYOUT ─────────────────────────────────────────────────── */
body.theme-light .sc-section-wrap {
    display: grid;
    grid-template-columns: 240px 1fr;
    border-bottom: 1px solid var(--rule);
}

body.theme-light .sc-section-label {
    padding: 4rem 2.5rem;
    border-right: 1px solid var(--rule);
    position: sticky;
    top: 61px;
    height: fit-content;
}

body.theme-light .sc-section-num {
    font-family: 'DM Mono', monospace;
    font-size: 0.65rem;
    color: var(--faint);
    letter-spacing: 0.12em;
    margin-bottom: 0.75rem;
}

body.theme-light .sc-section-title {
    font-family: 'DM Serif Display', serif;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--ink);
    font-weight: 400;
}

body.theme-light .sc-section-title em {
    font-style: italic;
    color: var(--stage);
}

body.theme-light .sc-section-body { padding: 4rem 3rem; }

/* ── ORIGIN ─────────────────────────────────────────────────────────── */
body.theme-light .sc-origin-quote {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(1.6rem, 2.5vw, 2.1rem);
    line-height: 1.3;
    padding-left: 1.5rem;
    border-left: 3px solid var(--stage);
    margin-bottom: 2.5rem;
    color: var(--ink);
    font-weight: 400;
}

body.theme-light .sc-origin-quote em {
    font-style: italic;
    color: var(--stage);
}

body.theme-light .sc-body-text {
    color: var(--dim);
    max-width: 60ch;
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.75;
}

body.theme-light .sc-body-text:last-child { margin-bottom: 0; }
body.theme-light .sc-body-text strong { color: var(--ink); font-weight: 600; }

/* ── WORK GRID ──────────────────────────────────────────────────────── */
body.theme-light .sc-work-wrap { border-bottom: 1px solid var(--rule); }

body.theme-light .sc-work-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

body.theme-light .sc-work-card {
    border-bottom: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
    padding: 2.5rem;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: background 0.25s;
    position: relative;
    overflow: hidden;
}

body.theme-light .sc-work-card:nth-child(even) { border-right: none; }
body.theme-light .sc-work-card:nth-last-child(-n+2) { border-bottom: none; }
body.theme-light .sc-work-card:hover { background: var(--warm); }

body.theme-light .sc-work-card::after {
    content: '↗';
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 1rem;
    color: var(--rule);
    transition: color 0.2s, transform 0.2s;
}

body.theme-light .sc-work-card:hover::after {
    color: var(--stage);
    transform: translate(2px, -2px);
}

/* Static (linkless) cards: no hover affordance arrow, no background change */
body.theme-light .sc-work-card-static {
    cursor: default;
}
body.theme-light .sc-work-card-static::after { display: none; }
body.theme-light .sc-work-card-static:hover { background: transparent; }

body.theme-light .sc-card-problem {
    font-family: 'DM Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--stage);
    margin-bottom: 0.6rem;
}

body.theme-light .sc-card-name {
    font-family: 'DM Serif Display', serif;
    font-size: 1.35rem;
    margin-bottom: 0.6rem;
    line-height: 1.2;
    color: var(--ink);
    font-weight: 400;
}

body.theme-light .sc-card-desc {
    font-size: 0.875rem;
    color: var(--dim);
    line-height: 1.6;
    margin-bottom: 1.25rem;
    max-width: 34ch;
}

body.theme-light .sc-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

body.theme-light .sc-work-card:hover .tag { background: var(--warmer); }

/* ── REFRAME ────────────────────────────────────────────────────────── */
body.theme-light .sc-reframe-body { padding: 4rem 3rem; }

body.theme-light .sc-reframe-pull {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    line-height: 1.35;
    margin-bottom: 3rem;
    max-width: 55ch;
    color: var(--ink);
    font-weight: 400;
}

body.theme-light .sc-constraint-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--rule);
    margin-bottom: 3rem;
    border: 1px solid var(--rule);
}

body.theme-light .sc-constraint-col {
    background: var(--paper);
    padding: 2rem;
}

body.theme-light .sc-constraint-after { background: var(--ink); }

body.theme-light .sc-constraint-head {
    font-family: 'DM Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rule);
}

body.theme-light .sc-constraint-before .sc-constraint-head { color: var(--faint); }
body.theme-light .sc-constraint-after .sc-constraint-head {
    color: var(--stage);
    border-color: #2a2a2a;
}

body.theme-light .sc-constraint-item {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    line-height: 1.55;
    align-items: flex-start;
}

body.theme-light .sc-constraint-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    margin-top: 2px;
}

body.theme-light .sc-constraint-before .sc-constraint-icon { background: var(--warm); color: var(--faint); }
body.theme-light .sc-constraint-after .sc-constraint-icon { background: var(--stage); color: #fff; }

body.theme-light .sc-constraint-before .sc-constraint-item { color: var(--dim); }
body.theme-light .sc-constraint-after .sc-constraint-item { color: #9a9590; }
body.theme-light .sc-constraint-after .sc-constraint-item strong { color: var(--ink-inv); }

/* ── TIMELINE ───────────────────────────────────────────────────────── */
body.theme-light .sc-timeline {
    position: relative;
    padding-left: 2rem;
    border-left: 1px solid var(--rule);
    margin-left: 0.5rem;
}

body.theme-light .sc-timeline-item {
    margin-bottom: 2.5rem;
    position: relative;
}

body.theme-light .sc-timeline-item-last { margin-bottom: 0; }

body.theme-light .sc-timeline-item::before {
    content: '';
    position: absolute;
    left: -2.4rem;
    top: 0.35rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rule);
    border: 2px solid var(--paper);
    box-shadow: 0 0 0 1px var(--rule);
    transition: background 0.2s;
}

body.theme-light .sc-timeline-item:hover::before { background: var(--stage); }

body.theme-light .sc-timeline-year {
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem;
    color: var(--stage);
    letter-spacing: 0.08em;
    margin-bottom: 0.2rem;
}

body.theme-light .sc-timeline-role {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.1rem;
    color: var(--ink);
}

body.theme-light .sc-timeline-org {
    font-size: 0.82rem;
    color: var(--faint);
    margin-bottom: 0.5rem;
    font-family: 'DM Mono', monospace;
}

body.theme-light .sc-timeline-desc {
    font-size: 0.875rem;
    color: var(--dim);
    line-height: 1.6;
    max-width: 46ch;
}

body.theme-light .sc-timeline-desc strong { color: var(--ink); font-weight: 600; }
body.theme-light .sc-timeline-desc em { font-style: italic; color: var(--ink); }

body.theme-light .sc-timeline-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.6rem;
}

/* ── INVITATION ─────────────────────────────────────────────────────── */
body.theme-light .sc-invitation {
    background: var(--ink);
    color: var(--ink-inv);
    padding: 7rem 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--rule);
}

body.theme-light .sc-invitation::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, #c8451a0f 0%, transparent 55%),
        radial-gradient(ellipse at 80% 30%, #b8922a08 0%, transparent 50%);
}

body.theme-light .sc-invitation-inner {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
}

body.theme-light .sc-invitation-eyebrow {
    color: var(--stage);
    margin-bottom: 1.5rem;
}

/* Higher specificity (.sc-invitation .sc-invitation-title) wins against
   body.theme-light:not(.body-dark) h2 { color: var(--ink) } which would
   otherwise paint these as ink-on-dark on the (light-body) homepage. */
body.theme-light .sc-invitation .sc-invitation-title,
body.theme-light:not(.body-dark) .sc-invitation .sc-invitation-title {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--ink-inv) !important;
    font-weight: 400;
}

body.theme-light .sc-invitation .sc-invitation-title em {
    font-style: italic;
    color: var(--stage) !important;
}

body.theme-light .sc-invitation .sc-invitation-body,
body.theme-light:not(.body-dark) .sc-invitation .sc-invitation-body {
    color: #8a8580 !important;
    font-size: 1.05rem;
    max-width: 48ch;
    margin: 0 auto 2.5rem;
    line-height: 1.7;
}

body.theme-light .sc-invitation .sc-invitation-body strong {
    color: var(--ink-inv) !important;
    font-weight: 600;
}

/* Same defense for the eyebrow inside the invitation block */
body.theme-light .sc-invitation .sc-invitation-eyebrow,
body.theme-light .sc-invitation .eyebrow {
    color: var(--stage) !important;
}

body.theme-light .sc-btn-row {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Override .btn-outline color when inside the dark invitation block */
body.theme-light .sc-invitation .btn-outline {
    color: #6a6560;
    border-color: #2a2a2a;
}
body.theme-light .sc-invitation .btn-outline:hover {
    color: var(--stage);
    border-color: var(--stage);
}

/* ── DOMAINS ────────────────────────────────────────────────────────── */
body.theme-light .sc-domains {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--rule);
}

body.theme-light .sc-domain-card {
    padding: 3rem 2.5rem;
    border-right: 1px solid var(--rule);
    text-decoration: none;
    color: inherit;
    display: block;
    transition: background 0.25s;
}

body.theme-light .sc-domain-card:last-child { border-right: none; }
body.theme-light .sc-domain-card:hover { background: var(--warm); }

body.theme-light .sc-domain-icon {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    display: block;
}

body.theme-light .sc-domain-name {
    font-family: 'DM Serif Display', serif;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    color: var(--ink);
    font-weight: 400;
}

body.theme-light .sc-domain-desc {
    font-size: 0.875rem;
    color: var(--dim);
    line-height: 1.6;
}

/* ── HOMEPAGE RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 900px) {
    body.theme-light .sc-hero { grid-template-columns: 1fr; min-height: auto; }
    body.theme-light .sc-hero-left { padding: 3rem 1.5rem; border-right: none; border-bottom: 1px solid var(--rule); }
    body.theme-light .sc-hero-right { flex-direction: row; }
    body.theme-light .sc-concept-card { border-bottom: none; border-right: 1px solid var(--rule); }
    body.theme-light .sc-concept-card:last-child { border-right: none; }

    body.theme-light .sc-section-wrap { grid-template-columns: 1fr; }
    body.theme-light .sc-section-label { position: static; padding: 2.5rem 1.5rem 1rem; border-right: none; border-bottom: 1px solid var(--rule); }
    body.theme-light .sc-section-body { padding: 2.5rem 1.5rem; }
    body.theme-light .sc-reframe-body { padding: 2.5rem 1.5rem; }

    body.theme-light .sc-work-grid { grid-template-columns: 1fr; }
    body.theme-light .sc-work-card { border-right: none !important; }
    body.theme-light .sc-work-card:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule) !important; }
    body.theme-light .sc-work-card:last-child { border-bottom: none !important; }

    body.theme-light .sc-constraint-grid { grid-template-columns: 1fr; }
    body.theme-light .sc-domains { grid-template-columns: 1fr; }
    body.theme-light .sc-domain-card { border-right: none; border-bottom: 1px solid var(--rule); }
    body.theme-light .sc-domain-card:last-child { border-bottom: none; }
}