// Obsidiancloud — Chad Dutcher's resume site, deployable build.
// Fullscreen, responsive, drawer pinned to viewport.

const CHAD = {
  name: "Chad Dutcher",
  alias: "Obsidian",
  domain: "obsidiancloud.org",
  title: "IT Infrastructure & Cloud Engineer",
  email: "chad.obsidiancloud@gmail.com",
  linkedin: "https://www.linkedin.com/in/chad-dutcher-1a280892/",
  github: "https://github.com/RavenObsidianCloud",
  resume: "resume.pdf",
  location: "Fresno/Clovis CA · Seattle · Remote",
  status: "Open to work",
  eyebrow: "IT Infrastructure · Cloud Engineering · AI Systems",
  sub: "T3 workstation tech turned cloud builder.\nI make infrastructure that actually holds.",
  phone: "559-649-8355",
  tagline:
    "Eight years in healthcare IT — six at Tier 3 supporting 1,500+ users across 30+ clinical sites at Santé Health System. Now deep in GCP, Python automation, and local AI — building things that work in production, not just demos. Air Force veteran. Currently open to infrastructure and cloud roles in Fresno/Clovis, Seattle, or remote.",
};

const EXPERTISE = [
  {
    id: "infra", kicker: "Core", title: "Workstation & Infrastructure",
    desc: "Tier 3 support for 1,500+ users across 30+ clinical sites. Epic & NextGen EHR, Imprivata SSO, AD/SCCM/Intune, hardware lifecycle, and full facility build-outs in HIPAA-compliant environments.",
    story: {
      lede: "I spent six years as the person other techs called when the ticket wouldn't close.",
      paragraphs: [
        "At Tier 3, the easy problems have already been ruled out by the time the ticket reaches you. What's left are the network of small contradictions — the imaging workstation that drops AD trust every fourth reboot, the SCCM task sequence that fails on one OU but not the others, the badge reader that works in the morning and dies after 2pm.",
        "I came to love this work because it rewards reading carefully. Logs over guesses. Patterns over hunches. Documenting the fix so the Tier 1 desk can close the next one without me — at Santé I mentored a team of four Tier 1 techs on troubleshooting methodology and ticket documentation.",
        "By the end of my time at Santé I was the escalation point for workstation, imaging, EHR (Epic, NextGen) and hardware across 30+ clinical sites — 1,500+ users in clinical environments where downtime has a price tag in patient minutes."
      ],
      stack: ["Epic EHR", "NextGen EHR", "Imprivata OneSign", "Active Directory", "Group Policy", "SCCM / Intune", "O365 Admin", "HIPAA", "Hardware lifecycle", "Structured cabling"],
      proof: [
        { value: "1,500+", label: "Users supported" },
        { value: "30+", label: "Clinical sites" },
        { value: "6yrs", label: "Tier 3 at Santé" },
      ],
    },
  },
  {
    id: "cloud", kicker: "Cloud", title: "GCP & Cloud Engineering",
    desc: "GCP Associate Cloud Engineer in progress (June 2026). Terraform, serverless architecture, Conversational Agents, Compute Engine, hands-on with 60+ labs.",
    story: {
      lede: "Cloud isn't a different job. It's the same discipline at a different blast radius.",
      paragraphs: [
        "I'm working toward the GCP Associate Cloud Engineer exam in June 2026 — but I learn by building, so the cert is the receipt, not the goal. The work that produced it is in my GitHub: a Terraform-provisioned TeamSpeak server, a GCP Conversational Agents phone system, a half-dozen Compute Engine + Cloud Functions experiments.",
        "What I'm chasing is fluency: writing the infra-as-code first, picking the right compute primitive for the workload, sizing for cost not for ego, and leaving the next person a README they can actually use.",
        "60+ hands-on labs and counting. The TeamSpeak project is the portfolio piece — start with a problem, end with a deployable artefact and a teardown script."
      ],
      stack: ["GCP", "Terraform", "Compute Engine", "Cloud Functions", "Conversational Agents", "Firestore", "VPC / Firewall", "IAM"],
      proof: [
        { value: "Jun 2026", label: "GCP ACE target" },
        { value: "60+", label: "Hands-on labs" },
        { value: "IaC", label: "Terraform-first" },
      ],
    },
  },
  {
    id: "ai", kicker: "Automation", title: "Python & AI Pipelines",
    desc: "Production Python agent tools, local LLM pipelines with Ollama/Qwen, ticket triage automation. Runs on Pop!_OS with AMD 7900 XTX.",
    story: {
      lede: "Most AI demos break on Monday. I build the boring version that doesn't.",
      paragraphs: [
        "My home stack runs Ollama with Qwen 3 8B and 32B on an AMD 7900 XTX under Pop!_OS — and on top of it, four Python tools I actually use: agent.py for general triage, agent-heavy.py for the longer-context work, triage.py for ticket classification, and ticket_queue.py for the queue itself.",
        "The point isn't the model. It's the loop around the model: prompts versioned in git, JSON schemas the agent has to obey, structured logs of every call, fallbacks when a tool errors. The same hygiene I'd apply to any other production service.",
        "When I pitched Claude Enterprise adoption to IT leadership at Santé, the deck wasn't about how clever the model was. It was about which tickets we could safely automate, how we'd measure regret, and what the rollback plan looked like."
      ],
      stack: ["Python", "Ollama", "Qwen 3 8B / 32B", "Pop!_OS", "AMD 7900 XTX", "Pydantic", "Tool use / function calling"],
      proof: [
        { value: "4", label: "Production agents" },
        { value: "Local", label: "On-prem inference" },
        { value: "Live", label: "Daily-driver use" },
      ],
    },
  },
  {
    id: "veteran", kicker: "Security", title: "Veteran · Cleared",
    desc: "USAF Security Forces. Inactive Secret clearance eligible for reinstatement. Process-driven, high-stakes-environment mindset.",
    story: {
      lede: "The Air Force taught me to slow down in the moments that matter most.",
      paragraphs: [
        "USAF Security Forces, Sep 2007 – Jan 2009 (A1C) — base security, access control, and law enforcement operations. The work shaped a habit of mind I still rely on every day in IT: follow the procedure, log the action, communicate with your team, escalate cleanly.",
        "I held a Secret clearance during my service. It's now inactive, but eligible for reinstatement. That history matters for roles involving regulated data, healthcare compliance, government work, or any environment where the cost of a misstep is measured in something other than a Jira ticket."
      ],
      stack: ["USAF Security Forces", "Law enforcement", "Procedural discipline", "Team coordination", "Inactive Secret clearance"],
      proof: [
        { value: "USAF", label: "Honorable service" },
        { value: "Secret", label: "Inactive · reinstatable" },
        { value: "HIPAA", label: "Healthcare environment" },
      ],
    },
  },
];

