/* =============================================================================
   style.css
   Author: William Brian Richmond
   Project: wbr.it.com (Personal Portfolio)
   Description:
     Global site styles + lens system (Curiosity / Constraints / Stakeholders).
     Lens system persists via assets/js/main.js and drives site-wide accent/glow.
   Revised: 2025-12-25
============================================================================= */

/* =============================================================================
   1) Root Variables + Resets
============================================================================= */

:root {
    /* Base palette */
    --bg: #060B14;
    --panel: rgba(255, 255, 255, 0.04);
    --text: #e6e8ee;
    --muted: rgba(230, 232, 238, 0.75);
    --line: rgba(230, 232, 238, 0.12);

    /* Layout */
    --max: 980px;

    /* Lens defaults (used if body has no lens class) */
    --accent: #9cc6ff;
    --accent-2: #c7f9e9;

    /* Background bloom layers (controlled by lens) */
    --bgA: rgba(156, 198, 255, 0.12);
    --bgB: rgba(199, 249, 233, 0.09);

    /* Glow + focus ring (tweak once, affects whole site) */
    --glow-soft: 0 0 32px color-mix(in srgb, var(--accent) 12%, transparent);
    --glow-med:  0 0 44px color-mix(in srgb, var(--accent) 18%, transparent);
    --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);

    /* Site-wide elevation */

    --elev-1:
            0 1px 0 rgba(255,255,255,0.04),
            0 14px 32px rgba(0,0,0,0.35);

    --elev-2:
            0 1px 0 rgba(255,255,255,0.05),
            0 22px 58px rgba(0,0,0,0.42);

    --elev-3:
            0 1px 0 rgba(255,255,255,0.06),
            0 30px 78px rgba(0,0,0,0.46);
}

/* Light theme needs different shadows */
body[data-theme="light"] {

    --elev-1:
            0 1px 0 rgba(255,255,255,0.85),
            0 14px 30px rgba(10,12,16,0.12);

    --elev-2:
            0 1px 0 rgba(255,255,255,0.90),
            0 22px 55px rgba(10,12,16,0.16);

    --elev-3:
            0 1px 0 rgba(255,255,255,0.92),
            0 30px 78px rgba(10,12,16,0.18);
}

/* Light header override (presentation only) */
body[data-theme="light"] .site-header{
    background: rgba(255, 255, 255, 0.72);
    border-bottom: 1px solid var(--line);
}

/* =============================================================================
   Theme Mode (Dark/Light) — site-wide, lens-safe
============================================================================= */

/* Default is dark (your current palette). Light mode overrides core tokens. */
body[data-theme="light"]{
    --bg: #f5f6f8;
    --panel: rgba(10, 12, 16, 0.05);
    --text: rgba(10, 12, 16, 0.92);
    --muted: rgba(10, 12, 16, 0.70);
    --line: rgba(10, 12, 16, 0.14);

    /* Reduce glow intensity in light mode (keeps it premium, not neon) */
    --glow-soft: 0 0 26px color-mix(in srgb, var(--accent) 10%, transparent);
    --glow-med:  0 0 34px color-mix(in srgb, var(--accent) 14%, transparent);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

/* =============================================================================
   2) Accessibility Utilities
============================================================================= */

/* Utility: screen-reader only text */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Skip link for keyboard users */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    padding: 0.75rem 1rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    z-index: 9999;
}
.skip-link:focus {
    left: 1rem;
    top: 1rem;
}

/* One ring style for all interactive elements */
:where(a, button, [role="link"], input, textarea, select, summary, .card[data-href]):focus-visible {
    outline: none;
    box-shadow:  var(--ring);
    border-radius: 12px;
}

/* =============================================================================
   3) Base Typography + Layout
============================================================================= */

body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color: var(--text);
    line-height: 1.7;

    /* Base canvas (no blooms here) */
    background: var(--bg);

    transition: background 220ms ease, color 220ms ease;

    /* Required for the bloom overlay layer */
    position: relative;

    /* Makes stacking behavior more predictable */
    isolation: isolate;
}

