/* page-base.css — rules every legacy page carried an identical inline copy of.
   Generated by tools/migrate_shared_base.py (2026-09-30); edit here now, not in the pages.
   Pages: press.html, volunteering.html, testimonials.html, maker.html, writing.html, talks.html, case-studies.html, work.html, projects.html */

:root[data-mode="pro"][data-theme="light"] {
            --bg: #FAFAF8;
            --bg-2: #F2F0EC;
            --text: #1A1A18;
            --text-2: #6B6B67;
            --accent: #FF1493;
            --border: rgba(0, 0, 0, 0.08);
            --card-border: rgba(0, 0, 0, 0.08);
            --card-bg: #FFFFFF;
            --card-shadow: rgba(0, 0, 0, 0.04);
        }

:root[data-mode="pro"][data-theme="dark"] {
            --bg: #111110;
            --bg-2: #1C1C1A;
            --text: #F0EEE8;
            --text-2: #888880;
            --accent: #FF1493;
            --border: rgba(255, 255, 255, 0.08);
            --card-border: rgba(255, 255, 255, 0.08);
            --card-bg: #1C1C1A;
            --card-shadow: rgba(0, 0, 0, 0.3);
        }

[data-mode="pro"][data-theme="dark"] body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: radial-gradient(circle at 20% 50%, rgba(255, 20, 147, 0.03) 0%, transparent 50%),
                        radial-gradient(circle at 80% 80%, rgba(255, 20, 147, 0.02) 0%, transparent 50%);
            pointer-events: none;
        }

[data-mode="pro"][data-theme="light"] body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: radial-gradient(circle at 20% 50%, rgba(255, 20, 147, 0.02) 0%, transparent 50%),
                        radial-gradient(circle at 80% 80%, rgba(255, 20, 147, 0.015) 0%, transparent 50%);
            pointer-events: none;
        }

:root[data-mode="gremlin"][data-theme="light"] {
            --bg: linear-gradient(160deg, #FFD6E8 0%, #E8D0F5 40%, #C8E6FF 100%);
            --bg-2: rgba(255, 255, 255, 0.35);
            --text: #4A3560;
            --text-2: #5E4278;
            --accent: #F4A7C3;
            --pink: #F4A7C3;
            --blue: #89C4E1;
            --lavender: #C4A8E0;
            --mint: #A8E0C4;
            --peach: #F9C8A0;
            --card-bg: #FFFFFF;
            --outline: #FFFFFF;
            --stroke: #C9A8E0;
            --border: rgba(138, 111, 174, 0.2);
            --card-border: rgba(138, 111, 174, 0.2);
            --card-shadow: rgba(100, 80, 150, 0.15);
        }

:root[data-mode="gremlin"][data-theme="dark"] {
            --bg: linear-gradient(160deg, #2D1B33 0%, #1E1A3E 40%, #0D1F35 100%);
            --bg-2: rgba(255, 255, 255, 0.08);
            --text: #F0D6FF;
            --text-2: #C4A8E0;
            --accent: #F4A7C3;
            --pink: #F4A7C3;
            --blue: #89C4E1;
            --lavender: #C4A8E0;
            --mint: #A8E0C4;
            --peach: #F9C8A0;
            --card-bg: rgba(255, 255, 255, 0.12);
            --outline: rgba(255, 255, 255, 0.2);
            --stroke: #8B6FAE;
            --border: rgba(196, 168, 224, 0.2);
            --card-border: rgba(196, 168, 224, 0.2);
            --card-shadow: rgba(100, 80, 150, 0.3);
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

.skip-link {
            position: absolute;
            top: -40px;
            left: 0;
            background: var(--accent);
            color: white;
            padding: 8px 16px;
            text-decoration: none;
            z-index: 10000;
            font-weight: 600;
            border-radius: 0 0 4px 0;
        }

.skip-link:focus {
            top: 0;
        }

@media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }

html {
            scroll-behavior: smooth;
        }

body {
            background: var(--bg);
            color: var(--text);
            font-family: 'DM Sans', sans-serif;
            transition: background-color 0.35s ease, color 0.35s ease;
            overflow-x: hidden;
            line-height: 1.6;
        }

[data-mode="gremlin"] body {
            background-attachment: fixed;
            font-family: 'Nunito', sans-serif;
            font-weight: 600;
        }

[data-mode="gremlin"][data-theme="dark"] body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 150%;
            height: 150%;
            z-index: -1;
            background: linear-gradient(-45deg, #1a1625, #2a1f3d, #3d2f52, #1f1a2e);
            opacity: 0.6;
            animation: gradientDrift 30s ease-in-out infinite alternate;
            pointer-events: none;
        }

[data-mode="gremlin"][data-theme="light"] body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 150%;
            height: 150%;
            z-index: -1;
            background: linear-gradient(-45deg, #fff5fc, #ffe6f7, #ffc9ed, #ffb3e6);
            opacity: 0.4;
            animation: gradientDrift 30s ease-in-out infinite alternate;
            pointer-events: none;
        }

@keyframes gradientDrift {
            from { transform: translate3d(0, 0, 0); }
            to   { transform: translate3d(-33.333%, -33.333%, 0); }
        }

.top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 999;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--card-bg);
            padding: 16px 32px;
            border-bottom: 1px solid var(--card-border);
            backdrop-filter: blur(10px);
        }