const PROJECTS = [
  {
    id: "agent-pipeline", type: "Python · Local AI", title: "AI Agent Pipeline",
    desc: "Four production Python tools — agent.py, agent-heavy.py, triage.py, ticket_queue.py — running on a local Ollama stack with Qwen 3 8B/32B. Built for real ticket triage and queue management workflows.",
    github: "https://github.com/RavenObsidianCloud/TicketAgent",
    story: {
      lede: "A local-first agent stack that actually closes tickets.",
      problem: "Help desk queues fill up faster than humans can categorise them. Most of the routing decisions are mechanical — but the cost of getting one wrong is real, so blind automation isn't safe.",
      approach: "Four focused tools rather than one mega-agent. Each one does a single job, exposes a JSON contract, and writes structured logs. The agents call into a local Ollama instance running Qwen 3 — no data leaves the machine.",
      details: [
        "agent.py — general-purpose triage with tool calling",
        "agent-heavy.py — long-context analyses and summaries",
        "triage.py — classification with confidence + reasons",
        "ticket_queue.py — queue state, pickup, deadlines",
      ],
      stack: ["Python 3", "Ollama", "Qwen 3 8B / 32B", "Pydantic schemas", "structlog", "Local-first"],
      learned: "Smaller, well-scoped agents beat one big agent every time. The schema is the product.",
    },
  },
  {
    id: "call-agent", type: "Dialogflow CX · Santé HQ", title: "AI Call-Routing Prototype",
    desc: "Dialogflow CX call-routing solution developed at Santé Health System targeting the claims and customer help departments at HQ. Phased rollout designed to deflect routine call volume from front-desk staff before handing off to a human.",
    github: "https://github.com/RavenObsidianCloud/AI-Call-Agent",
    story: {
      lede: "A phone tree, but it actually listens.",
      problem: "Santé's claims and customer help departments at HQ were spending hours a day on routine inbound calls — eligibility lookups, hours, basic routing — that could have been triaged by a well-trained agent before reaching a human.",
      approach: "Built on Dialogflow CX (now Google Conversational Agents). Designed as a phased rollout: start with the easiest, lowest-risk call categories, measure deflection rate and caller satisfaction, expand intents from there. Webhook fulfillment for live data lookups, and a clean blind-transfer to a human whenever the agent isn't confident.",
      details: [
        "Built for Santé HQ — claims & customer help departments",
        "Phased rollout: deflect the easy categories first, expand carefully",
        "Webhook fulfillment for live data lookups",
        "Blind transfer with context preserved when escalation needed",
      ],
      stack: ["Dialogflow CX", "Google Conversational Agents", "Cloud Functions", "STT / TTS", "Python webhooks", "Phased rollout"],
      learned: "The hardest part isn't the AI. It's modelling the knowledge base so the agent can look things up under time pressure — and being honest about which calls aren't safe to automate yet.",
    },
  },
  {
    id: "cvcrsa", type: "Client Build-Out · Healthcare", title: "CVCRSA Facility Expansion",
    desc: "End-to-end IT build-out for the Central Valley Colon & Rectal Surgical Associates clinical expansion. Pre-construction conduit planning through completion, four enterprise contractors in play, completed on the August 2025 deadline.",
    github: null,
    images: [
      { src: "images/cvcrsa/02-rack.jpg", caption: "Patch panels and UPS, cabled and labelled. Plywood mount, ICC racks, Cat6 home runs." },
      { src: "images/cvcrsa/01-construction.jpg", caption: "Mid-build — ceiling tiles out, low-voltage conduit being pulled through the new space." },
      { src: "images/cvcrsa/03-desk-cables.jpg", caption: "Reception workstation under the hood — cable management hidden under a lift-up panel." },
      { src: "images/cvcrsa/04-finished-desk.jpg", caption: "Reception live and logging in. Dual-monitor diagnostic setup, ready for staff on day one." },
    ],
    story: {
      lede: "Walls don't move once they're up. Get the conduit right the first time.",
      problem: "CVCRSA needed a complete IT build-out for a major clinical facility expansion — from gut/demolition through opening day. Hard deadline: August 2025. Multiple vendors. Healthcare meant no slack for downtime.",
      approach: "Started in the pre-construction phase, working with the project planner to make sure low-voltage conduit was specified correctly for Cat cable runs before walls closed up. Then managed the physical hardware deployment and architected the network infrastructure for the expanded space. Kept four enterprise contractors aligned on a shared timeline.",
      details: [
        "Pre-construction conduit planning — Cat6 runs sized before drywall",
        "Full hardware deployment across the expanded clinical suite",
        "Network infrastructure architected for the new space",
        "Vendor coordination: Christensen, PNA, Valley Telecom, Superior Design",
        "Completed on the August 2025 deadline",
      ],
      stack: ["Structured cabling (Cat5e/Cat6)", "Low-voltage conduit planning", "Network switch config", "Hardware procurement", "Vendor management"],
      learned: "The IT scope of a clinical build-out is written before the building exists. Earn a seat at the pre-construction table.",
    },
  },
  {
    id: "thg-suite-106", type: "Client Build-Out · Healthcare", title: "THG Suite 106 Clinical Expansion",
    desc: "Full technical furnishing of a newly constructed clinical suite at The Heart Group of Fresno — hardware procurement, multi-monitor diagnostic workstations, MFPs, wiring — plus a mid-project scope change from CT to ultrasound that meant adapting the entire hardware plan on the fly.",
    github: null,
    story: {
      lede: "The suite's purpose changed halfway through. The deadline didn't.",
      problem: "A newly constructed clinical suite at The Heart Group needed full technical furnishing — workstations, MFPs, wiring, peripherals — plus the relocation of specialized CVDX and sonographer staff with diagnostic equipment that can't take downtime.",
      approach: "Procured and deployed multi-monitor diagnostic workstations, high-capacity MFPs, and the network wiring to support them. Coordinated directly with client-side vendors in addition to Santé's. When the suite's purpose shifted mid-project from a CT room to an ultrasound room, re-scoped hardware and infrastructure to match — without slipping the schedule.",
      details: [
        "Multi-monitor diagnostic workstations for clinical staff",
        "Network wiring and high-capacity MFPs across the suite",
        "Specialized staff relocation (CVDX team, sonographers)",
        "Adapted hardware plan when scope changed from CT to ultrasound",
        "Cross-organizational vendor management",
      ],
      stack: ["Hardware procurement", "Diagnostic workstation setup", "Network wiring", "Vendor coordination", "Change management"],
      learned: "Scope changes are inevitable in clinical construction. Build a hardware plan that can absorb a 'CT becomes ultrasound' phone call without slipping the deadline.",
    },
  },
  {
    id: "teamspeak-gcp", type: "GCP · Terraform", title: "TeamSpeak Server on GCP",
    desc: "Terraform-provisioned TeamSpeak 3 server on Google Cloud Platform. Compute Engine, VPC networking, firewall rules, startup scripts, and cost management — built as a hands-on GCP ACE exam portfolio project.",
    github: "https://github.com/RavenObsidianCloud/TeamSpeak-Server-on-GCP",
    story: {
      lede: "ACE prep as a real artefact, not just labs.",
      problem: "Studying for a cloud cert by clicking through Qwiklabs is fine — but the gaps show up when you try to stand up something real, end to end, with cost ceilings.",
      approach: "Built a complete TeamSpeak 3 deployment on GCP, provisioned entirely through Terraform. Compute Engine VM, custom VPC, firewall scoped to UDP voice ports, startup script that installs and configures TS3, plus teardown so the project's cost goes to zero when I'm not using it.",
      details: [
        "Terraform for everything — no console clicks",
        "Cost-capped — teardown returns the project to $0",
        "Startup script bootstraps TS3 from a clean image",
        "Repo includes the full README so a recruiter can read it cold",
      ],
      stack: ["Terraform", "GCP Compute Engine", "VPC / Firewall", "Bash startup scripts", "Cost management"],
      learned: "Cert prep that produces a repo beats cert prep that produces a score. Both is best.",
    },
  },
  {
    id: "pesttrack", type: "PWA · Firebase · React", title: "PestTrack Pro",
    desc: "Multi-branch pest control business management PWA. Role-based access for technicians and managers, inventory tracking, low-stock alerts, and monthly reporting. React + TypeScript + Firebase — deployed and live.",
    github: "https://github.com/RavenObsidianCloud/pesttrack-pro",
    story: {
      lede: "Built for a real business, deployed and in use.",
      problem: "A multi-branch pest control operation was tracking inventory and routes on paper and group chat. Techs needed something offline-friendly; managers needed a dashboard.",
      approach: "A PWA so it installs to a phone and survives bad cell coverage. Firebase Auth with role-based rules — techs see their routes and stock, managers see everything. Inventory drops in real time, low-stock alerts go out automatically, monthly reports compile themselves.",
      details: [
        "Role-based access — tech / manager / owner",
        "Offline-capable PWA installable on Android & iOS",
        "Inventory + low-stock alerts",
        "Monthly reporting baked in",
      ],
      stack: ["React", "TypeScript", "Firebase Auth", "Firestore", "Firebase Hosting", "PWA / Service Worker"],
      learned: "Real users don't care about your framework. They care that the app loads in the truck with one bar of signal.",
    },
  },
  {
    id: "homelab", type: "Self-Hosted · Linux", title: "obsidiancloud.org Home Stack",
    desc: "Open WebUI via Tailscale Funnel, persistent local AI assistant, custom domain, Pop!_OS host with AMD 7900 XTX GPU. Daily-driver production setup.",
    github: null,
    story: {
      lede: "The lab that pays for itself in skills.",
      problem: "I wanted a real production environment for the agents and LLM work — not a laptop demo, not a paid cloud account I'd flinch at every month.",
      approach: "A Pop!_OS workstation with an AMD 7900 XTX as the GPU, exposed safely over Tailscale Funnel under my own domain. Open WebUI as the front door, Ollama serving the models, and the agent tooling running locally with persistent context.",
      details: [
        "Tailscale Funnel for safe public exposure — no open ports",
        "Open WebUI on top of Ollama",
        "AMD 7900 XTX — 24GB VRAM, runs Qwen 3 32B comfortably",
        "Cost: $0 / month after hardware",
      ],
      stack: ["Pop!_OS", "Tailscale Funnel", "Open WebUI", "Ollama", "Nginx", "Custom domain"],
      learned: "Owning the stack end-to-end is the fastest way to get fluent. Bills focus the mind.",
    },
  },
];