/* Background Wash - extends much further down the page */
body::before{
    content:"";
    position: fixed;
    inset: 0;
    pointer-events:none;
    z-index:-1;

    background-repeat:no-repeat;
    background-position: top center;
    /* INCREASED HEIGHT: 520px → 100% to cover entire viewport */
    background-size: 100% 100%;

    /* Default lens wash (Curiosity dark mode) - extends to 100% */
    background-image: linear-gradient(180deg,
    rgba(125,211,252,0.65) 0%,      /* Stronger at top */
    rgba(125,211,252,0.48) 15%,
    rgba(167,243,208,0.32) 30%,
    rgba(167,243,208,0.18) 45%,
    rgba(167,243,208,0.08) 60%,
    rgba(0,0,0,0.02) 80%,           /* Very subtle at bottom */
    rgba(0,0,0,0) 100%              /* Fully transparent at end */
    );

    opacity: 1;
}

/* Curiosity Light Mode - Much more visible gradient */
body[data-theme="light"]::before{
    background-image: linear-gradient(180deg,
    rgba(125,211,252,0.42) 0%,      /* Increased from 0.28 → 0.42 */
    rgba(125,211,252,0.32) 15%,     /* Increased from 0.20 → 0.32 */
    rgba(167,243,208,0.22) 30%,     /* Increased from 0.14 → 0.22 */
    rgba(167,243,208,0.12) 45%,     /* Increased from 0.08 → 0.12 */
    rgba(167,243,208,0.06) 60%,     /* Increased from 0.04 → 0.06 */
    rgba(255,255,255,0.5) 80%,      /* Same */
    rgba(255,255,255,0.8) 100%      /* Same */
    );
}

/* Constraints Dark Mode */
body.lens-constraints::before{
    background-image: linear-gradient(180deg,
    rgba(167,139,250,0.55) 0%,
    rgba(167,139,250,0.40) 15%,
    rgba(147,197,253,0.25) 30%,
    rgba(147,197,253,0.14) 45%,
    rgba(147,197,253,0.06) 60%,
    rgba(0,0,0,0.02) 80%,
    rgba(0,0,0,0) 100%
    );
}

/* Constraints Light Mode */
body[data-theme="light"].lens-constraints::before{
    background-image: linear-gradient(180deg,
    rgba(167,139,250,0.38) 0%,      /* Increased from 0.25 → 0.38 */
    rgba(167,139,250,0.28) 15%,     /* Increased from 0.18 → 0.28 */
    rgba(147,197,253,0.18) 30%,     /* Increased from 0.12 → 0.18 */
    rgba(147,197,253,0.11) 45%,     /* Increased from 0.07 → 0.11 */
    rgba(147,197,253,0.05) 60%,     /* Increased from 0.03 → 0.05 */
    rgba(255,255,255,0.5) 80%,      /* Same */
    rgba(255,255,255,0.8) 100%      /* Same */
    );
}

/* Stakeholders Dark Mode */
body.lens-stakeholders::before{
    background-image: linear-gradient(180deg,
    rgba(251,146,60,0.50) 0%,
    rgba(251,146,60,0.35) 15%,
    rgba(253,164,175,0.22) 30%,
    rgba(253,164,175,0.12) 45%,
    rgba(253,164,175,0.05) 60%,
    rgba(0,0,0,0.02) 80%,
    rgba(0,0,0,0) 100%
    );
}

/* Stakeholders Light Mode */
body[data-theme="light"].lens-stakeholders::before{
    background-image: linear-gradient(180deg,
    rgba(251,146,60,0.35) 0%,       /* Increased from 0.22 → 0.35 */
    rgba(251,146,60,0.26) 15%,      /* Increased from 0.16 → 0.26 */
    rgba(253,164,175,0.17) 30%,     /* Increased from 0.11 → 0.17 */
    rgba(253,164,175,0.10) 45%,     /* Increased from 0.06 → 0.10 */
    rgba(253,164,175,0.05) 60%,     /* Increased from 0.03 → 0.05 */
    rgba(255,255,255,0.5) 80%,      /* Same */
    rgba(255,255,255,0.8) 100%      /* Same */
    );
}

/* SOLID backgrounds for content containers in light mode */
body[data-theme="light"] .hero-body,
body[data-theme="light"] .content-card,
body[data-theme="light"] .card {
    background: rgba(255, 255, 255, 0.95); /* Nearly opaque white */
    border-color: rgba(10, 12, 16, 0.10);
    backdrop-filter: blur(8px);
}