.nav-links {
            display: flex;
            gap: 32px;
            align-items: center;
        }

.nav-link {
            color: var(--text-2);
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            padding: 6px 12px;
            border-radius: 6px;
            transition: all 0.2s ease;
            font-family: 'DM Mono', monospace;
            text-transform: lowercase;
        }

.nav-link:hover {
            color: var(--text);
            background: var(--bg-2);
        }

.nav-link.active {
            color: var(--accent);
            font-weight: 600;
        }

[data-mode="gremlin"] .nav-link {
            font-family: 'Nunito', sans-serif;
            font-size: 15px;
        }

.view-controls {
            position: relative;
        }

.view-toggle {
            background: transparent;
            color: var(--text-2);
            padding: 8px 16px;
            cursor: pointer;
            font-size: 13px;
            font-family: 'DM Mono', monospace;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.2s ease;
            border-radius: 20px;
            position: relative;
        }

[data-mode="pro"] .view-toggle {
            border: 1.5px solid rgba(255, 20, 147, 0.4);
        }

[data-mode="pro"] .view-toggle::before {
            content: '';
            display: inline-block;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--accent);
            margin-right: 2px;
        }

[data-mode="pro"] .view-toggle .view-toggle-text::after {
            content: ' ⇄';
        }

[data-mode="pro"] .view-toggle:hover {
            background: rgba(255, 20, 147, 0.08);
            color: var(--text);
        }

[data-mode="gremlin"] .view-toggle {
            font-family: 'Bubblegum Sans', cursive;
            font-size: 14px;
            border: 1.5px solid var(--stroke);
        }

[data-mode="gremlin"] .view-toggle::before {
            content: '';
            display: inline-block;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--pink);
            margin-right: 2px;
        }

[data-mode="gremlin"] .view-toggle:hover {
            background: var(--bg-2);
            color: var(--text);
        }

.view-toggle-icon {
            transition: transform 0.2s ease;
            width: 16px;
            height: 16px;
        }

.view-toggle.active .view-toggle-icon {
            transform: rotate(180deg);
        }

.view-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 16px;
            min-width: 240px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.2s ease;
            box-shadow: 0 8px 24px var(--card-shadow);
        }

.view-dropdown.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

[data-mode="gremlin"] .view-dropdown {
            border: 2px solid var(--stroke);
            box-shadow: 0 0 0 3px var(--outline), 0 8px 24px var(--card-shadow);
        }

.view-section {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

.view-label {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-2);
            font-family: 'DM Mono', monospace;
        }

[data-mode="gremlin"] .view-label {
            font-family: 'Bubblegum Sans', cursive;
            text-transform: none;
            font-size: 13px;
        }

.view-buttons {
            display: flex;
            gap: 8px;
        }