const EXPERIENCE = [
  {
    dates: ["Oct 2019 —", "Mar 2026"],
    role: "Tier 3 / Workstation Tech III",
    org: "Santé Health System · Fresno/Clovis, CA · 30+ clinical sites",
    body: "Tier 3 endpoint and infrastructure support for 1,500+ users across 30+ clinical sites. Final escalation point for workstation, imaging, Epic/NextGen EHR, and hardware issues; mentored a Tier 1 team of four on troubleshooting methodology and ticket documentation. Led IT build-outs for the CVCRSA expansion and THG Suite 106. Managed enterprise Janus/Uniguest digital signage upgrade (v3 → v5) including ExchangeEWS calendar integration. Built Giva CC Autofill Chrome extension to speed up ticketing. Developed a Dialogflow CX AI call-routing prototype for claims and customer help. Pitched Claude Enterprise adoption to IT leadership. Started via Robert Half contract in Oct 2019, converted to full-time March 2020.",
    tags: ["Epic EHR", "NextGen EHR", "Imprivata SSO", "Active Directory", "SCCM / Intune", "Healthcare IT", "Tier 3", "Dialogflow CX", "Chrome Extension Dev"],
  },
  {
    dates: ["2026 —", "Present"],
    role: "IT Consultant",
    org: "Dr. Samia Ghaffar · New Practice Setup · Clovis, CA",
    body: "Independent engagement scoping and standing up full IT infrastructure for a new medical practice. Network design, device procurement, cloud integration, and ongoing support.",
    tags: ["Consulting", "Practice Setup", "Network Design", "Healthcare"],
  },
  {
    dates: ["Jan 2018 —", "May 2019"],
    role: "IT Support Specialist — EHR",
    org: "Kings Medical Group · Hanford, CA",
    body: "Technical support for the eClinicalWorks EHR platform across clinical sites — troubleshooting application issues and workflow disruptions, hardware and software installation, and onsite/remote support coordinated around patient-care hours.",
    tags: ["eClinicalWorks", "EHR Support", "Hardware", "Clinical IT"],
  },
  {
    dates: ["Sep 2007 —", "Jan 2009"],
    role: "Security Forces Specialist (A1C)",
    org: "United States Air Force",
    body: "Base security, access control, and law enforcement operations. Developed high-pressure decision-making, procedural discipline, and team coordination under operational conditions. Held Secret clearance — now inactive, eligible for reinstatement.",
    tags: ["Secret Clearance", "Law Enforcement", "Operations", "Veteran"],
  },
];