/* SOLID backgrounds for content containers in dark mode */
body[data-theme="dark"] .hero-body,
body[data-theme="dark"] .content-card,
body[data-theme="dark"] .card,
body:not([data-theme]) .hero-body,
body:not([data-theme]) .content-card,
body:not([data-theme]) .card {
    background: rgba(15, 20, 30, 0.92); /* Nearly opaque dark */
    border-color: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
}

/* Light theme header - SOLID white background */
body[data-theme="light"] .site-header {
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(10, 12, 16, 0.10);
    backdrop-filter: blur(12px);
}

/* Dark theme header - SOLID dark background */
body[data-theme="dark"] .site-header,
body:not([data-theme]) .site-header {
    background: rgba(11, 18, 32, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
}

/* Light theme footer - SOLID white background */
body[data-theme="light"] .site-footer {
    border-top: 1px solid rgba(10, 12, 16, 0.10);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
}

/* Dark theme footer - SOLID dark background */
body[data-theme="dark"] .site-footer,
body:not([data-theme]) .site-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(15, 20, 30, 0.85);
    backdrop-filter: blur(8px);
}

/* Global links: lens-aware glow on hover/focus */
a {
    color: var(--text);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    text-decoration: none;
    color: var(--accent);
}

button:hover,
button:focus-visible {
    color: var(--text);
}

/* Headings: subtle lens glow */
h1, h2, h3 {
    text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Container */
.container {
    width: 100%;
    max-width: var(--max, 980px);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* =============================================================================
   4) Lens System (Curiosity / Constraints / Stakeholders)
============================================================================= */

/* Subtle fade when lens changes (JS toggles these classes briefly) */
.lens-fade { opacity: 0.96; transition: opacity 220ms ease; }
.lens-fade.lens-fade-in { opacity: 1; }

/* Lens themes (presentation only) */
/* Curiosity is the default lens; values match :root on purpose. */
body.lens-curiosity {
    --accent: #9cc6ff;
    --accent-2: #c7f9e9;

    /* restore Curiosity blooms explicitly */
    --bgA: rgba(156, 198, 255, 0.12);
    --bgB: rgba(199, 249, 233, 0.09);
}

body.lens-constraints {
    --accent: #a78bfa;     /* violet */
    --accent-2: #93c5fd;   /* cool blue */
    --bgA: rgba(167, 139, 250, 0.18);
    --bgB: rgba(147, 197, 253, 0.12);
}

body.lens-stakeholders {
    --accent: #fb923c;     /* warm orange */
    --accent-2: #fda4af;   /* soft rose */
    --bgA: rgba(251, 146, 60, 0.18);
    --bgB: rgba(253, 164, 175, 0.12);
}

/* ---------- Lens: content rendering modes (long / concise / executive) ---------- */
.lens-view { display: none; }

.lens-lede{
    margin: 0.35rem 0 0.75rem;
    color: var(--muted);
}

.lens-bullets {
    margin: 0.75rem 0 0;
    padding-left: 1.1rem;
}

.lens-bullets li {
    margin: 0.35rem 0;
}

/* Default: Curiosity shows longform */
body.lens-curiosity .lens-long { display: block; }
body.lens-curiosity .lens-constraints,
body.lens-curiosity .lens-exec { display: none; }

/* Constraints: concise summary */
body.lens-constraints .lens-long { display: none; }
body.lens-constraints .lens-constraints { display: block; }
body.lens-constraints .lens-exec { display: none; }

/* Stakeholders: executive framing */
body.lens-stakeholders .lens-long { display: none; }
body.lens-stakeholders .lens-constraints { display: none; }
body.lens-stakeholders .lens-exec { display: block; }

/* Exec layout */
.exec-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Exec summary: allow 2-column layout when Next Step is separated */
.exec-grid-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px){
    .exec-grid-2{
        grid-template-columns: 1fr;
    }
}

/* Next Step card spacing + stacked CTAs */
.exec-next{
    margin-top: 1rem;
}

@media (max-width: 900px) {
    .exec-grid { grid-template-columns: 1fr; }
}

.exec-links { margin-top: 0.75rem; }

/* =============================================================================
   5) Lens Transition Animations
============================================================================= */

/* Prepare for fade animation */
.lens-fade {
    opacity: 0.88;
    transition: opacity 160ms ease-out;
}