.view-btn {
            flex: 1;
            background: var(--bg-2);
            border: 1px solid var(--border);
            color: var(--text);
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            font-family: inherit;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

.view-btn:hover {
            background: var(--bg);
            border-color: var(--accent);
        }

.view-btn.active {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
        }

.view-separator {
            height: 1px;
            background: var(--border);
            margin: 12px 0;
        }

.page-title {
            font-size: clamp(3rem, 8vw, 5rem);
            margin-bottom: 20px;
            line-height: 1;
        }

[data-mode="pro"] .page-title {
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: -0.02em;
        }

/* Phones: most pages' inline CSS already drops .page-title to 2rem under 768px;
   pages without that copy (volunteering, accessibility) kept 48px and the pro
   uppercase title ran off-screen ("VOLUNTEERIN|"), adding a sideways scroll. */
@media (max-width: 768px) {
    .page-title { font-size: 2rem; }
}

:root[data-mode="gremlin"][data-theme="light"]{
        --bg:#F6F1F6;
        --mat:linear-gradient(152deg,#FFDDEB 0%,#ECD6F6 48%,#CFE7FB 100%);
        --mat-edge:rgba(255,255,255,.55);
        --keyshadow:rgba(138,111,174,.30);
      }

:root[data-mode="gremlin"][data-theme="dark"]{
        --bg:#141019;
        --mat:linear-gradient(152deg,#3a2342 0%,#272250 48%,#142a44 100%);
        --mat-edge:rgba(255,255,255,.06);
        --keyshadow:rgba(0,0,0,.55);
        --card-bg:#221B2E;
      }

[data-mode="gremlin"][data-theme="dark"] body::before{
        background:radial-gradient(1100px circle at 88% -10%,rgba(180,140,224,.18),transparent 60%),
                   radial-gradient(1000px circle at 5% 108%,rgba(80,120,180,.14),transparent 58%) !important;
        animation:none !important; inset:0 !important; width:100% !important; height:100% !important;
      }

[data-mode="gremlin"][data-theme="light"] body::before{
        background:radial-gradient(1100px circle at 88% -10%,rgba(244,167,195,.16),transparent 60%),
                   radial-gradient(1000px circle at 5% 108%,rgba(137,196,225,.12),transparent 58%) !important;
        animation:none !important; inset:0 !important; width:100% !important; height:100% !important;
      }

[data-mode="gremlin"] *, [data-mode="gremlin"] *::before, [data-mode="gremlin"] *::after{
        backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
      }

[data-mode="gremlin"] .nav-links{ gap:14px; flex-wrap:wrap; }

[data-mode="gremlin"] .nav-link{
        font-family:'DM Mono',monospace; font-size:12.5px;
        background:var(--card-bg); border:1px solid var(--border);
        box-shadow:0 4px 0 var(--keyshadow,rgba(120,90,160,.3));
        border-radius:10px; padding:7px 10px 9px;
        transition:transform .08s ease, box-shadow .08s ease;
      }

[data-mode="gremlin"] .nav-link:hover{ transform:translateY(-2px); color:var(--accent); }

[data-mode="gremlin"] .nav-link.active{ transform:translateY(3px); box-shadow:0 1px 0 var(--keyshadow,rgba(120,90,160,.3)); color:var(--accent); }

.view-controls{ display:flex; gap:8px; align-items:center; }

.view-toggle, .view-dropdown{ display:none !important; }

.view-key{
        font-family:'DM Mono',monospace; font-size:12.5px; color:var(--text);
        background:var(--card-bg); border:1px solid var(--border);
        box-shadow:0 4px 0 var(--keyshadow,rgba(0,0,0,.14));
        border-radius:10px; padding:7px 12px 9px; cursor:pointer; white-space:nowrap;
        transition:transform .08s ease, box-shadow .08s ease;
      }

.view-key:hover{ transform:translateY(-2px); }

.view-key:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--keyshadow,rgba(0,0,0,.14)); }

[data-mode="gremlin"] #modeKey{ color:#fff; background:linear-gradient(135deg,var(--pink,#F4A7C3),var(--lavender,#C4A8E0)); border:none; box-shadow:0 4px 0 #9a78c2; }

@media (max-width:768px){
        .top-nav{ flex-wrap:nowrap; gap:10px; overflow-x:auto; justify-content:flex-start; padding:10px 14px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
          -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 22px),transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 22px),transparent 100%); }
        .top-nav::-webkit-scrollbar{ display:none; }
        .nav-links, [data-mode="gremlin"] .nav-links{ flex-wrap:nowrap; flex:0 0 auto; gap:8px; }
        .nav-link, [data-mode="gremlin"] .nav-link{ flex:0 0 auto; white-space:nowrap; }
        .view-controls{ flex:0 0 auto; }
        .view-key{ white-space:nowrap; }
      }