const STACK = [
  { label: "GCP (ACE in progress)", featured: true },
  { label: "Python", featured: true },
  { label: "Terraform", featured: true },
  { label: "Epic EHR", featured: true },
  { label: "NextGen EHR", featured: true },
  { label: "eClinicalWorks" },
  { label: "Imprivata OneSign" },
  { label: "HIPAA" },
  { label: "Active Directory" }, { label: "Group Policy" },
  { label: "SCCM / Intune" }, { label: "O365 Admin" },
  { label: "Windows Server" }, { label: "Linux / Pop!_OS" },
  { label: "Networking" }, { label: "Structured Cabling" },
  { label: "Dialogflow CX" }, { label: "Conversational Agents" },
  { label: "Compute Engine" }, { label: "Cloud Functions" },
  { label: "Firebase" }, { label: "Ollama" },
  { label: "React" }, { label: "TypeScript" },
  { label: "Tailscale" }, { label: "Open WebUI" },
  { label: "Giva ITSM" }, { label: "Chrome Extension Dev" },
  { label: "Bash" }, { label: "Git" },
];

function Evolved() {
  const [open, setOpen] = React.useState(null); // {kind, id}

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") setOpen(null); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  // Lock body scroll when drawer is open
  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  const openItem = open
    ? open.kind === "expertise"
      ? EXPERTISE.find(x => x.id === open.id)
      : PROJECTS.find(x => x.id === open.id)
    : null;

  return (
    <div className="ev-page">
      <style>{evCSS}</style>

      <div className="ev-noise"></div>
      <div className="ev-top-rule"></div>

      <div className="ev-container">

        <nav className="ev-nav">
          <span className="ev-nav-mark">{CHAD.domain}</span>
          <ul className="ev-nav-links">
            <li><a href="#expertise">Expertise</a></li>
            <li><a href="#experience">Experience</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </nav>

        <div className="ev-hero">
          <div className="ev-eyebrow">{CHAD.eyebrow}</div>
          <h1 className="ev-name">{CHAD.name}<br /><em>{CHAD.alias}</em></h1>
          <p className="ev-sub">{CHAD.sub.split("\n").map((line, i) => (
            <React.Fragment key={i}>{line}{i === 0 && <br />}</React.Fragment>
          ))}</p>
          <p className="ev-tagline">{CHAD.tagline}</p>
          <div className="ev-status-row">
            <a href={`mailto:${CHAD.email}?subject=Let's%20work%20together`} className="ev-status-badge">
              <span className="ev-status-dot"></span>
              {CHAD.status}
            </a>
            <span className="ev-loc">📍 {CHAD.location}</span>
          </div>
        </div>

        <section id="expertise" className="ev-section">
          <div className="ev-section-header">
            <span className="ev-section-num">01</span>
            <h2 className="ev-section-title">Expertise</h2>
            <span className="ev-section-hint">Click any card →</span>
          </div>
          <div className="ev-expertise-grid">
            {EXPERTISE.map((x) => (
              <button key={x.id} className="ev-expertise-card" onClick={() => setOpen({ kind: "expertise", id: x.id })}>
                <div className="ev-expertise-icon">{x.kicker}</div>
                <div className="ev-expertise-title">{x.title}</div>
                <div className="ev-expertise-desc">{x.desc}</div>
                <div className="ev-expertise-more">Read more →</div>
              </button>
            ))}
          </div>
        </section>

        <section id="experience" className="ev-section">
          <div className="ev-section-header">
            <span className="ev-section-num">02</span>
            <h2 className="ev-section-title">Experience</h2>
          </div>
          <div className="ev-exp-list">
            {EXPERIENCE.map((e, i) => (
              <div key={i} className="ev-exp-item">
                <div className="ev-exp-meta">
                  <div className="ev-exp-dates">{e.dates.map((d, j) => <React.Fragment key={j}>{d}{j < e.dates.length - 1 && <br />}</React.Fragment>)}</div>
                </div>
                <div>
                  <div className="ev-exp-role">{e.role}</div>
                  <div className="ev-exp-org">{e.org}</div>
                  <div className="ev-exp-body">{e.body}</div>
                  <div className="ev-exp-tags">
                    {e.tags.map((t, j) => <span key={j} className="ev-exp-tag">{t}</span>)}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </section>

        <section id="projects" className="ev-section">
          <div className="ev-section-header">
            <span className="ev-section-num">03</span>
            <h2 className="ev-section-title">Projects</h2>
            <span className="ev-section-hint">Click any card →</span>
          </div>
          <div className="ev-project-grid">
            {PROJECTS.map((p) => (
              <button key={p.id} className="ev-project-card" onClick={() => setOpen({ kind: "project", id: p.id })}>
                <div className="ev-project-type">{p.type}</div>
                <div className="ev-project-title">{p.title}</div>
                <div className="ev-project-desc">{p.desc}</div>
                <div className="ev-project-foot">
                  <span className="ev-project-link">Read the story →</span>
                  {p.github && (
                    <span className="ev-project-gh"
                      onClick={(e) => { e.stopPropagation(); window.open(p.github, "_blank"); }}>
                      GitHub ↗
                    </span>
                  )}
                </div>
              </button>
            ))}
          </div>
        </section>

        <section id="stack" className="ev-section">
          <div className="ev-section-header">
            <span className="ev-section-num">04</span>
            <h2 className="ev-section-title">Stack</h2>
          </div>
          <div className="ev-stack-list">
            {STACK.map((s, i) => (
              <span key={i} className={`ev-stack-pill ${s.featured ? "featured" : ""}`}>{s.label}</span>
            ))}
          </div>
        </section>

        <section id="contact" className="ev-section">
          <div className="ev-contact-block">
            <div className="ev-contact-heading">Let&rsquo;s work together.</div>
            <p className="ev-contact-sub">
              Open to IT infrastructure, cloud engineering, and systems roles. Fresno/Clovis area, Seattle, or fully remote.
            </p>
            <div className="ev-contact-links">
              <a href={`mailto:${CHAD.email}`} className="ev-contact-link primary">Email me</a>
              <a href={`tel:${CHAD.phone.replace(/[^0-9+]/g, "")}`} className="ev-contact-link">{CHAD.phone}</a>
              <a href={CHAD.resume} className="ev-contact-link" download>Resume</a>
              <a href={CHAD.linkedin} className="ev-contact-link" target="_blank" rel="noopener">LinkedIn</a>
              <a href={CHAD.github} className="ev-contact-link" target="_blank" rel="noopener">GitHub</a>
            </div>
          </div>
        </section>

        <footer className="ev-footer">
          <span className="ev-foot-text">{CHAD.name} · {CHAD.domain}</span>
          <span className="ev-foot-text">{CHAD.location}</span>
        </footer>
      </div>

      <div className={`ev-scrim ${open ? "open" : ""}`} onClick={() => setOpen(null)}></div>
      <aside className={`ev-drawer ${open ? "open" : ""}`}>
        {openItem && (open.kind === "expertise" ? (
          <ExpertiseDrawer item={openItem} onClose={() => setOpen(null)} />
        ) : (
          <ProjectDrawer item={openItem} onClose={() => setOpen(null)} />
        ))}
      </aside>
    </div>
  );
}

function DrawerHeader({ kicker, title, onClose }) {
  return (
    <div className="ev-drawer-header">
      <div>
        <div className="ev-drawer-kicker">{kicker}</div>
        <div className="ev-drawer-title">{title}</div>
      </div>
      <button className="ev-drawer-close" onClick={onClose} aria-label="Close">
        <span>ESC</span>
        <span style={{ fontSize: 20 }}>×</span>
      </button>
    </div>
  );
}

function ExpertiseDrawer({ item, onClose }) {
  const s = item.story;
  return (
    <div className="ev-drawer-body">
      <DrawerHeader kicker={item.kicker.toUpperCase() + " · EXPERTISE"} title={item.title} onClose={onClose} />
      <p className="ev-drawer-lede">{s.lede}</p>
      {s.paragraphs.map((p, i) => <p key={i} className="ev-drawer-p">{p}</p>)}

      <div className="ev-drawer-section">
        <div className="ev-drawer-section-head">Tools & technologies</div>
        <div className="ev-drawer-pills">
          {s.stack.map((t, i) => <span key={i} className="ev-drawer-pill">{t}</span>)}
        </div>
      </div>

      <div className="ev-drawer-section">
        <div className="ev-drawer-section-head">Receipts</div>
        <div className="ev-drawer-proof">
          {s.proof.map((p, i) => (
            <div key={i} className="ev-proof-cell">
              <div className="ev-proof-val">{p.value}</div>
              <div className="ev-proof-label">{p.label}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function ProjectDrawer({ item, onClose }) {
  const s = item.story;
  return (
    <div className="ev-drawer-body">
      <DrawerHeader kicker={item.type.toUpperCase()} title={item.title} onClose={onClose} />
      <p className="ev-drawer-lede">{s.lede}</p>

      {item.images && item.images.length > 0 && (
        <div className="ev-drawer-gallery">
          {item.images.map((img, i) => (
            <figure key={i} className="ev-drawer-figure">
              <div className="ev-drawer-figure-frame">
                <img src={img.src} alt={img.caption} loading="lazy" />
              </div>
              <figcaption>{img.caption}</figcaption>
            </figure>
          ))}
        </div>
      )}

      <div className="ev-drawer-section">
        <div className="ev-drawer-section-head">The problem</div>
        <p className="ev-drawer-p">{s.problem}</p>
      </div>

      <div className="ev-drawer-section">
        <div className="ev-drawer-section-head">The approach</div>
        <p className="ev-drawer-p">{s.approach}</p>
      </div>

      <div className="ev-drawer-section">
        <div className="ev-drawer-section-head">What's in it</div>
        <ul className="ev-drawer-ul">
          {s.details.map((d, i) => <li key={i}>{d}</li>)}
        </ul>
      </div>

      <div className="ev-drawer-section">
        <div className="ev-drawer-section-head">Stack</div>
        <div className="ev-drawer-pills">
          {s.stack.map((t, i) => <span key={i} className="ev-drawer-pill">{t}</span>)}
        </div>
      </div>

      <div className="ev-drawer-section">
        <div className="ev-drawer-section-head">What I learned</div>
        <p className="ev-drawer-p" style={{ fontStyle: "italic", color: "#c9a96e" }}>{s.learned}</p>
      </div>

      {item.github && (
        <a href={item.github} target="_blank" rel="noopener" className="ev-drawer-cta">
          <span>View on GitHub</span>
          <span>↗</span>
        </a>
      )}
    </div>
  );
}

const evCSS = `
.ev-page {
  --ev-bg: #0d0d0d;
  --ev-bg2: #141414;
  --ev-bg3: #1a1a1a;
  --ev-border: rgba(255,255,255,0.07);
  --ev-border-mid: rgba(255,255,255,0.12);
  --ev-text: #e8e4dc;
  --ev-muted: #7a7670;
  --ev-dim: #6a6865;
  --ev-accent: #c9a96e;
  --ev-accent-dim: rgba(201,169,110,0.15);
  --ev-accent-glow: rgba(201,169,110,0.06);
  --ev-green: #4a8c5c;
  --ev-green-bg: rgba(74,140,92,0.12);
  --ev-serif: 'Cormorant Garamond', Georgia, serif;
  --ev-sans: 'Outfit', sans-serif;
  --ev-mono: 'JetBrains Mono', monospace;
  width: 100%;
  min-height: 100vh;
  background: var(--ev-bg);
  color: var(--ev-text);
  font-family: var(--ev-sans);
  font-weight: 300;
  line-height: 1.7;
  position: relative;
  overflow-x: hidden;
}
.ev-page * { box-sizing: border-box; margin: 0; padding: 0; }
.ev-page button { background: none; border: none; color: inherit; font: inherit; cursor: pointer; text-align: inherit; }
.ev-noise {
  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='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 0; opacity: 0.4;
}
.ev-top-rule { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--ev-accent), transparent); }
.ev-container { max-width: 780px; margin: 0 auto; padding: 0 2rem; position: relative; z-index: 1; }

/* nav */
.ev-nav { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0; border-bottom: 1px solid var(--ev-border); margin-bottom: 5rem; flex-wrap: wrap; gap: 0.75rem; }
.ev-nav-mark { font-family: var(--ev-serif); font-size: 1.1rem; color: var(--ev-accent); letter-spacing: 0.05em; font-style: italic; }
.ev-nav-links { display: flex; gap: 2rem; list-style: none; flex-wrap: wrap; }
.ev-nav-links a { font-family: var(--ev-mono); font-size: 0.65rem; color: var(--ev-muted); text-decoration: none; letter-spacing: 0.15em; text-transform: uppercase; transition: color .2s; }
.ev-nav-links a:hover { color: var(--ev-accent); }

/* hero */
.ev-hero { margin-bottom: 6rem; }
.ev-eyebrow { font-family: var(--ev-mono); font-size: 0.65rem; color: var(--ev-accent); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.ev-eyebrow::before { content: ''; display: inline-block; width: 2rem; height: 1px; background: var(--ev-accent); }
.ev-name { font-family: var(--ev-serif); font-size: clamp(3rem, 10vw, 6rem); font-weight: 300; line-height: 0.95; letter-spacing: -0.02em; margin-bottom: 1rem; }
.ev-name em { font-style: italic; color: var(--ev-accent); }
.ev-sub { font-family: var(--ev-serif); font-size: clamp(1.15rem, 3vw, 1.4rem); font-weight: 300; color: var(--ev-muted); font-style: italic; margin-bottom: 2rem; line-height: 1.4; }
.ev-tagline { font-size: 1rem; color: var(--ev-text); max-width: 520px; line-height: 1.8; font-weight: 300; margin-bottom: 2.5rem; }
.ev-status-row { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.ev-status-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--ev-mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ev-green); background: var(--ev-green-bg); border: 1px solid rgba(74,140,92,0.3); padding: 0.4rem 0.9rem; border-radius: 2px; text-decoration: none; }
.ev-status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ev-green); animation: evPulse 2s ease infinite; }
.ev-loc { font-family: var(--ev-mono); font-size: 0.65rem; color: var(--ev-dim); letter-spacing: 0.1em; text-transform: uppercase; }

/* section */
.ev-section { margin-bottom: 5rem; scroll-margin-top: 2rem; }
.ev-section-header { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 2rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--ev-border); flex-wrap: wrap; }
.ev-section-title { font-family: var(--ev-serif); font-size: 1.8rem; font-weight: 300; letter-spacing: -0.02em; }
.ev-section-num { font-family: var(--ev-mono); font-size: 0.6rem; color: var(--ev-dim); letter-spacing: 0.1em; }
.ev-section-hint { font-family: var(--ev-mono); font-size: 0.6rem; color: var(--ev-accent); letter-spacing: 0.14em; text-transform: uppercase; margin-left: auto; }

/* expertise */
.ev-expertise-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ev-border); border: 1px solid var(--ev-border); }
.ev-expertise-card { display: block; width: 100%; background: var(--ev-bg); padding: 1.75rem 1.5rem; transition: background .2s; position: relative; }
.ev-expertise-card:hover { background: var(--ev-bg2); }
.ev-expertise-card:hover .ev-expertise-more { opacity: 1; transform: translateX(0); }
.ev-expertise-icon { font-family: var(--ev-mono); font-size: 0.6rem; color: var(--ev-accent); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.75rem; }
.ev-expertise-title { font-family: var(--ev-serif); font-size: 1.2rem; font-weight: 400; margin-bottom: 0.5rem; line-height: 1.2; }
.ev-expertise-desc { font-size: 0.8rem; color: var(--ev-muted); line-height: 1.7; margin-bottom: 1rem; }
.ev-expertise-more { font-family: var(--ev-mono); font-size: 0.6rem; color: var(--ev-accent); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0; transform: translateX(-4px); transition: opacity .24s, transform .24s; }

/* experience */
.ev-exp-list { border-top: 1px solid var(--ev-border); }
.ev-exp-item { display: grid; grid-template-columns: 120px 1fr; gap: 0 2rem; padding: 1.75rem 0; border-bottom: 1px solid var(--ev-border); transition: background .2s; }
.ev-exp-item:hover { background: var(--ev-accent-glow); }
.ev-exp-dates { font-family: var(--ev-mono); font-size: 0.6rem; color: var(--ev-dim); letter-spacing: 0.05em; line-height: 1.4; }
.ev-exp-role { font-family: var(--ev-serif); font-size: 1.2rem; font-weight: 400; margin-bottom: 0.2rem; }
.ev-exp-org { font-family: var(--ev-mono); font-size: 0.65rem; color: var(--ev-accent); letter-spacing: 0.08em; margin-bottom: 0.6rem; text-transform: uppercase; }
.ev-exp-body { font-size: 0.85rem; color: var(--ev-muted); line-height: 1.7; }
.ev-exp-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.ev-exp-tag { font-family: var(--ev-mono); font-size: 0.6rem; padding: 0.2rem 0.6rem; background: var(--ev-bg3); border: 1px solid var(--ev-border); color: var(--ev-dim); letter-spacing: 0.05em; }

/* projects */
.ev-project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ev-project-card { display: block; width: 100%; background: var(--ev-bg2); border: 1px solid var(--ev-border); padding: 1.5rem; position: relative; overflow: hidden; transition: border-color .2s; }
.ev-project-card::before { content: ''; position: absolute; top: 0; left: 0; width: 2px; height: 0; background: var(--ev-accent); transition: height .3s ease; }
.ev-project-card:hover { border-color: var(--ev-border-mid); }
.ev-project-card:hover::before { height: 100%; }
.ev-project-type { font-family: var(--ev-mono); font-size: 0.58rem; color: var(--ev-accent); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.6rem; }
.ev-project-title { font-family: var(--ev-serif); font-size: 1.15rem; font-weight: 400; margin-bottom: 0.5rem; line-height: 1.2; }
.ev-project-desc { font-size: 0.8rem; color: var(--ev-muted); line-height: 1.7; }
.ev-project-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--ev-border); gap: 0.5rem; flex-wrap: wrap; }
.ev-project-link { font-family: var(--ev-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ev-accent); }
.ev-project-gh { font-family: var(--ev-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ev-muted); transition: color .2s; }
.ev-project-gh:hover { color: var(--ev-accent); }

/* stack */
.ev-stack-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ev-stack-pill { font-family: var(--ev-mono); font-size: 0.65rem; padding: 0.35rem 0.8rem; border: 1px solid var(--ev-border); color: var(--ev-muted); letter-spacing: 0.05em; transition: all .2s; cursor: default; }
.ev-stack-pill:hover { border-color: var(--ev-accent); color: var(--ev-accent); background: var(--ev-accent-dim); }
.ev-stack-pill.featured { border-color: rgba(201,169,110,0.4); color: var(--ev-accent); background: var(--ev-accent-dim); }

/* contact */
.ev-contact-block { background: var(--ev-bg2); border: 1px solid var(--ev-border); padding: 3rem; text-align: center; position: relative; overflow: hidden; }
.ev-contact-block::after { content: 'HIRE'; position: absolute; bottom: -1.5rem; right: 1rem; font-family: var(--ev-serif); font-size: 8rem; font-weight: 600; color: rgba(201,169,110,0.04); line-height: 1; pointer-events: none; user-select: none; }
.ev-contact-heading { font-family: var(--ev-serif); font-size: 2.5rem; font-weight: 300; font-style: italic; margin-bottom: 0.75rem; color: var(--ev-text); }
.ev-contact-sub { font-size: 0.85rem; color: var(--ev-muted); margin-bottom: 2rem; max-width: 400px; margin: 0 auto 2rem; }
.ev-contact-links { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.ev-contact-link { font-family: var(--ev-mono); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ev-text); text-decoration: none; padding: 0.7rem 1.5rem; border: 1px solid var(--ev-border-mid); transition: all .2s; }
.ev-contact-link:hover { background: var(--ev-accent); color: var(--ev-bg); border-color: var(--ev-accent); }
.ev-contact-link.primary { background: var(--ev-accent); color: var(--ev-bg); border-color: var(--ev-accent); }
.ev-contact-link.primary:hover { background: transparent; color: var(--ev-accent); }

/* footer */
.ev-footer { padding: 2rem 0; border-top: 1px solid var(--ev-border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.ev-foot-text { font-family: var(--ev-mono); font-size: 0.6rem; color: var(--ev-dim); letter-spacing: 0.08em; text-transform: uppercase; }

@keyframes evPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* DRAWER — pinned to viewport */
.ev-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
  z-index: 50;
}
.ev-scrim.open { opacity: 1; pointer-events: auto; }
.ev-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(560px, 100vw);
  background: #0d0d0d;
  border-left: 1px solid var(--ev-accent);
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
  z-index: 51;
  overflow-y: auto;
  box-shadow: -32px 0 64px rgba(0,0,0,0.5);
}
.ev-drawer.open { transform: translateX(0); }
.ev-drawer::before {
  content: ''; position: absolute; 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='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none; opacity: 0.4;
}
.ev-drawer-body { position: relative; padding: 0 2.5rem 3rem; z-index: 1; }
.ev-drawer-header {
  position: sticky; top: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  margin: 0 -2.5rem 1.25rem;
  padding: 1.75rem 2.5rem 1rem;
  background: linear-gradient(180deg, #0d0d0d 0%, #0d0d0d 75%, rgba(13,13,13,0.85) 100%);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--ev-border);
}
.ev-drawer-kicker { font-family: var(--ev-mono); font-size: 0.6rem; letter-spacing: 0.18em; color: var(--ev-accent); text-transform: uppercase; margin-bottom: 0.5rem; }
.ev-drawer-title { font-family: var(--ev-serif); font-size: 2.4rem; font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; }
.ev-drawer-close { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--ev-mono); font-size: 0.55rem; letter-spacing: 0.18em; color: var(--ev-muted); padding: 0.5rem 0.7rem; border: 1px solid var(--ev-border-mid); transition: all .2s; flex-shrink: 0; }
.ev-drawer-close:hover { color: var(--ev-accent); border-color: var(--ev-accent); }
.ev-drawer-lede { font-family: var(--ev-serif); font-size: 1.4rem; font-style: italic; font-weight: 300; color: var(--ev-text); line-height: 1.45; margin-bottom: 1.5rem; }
.ev-drawer-p { font-size: 0.95rem; color: var(--ev-muted); line-height: 1.75; margin-bottom: 1rem; }
.ev-drawer-section { margin-top: 2rem; }
.ev-drawer-section-head { font-family: var(--ev-mono); font-size: 0.6rem; letter-spacing: 0.18em; color: var(--ev-accent); text-transform: uppercase; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--ev-border); }
.ev-drawer-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ev-drawer-pill { font-family: var(--ev-mono); font-size: 0.62rem; padding: 0.3rem 0.7rem; background: var(--ev-bg3); border: 1px solid var(--ev-border); color: var(--ev-text); letter-spacing: 0.05em; }
.ev-drawer-ul { list-style: none; padding: 0; margin: 0; }
.ev-drawer-ul li { position: relative; padding: 0.4rem 0 0.4rem 1.25rem; color: var(--ev-text); font-size: 0.9rem; line-height: 1.55; border-bottom: 1px dashed var(--ev-border); }
.ev-drawer-ul li:last-child { border-bottom: none; }
.ev-drawer-ul li::before { content: '→'; position: absolute; left: 0; color: var(--ev-accent); }
.ev-drawer-proof { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; }
.ev-proof-cell { padding: 1rem 0.75rem; background: var(--ev-bg2); border: 1px solid var(--ev-border); text-align: center; }
.ev-proof-val { font-family: var(--ev-serif); font-size: 1.6rem; font-weight: 400; color: var(--ev-accent); line-height: 1; }
.ev-proof-label { font-family: var(--ev-mono); font-size: 0.55rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ev-dim); margin-top: 0.5rem; }
.ev-drawer-cta { display: inline-flex; align-items: center; gap: 0.75rem; margin-top: 2rem; padding: 0.9rem 1.4rem; background: var(--ev-accent); color: var(--ev-bg); font-family: var(--ev-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; font-weight: 500; transition: transform .2s; }
.ev-drawer-cta:hover { transform: translateX(4px); }

.ev-drawer-gallery { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2rem; }
.ev-drawer-figure { margin: 0; }
.ev-drawer-figure-frame {
  background: var(--ev-bg3);
  border: 1px solid var(--ev-border);
  overflow: hidden;
  position: relative;
}
.ev-drawer-figure-frame img {
  width: 100%; height: auto; display: block;
  filter: saturate(0.92);
  transition: filter .3s ease;
}
.ev-drawer-figure-frame:hover img { filter: saturate(1); }
.ev-drawer-figure figcaption {
  font-family: var(--ev-mono);
  font-size: 0.62rem;
  color: var(--ev-dim);
  letter-spacing: 0.06em;
  line-height: 1.6;
  margin-top: 0.5rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--ev-accent);
}

/* mobile */
@media (max-width: 640px) {
  .ev-container { padding: 0 1.25rem; }
  .ev-nav { margin-bottom: 3rem; }
  .ev-nav-links { gap: 1.2rem; }
  .ev-hero { margin-bottom: 4rem; }
  .ev-section { margin-bottom: 3.5rem; }
  .ev-expertise-grid { grid-template-columns: 1fr; }
  .ev-project-grid { grid-template-columns: 1fr; }
  .ev-exp-item { grid-template-columns: 1fr; gap: 0.5rem; }
  .ev-exp-dates { font-size: 0.6rem; }
  .ev-contact-block { padding: 2rem 1.25rem; }
  .ev-contact-heading { font-size: 1.8rem; }
  .ev-drawer-body { padding: 0 1.5rem 3rem; }
  .ev-drawer-header { margin: 0 -1.5rem 1.25rem; padding: 1.5rem 1.5rem 1rem; }
  .ev-drawer-title { font-size: 1.8rem; }
  .ev-drawer-proof { grid-template-columns: 1fr; }
  .ev-section-hint { width: 100%; margin-left: 0; }
}
`;

window.Evolved = Evolved;