/* Fade in */
.lens-fade-in {
    opacity: 1;
}

/* Smooth transitions for lens view visibility changes */
.lens-view {
    animation: fadeIn 220ms ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =============================================================================
   6) Header + Navigation
============================================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(10px);
    background: rgba(11, 18, 32, 0.70);
    border-bottom: 1px solid var(--line);
}

/* Accent bar (lens driven) */
.site-header::after {
    content: "";
    display: block;
    height: 2px;
    background: linear-gradient(
            90deg,
            color-mix(in srgb, var(--accent) 85%, transparent),
            color-mix(in srgb, var(--accent-2) 75%, transparent)
    );
    opacity: 0.85;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 0.9rem 0;
}

.brand{
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    color: var(--text);
    max-width: none;
    padding-right: 1rem;
}

.brand-meta{
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.brand-name{
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.brand-role{
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--muted) 85%, transparent);
    margin-top: 2px;
}

@media (max-width: 620px){
    .brand-role{ display: none; }
}

.nav {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.nav a {
    color: var(--text);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.nav a:hover { color: var(--accent); }

@media (max-width: 860px){
    .header-inner{
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .brand{
        max-width: 100%;
    }
    .nav{
        width: 100%;
        justify-content: flex-start;
    }
}

/* =============================================================================
   7) Hero
============================================================================= */

.hero {
    padding: 5.5rem 0 4rem;
}

.hero-title {
    font-size: clamp(2.3rem, 4vw, 3.2rem);
    letter-spacing: -0.02em;
    margin: 0 0 0.6rem 0;
}

.hero-subtitle {
    margin: 0 0 2rem 0;
    color: var(--muted);
    font-size: 1.1rem;
}

.hero-body {
    padding: 1.6rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel);

    /* Calm by default */
    box-shadow:
            var(--elev-1);
}

/* Emphasis rules: no glow — just meaning */
.hero-body strong {
    color: var(--accent);
    font-weight: 650;
}

.hero-body em {
    color: var(--muted);
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.005em;
}

.hero-footer {
    margin-top: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.tagline {
    margin: 0;
    color: var(--muted);
    font-weight: 500;
}

/* Call to action button (lens native) */
.cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--text);
    font-weight: 650;
    letter-spacing: 0.01em;

    /* If this feels too glowy, reduce or remove these */
    box-shadow: 0 0 26px color-mix(in srgb, var(--accent) 14%, transparent);
}

.cta:hover {
    text-decoration: none;
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    box-shadow: 0 0 36px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* CTA grouping inside callouts */
.cta-group {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.8rem;
}

/* Stacked call-to-action layout */
.cta-stack {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.9rem;
    align-items: flex-start;
}

/* Secondary CTA: quieter, still lens-aware */
.cta.secondary {
    background: transparent;
    border: 1px solid var(--line);
    box-shadow: none;
    color: var(--muted);
}

.cta.secondary:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}


/* =============================================================================
   8) Lens Bar UI (Index)
============================================================================= */

.lens-bar {
    margin: 1.1rem 0 1.6rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    color: var(--muted);
}

.lens-label {
    font-weight: 600;
    color: var(--text);
}

.lens-buttons {
    display: inline-flex;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.lens-btn {
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--muted);
    padding: 0.5rem 0.75rem;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
}

.lens-btn:hover {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    box-shadow: var(--glow-soft);
}

.lens-btn.is-active {
    border-color: color-mix(in srgb, var(--accent) 70%, transparent);
    background: color-mix(in srgb, var(--accent) 28%, transparent);
    color: var(--text);
    box-shadow: var(--glow-med);
}

.lens-about {
    color: var(--accent);
    font-weight: 650;
}

/* Lens explainer */
.lens-explainer {
    padding: 1rem 0 3.5rem;
}
.lens-explainer h2 {
    margin: 0 0 0.6rem 0;
    font-size: 1.15rem;
}
.lens-explainer p {
    margin: 0;
    color: var(--muted);
    max-width: 80ch;
}

/* =============================================================================
   9) Theme Toggle Controls
============================================================================= */
/* Theme toggle bar (similar to lens-bar) */
.theme-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
    box-shadow: var(--elev-1);
}

.theme-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.theme-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.theme-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 160ms ease;
    font-family: inherit;
}

.theme-btn:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.theme-btn.is-active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--text);
    box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Focus states (inherit from global button focus) */
.theme-btn:focus-visible {
    outline: none;
    box-shadow:
            0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent),
            0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* Mobile adjustments */
@media (max-width: 720px) {
    .theme-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.65rem;
        padding: 0.75rem 0.85rem;
    }

    .theme-buttons {
        width: 100%;
    }

    .theme-btn {
        flex: 1;
        text-align: center;
    }
}

/* =============================================================================
   10) Cards (Clickable Tiles) — Border always lens, glow on hover/focus
============================================================================= */

.cards {
    padding: 1.25rem 0 4rem;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.1rem;
}

.card {
    grid-column: span 4;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: 18px;
    background: var(--panel);
    padding: 1.4rem 1.4rem 1.4rem;

    /* Calm by default */
    box-shadow:
             var(--elev-1);
    transition:
            transform 140ms ease,
            box-shadow 180ms ease,
            border-color 180ms ease;
}

.card h2 {
    margin: 0 0 0.65rem 0;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
}

.card p {
    margin: 0 0 1rem 0;
    color: var(--muted);
}

.card-link {
    color: var(--accent);
    font-weight: 650;
}

.card-link:hover {
    text-decoration: underline;
}

.card[data-href] {
    cursor: pointer;
}

/* Mouse hover */
.card[data-href]:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 62%, transparent);
    box-shadow:
            var(--elev-2), 0 0 32px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* Keyboard focus mirrors hover polish (no layout shift) */
.card[data-href]:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 62%, transparent);
    box-shadow:
            var(--elev-2), 0 0 32px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* Responsive cards */
@media (max-width: 900px) { .card { grid-column: span 6; } }
@media (max-width: 600px) { .card { grid-column: span 12; } }

/* =============================================================================
   11) Pages (Shared Components)
============================================================================= */

.page-hero { padding: 4.6rem 0 1.8rem; }

.page-title {
    font-size: clamp(2.0rem, 3.5vw, 2.8rem);
    margin: 0 0 0.6rem 0;
    letter-spacing: -0.02em;
}

.page-subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 1.05rem;
    max-width: 80ch;
}

.page-body { padding: 1.4rem 0 3.5rem; }

/* Emphasis: lens-colored strong text (shared pages) */
.page-body strong,
.content-card strong,
.longform strong {
    color: color-mix(in srgb, var(--accent) 88%, var(--text));
    font-weight: 700;
}

.content-card {
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: 18px;
    background: var(--panel);
    padding: 0.25rem 1.4rem 1.4rem;
    margin-top: 2.4rem;
    margin-bottom: 0.8rem;

    box-shadow:
            var(--elev-1);
}

.content-card h2 {
    color: color-mix(in srgb, var(--accent) 88%, var(--text));
    margin-top: 2.4rem;
    margin-bottom: 0.8rem;

    /* Subtle emphasis */
    text-shadow: 0 0 20px color-mix(in srgb, var(--accent) 10%, transparent);
}
.content-card h3 {
    color: color-mix(in srgb, var(--accent) 50%, var(--text));
    margin-top: 1.6rem;
    margin-bottom: 0.5rem;

    /* Subtle emphasis */
    text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 8%, transparent);
}

.content-card p { margin: 0 0 0.9rem 0; color: var(--muted); }
.content-card p:last-child { margin-bottom: 0; }

.content-card.callout {
    box-shadow:
            var(--elev-2), 0 0 48px color-mix(in srgb, var(--accent) 20%, transparent);
}

.clean-list { margin: 0.6rem 0 0 1.2rem; color: var(--muted); }
.clean-list li { margin: 0.4rem 0; }

.refs { margin: 0.6rem 0 0 1.2rem; color: var(--muted); }
.refs li { margin: 0.55rem 0; }

/* Philosophy diagram wrapper */
.philosophy-diagram {
    margin: 1.2rem 0 1.4rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel);
    padding: 1rem;

    box-shadow:
            var(--elev-2), 0 0 38px color-mix(in srgb, var(--accent) 12%, transparent);
}
.philosophy-diagram svg { width: 100%; height: auto; display: block; }

/* Longform sections (Philosophy page optional layout) */
.longform { padding: 0.25rem 0 3.5rem; }

.longform .section {
    padding: 1.2rem 0 1.4rem;
    border-top: 1px solid var(--line);
}

.longform .section:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.longform .section h2 {
    margin: 0 0 0.6rem 0;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
}

/* Sub-headings: section anchors */
h2 {
    color: color-mix(in srgb, var(--accent) 88%, var(--text));
    margin-top: 2.4rem;
    margin-bottom: 0.8rem;

    /* Subtle emphasis */
    text-shadow: 0 0 20px color-mix(in srgb, var(--accent) 10%, transparent);
}

h3 {
    color: color-mix(in srgb, var(--accent) 50%, var(--text));
    margin-top: 1.6rem;
    margin-bottom: 0.5rem;

    /* Subtle emphasis */
    text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 8%, transparent);
}

.longform .section p {
    margin: 0 0 0.9rem 0;
    color: var(--muted);
    max-width: 85ch;
}

.longform .section p:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
    .longform .section { padding: 1.05rem 0 1.25rem; }
}

/* Principle block (quiet emphasis, not a callout) */
.principle-block {
    border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
    border-radius: 18px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    padding: 1.25rem 1.25rem 1.05rem;
}

.principle-block .principle {
    margin: 0.25rem 0 0.85rem;
    font-size: 1.15rem;
    font-weight: 750;
    color: color-mix(in srgb, var(--accent) 92%, var(--text));
}

/* Values nested under principle */
.principle-values {
    margin-top: 1.2rem;
}

/* =============================================================================
   12) Contact Page (Forms + Contact Blocks)
============================================================================= */

/* Contact form wrapper inherits content-card styling */
.contact-form {
    margin-top: 0.6rem;
}

/* Individual form rows */
.form-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1.1rem;
}

/* Labels */
.form-row label {
    font-weight: 650;
    color: var(--text);
}

/* Inputs and textarea */
.form-row input,
.form-row textarea {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.65rem 0.75rem;
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;

    transition:
            border-color 160ms ease,
            box-shadow 160ms ease,
            background 160ms ease;
}

/* Placeholder text */
.form-row input::placeholder,
.form-row textarea::placeholder {
    color: rgba(230, 232, 238, 0.45);
}

/* Focus states (inherits global ring behavior) */
.form-row input:focus-visible,
.form-row textarea:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* Textarea specifics */
.form-row textarea {
    resize: vertical;
    min-height: 140px;
}

/* Muted helper text */
.muted {
    color: var(--muted);
    font-size: 0.95rem;
}

/* Contact list spacing (Direct Contact section) */
.content-card ul.clean-list li strong {
    color: color-mix(in srgb, var(--accent) 80%, var(--text));
}

/* Stack CTAs nicely on contact page */
.contact-form .cta-stack {
    margin-top: 0.4rem;
}

/* Mobile tweaks */
@media (max-width: 720px) {
    .form-row {
        margin-bottom: 0.95rem;
    }
}

/* =============================================================================
   13) Footer
============================================================================= */

/* Footer base (existing styles remain, these extend them) */
.site-footer {
    border-top: 1px solid var(--line);
    margin-top: 3.5rem;
    padding: 1.5rem 0 1rem;
    color: var(--muted);
}

.footer-inner {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Footer navigation grid */
.footer-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.25rem 1.5rem;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-heading {
    margin: 0 0 0.25rem 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 8%, transparent);
}

.footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.footer-list li {
    margin: 0;
}

.footer-list a {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 160ms ease;
    display: inline-block;
}

.footer-list a:hover,
.footer-list a:focus-visible {
    color: var(--text);
}

/* External link indicator for social media */
.footer-list a[target="_blank"]::after {
    content: " ↗";
    font-size: 0.75em;
    opacity: 0.6;
    margin-left: 0.15em;
}

/* Copyright and Admin bar at bottom */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}

.footer-copyright {
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted);
}

.footer-admin {
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted);
}

/* Privacy/Cookie notice banner */
.footer-notice {
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
    margin-top: 0.75rem;
}

.footer-notice p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted);
    text-align: center;
}

.footer-notice a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.footer-notice a:hover {
    text-decoration-thickness: 2px;
}

/* Responsive adjustments */
@media (max-width: 720px) {
    .footer-nav {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .site-footer {
        padding: 1.25rem 0 0.75rem;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .footer-nav {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}