.view-controls::before{content:"press to change";font-family:'DM Mono',monospace;font-size:11px;color:var(--text-2);opacity:.62;align-self:center;margin-right:4px;white-space:nowrap;}

@media (max-width:768px){.view-controls::before{display:none;}}

.hdr-icon{display:inline-block;margin-left:10px;color:var(--accent);vertical-align:-0.08em;}

.hdr-icon svg{width:0.8em;height:0.8em;}

[data-mode="pro"] .hdr-icon{display:none;}

[data-mode="gremlin"] .page-title{font-family:'Bubblegum Sans',cursive;}

:root[data-mode="gremlin"][data-theme="light"]{ --accent:#9C2D63; }

[data-mode="gremlin"][data-theme="light"] #modeKey{ background:linear-gradient(135deg,#B14371,#7E5FA3); box-shadow:0 4px 0 #6d4f93; }

.site-footer{margin-top:80px;padding:48px 24px 32px;border-top:2px solid var(--border);background:var(--card-bg);color:var(--text-2);font-size:14px}

.site-footer-inner{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;gap:36px 56px;justify-content:space-between}

.footer-contact{max-width:340px}

.footer-contact h2{font-size:1.5rem;margin:0 0 10px;color:var(--text);font-weight:700}

[data-mode="gremlin"] .footer-contact h2{font-family:'Bubblegum Sans',cursive;font-weight:400}

.footer-contact p{margin:0 0 16px;line-height:1.55;color:var(--text-2)}

.footer-email{display:inline-block;font-size:1.1rem;font-weight:600;color:var(--accent);text-decoration:none;border-bottom:2px solid transparent;transition:border-color .2s ease}

.footer-email:hover{border-bottom-color:var(--accent)}

.footer-socials{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px 18px}

.footer-socials a{color:var(--text-2);text-decoration:none;font-weight:500;transition:color .2s ease}
/* 24px tap target (WCAG 2.2 2.5.8): pro footer socials were 22px tall on phones */
.footer-socials a{display:inline-flex;align-items:center;min-height:24px}

.footer-socials a:hover{color:var(--accent)}

.footer-nav{display:flex;flex-wrap:wrap;gap:40px}

.footer-col h2{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--text-2);opacity:.65;margin:0 0 12px;font-weight:700}

.footer-col a{display:block;color:var(--text);text-decoration:none;padding:5px 0;font-size:14px;transition:color .2s ease}

.footer-col a:hover{color:var(--accent)}

.site-footer-base{max-width:1080px;margin:36px auto 0;padding-top:20px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;align-items:center;font-size:13px;color:var(--text-2)}

@media (max-width:600px){.site-footer{padding:36px 20px 28px}.footer-nav{gap:28px}.site-footer-inner{gap:28px}}

[data-mode="gremlin"][data-theme="light"] .footer-email{color:#9C2D63}

[data-mode="gremlin"][data-theme="light"] .footer-email:hover{border-bottom-color:#9C2D63}

[data-mode="gremlin"][data-theme="light"] .footer-col a:hover{color:#9C2D63}

[data-mode="gremlin"][data-theme="light"] .footer-socials a:hover{color:#9C2D63}

/* Linked anchors (#etl-pipeline, #certifications, ...) land below the fixed nav, not under it. */
:target { scroll-margin-top: calc(var(--nav-h, 72px) + 16px); }
/* Homepage stat links land on their proof: ring the target so it's clear what
   the number points at. Static (MOTION.md: no surprise motion), theme tokens only. */
.project-card:target, #certifications:target {
    outline: 2px dashed var(--accent);
    outline-offset: 6px;
    border-radius: 12px;
}
/* The certs line is the last line of the companies section; landing it at the top
   showed the next section instead. Land it mid-screen with the logos above it. */
#certifications { scroll-margin-top: 45vh; }
#certifications:target { width: fit-content; margin-inline: auto; padding: 4px 14px; }

/* Visually hidden, still read by screen readers (headings that fix the outline, etc.). */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Keyboard focus on the nav tabs was invisible in pro (keyboard pass 2026-09-30). */
.nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }