:root {
        --bg: #13171dc9;
        --bg-raised: #12151a;
        --fg: #e0e6ec;
        --muted: #8b96a1;
        --border: #33373d;
        --accent: #d35e68; /* muted amber; used only where it means something */
        --accent-quiet: #8a4f54;
        --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
        --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
        --radius: 3px;
        --max: 1100px;
      }

      * {
        box-sizing: border-box;
      }

      html {
        color-scheme: dark;
      }

      body {
        margin: 0;
        background: var(--bg);
        color: var(--fg);
        font-family: var(--sans);
        font-size: 16px;
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
      }

      main {
        max-width: var(--max);
        margin: 0 auto;
        padding: 4.5rem 1.5rem 5rem;
      }

      a {
        color: var(--fg);
        text-decoration: underline;
        text-decoration-color: var(--border);
        text-underline-offset: 3px;
      }
      a:hover {
        color: var(--accent);
        text-decoration-color: var(--accent);
      }
      a:focus-visible,
      button:focus-visible,
      summary:focus-visible {
        outline: 1px solid var(--accent);
        outline-offset: 3px;
      }

      .muted {
        color: var(--muted);
      }
      .mono {
        font-family: var(--mono);
      }

      /* ---------- Header ---------- */
      header {
        padding-bottom: 2rem;
        margin-bottom: 3.5rem;
        border-bottom: 1px solid var(--border);
      }

      header h1 {
        font-family: var(--mono);
        font-size: 1.65rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        margin: 0 0 0.3rem;
      }

      header .role {
        font-family: var(--mono);
        font-size: 0.85rem;
        color: var(--muted);
        margin: 0;
      }

      header .role .sep {
        color: var(--border);
        margin: 0 0.4em;
      }

      .links {
        margin-top: 1.1rem;
        font-family: var(--mono);
        font-size: 0.82rem;
      }

      .links a {
        margin-right: 1.3rem;
        text-decoration: none;
        color: var(--muted);
      }

      .links a:hover {
        color: var(--accent);
      }
      .links a::before {
        content: "[";
        color: var(--border);
      }
      .links a::after {
        content: "]";
        color: var(--border);
      }

      /* ---------- Section headers: the one signature device ---------- */
      section {
        margin-bottom: 4rem;
      }

      h2 {
        font-family: var(--mono);
        font-size: 0.8rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        color: var(--muted);
        margin: 0 0 1.6rem;
        text-transform: lowercase;
      }

      h2::before {
        content: "// ";
        color: var(--accent-quiet);
      }

      .section-head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 1.6rem;
      }

      .section-head h2 {
        margin-bottom: 0;
      }

      .toggle-all {
        font-family: var(--mono);
        font-size: 0.78rem;
        color: var(--muted);
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        text-decoration: underline;
        text-decoration-color: var(--border);
        text-underline-offset: 3px;
      }

      .toggle-all:hover {
        color: var(--accent);
        text-decoration-color: var(--accent);
      }

      /* ---------- Cards: project / experience blocks ---------- */
      details,
      .experience {
        background: var(--bg-raised);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 1.3rem 1.5rem;
        margin-bottom: 1rem;
        transition: border-color 0.15s ease;
      }

      details:hover,
      .experience:hover {
        border-color: var(--accent-quiet);
      }

      summary {
        cursor: pointer;
        list-style: none;
        display: flex;
        align-items: center;
        gap: 0.9rem;
      }

      summary::-webkit-details-marker {
        display: none;
      }

      summary::before {
        content: "▸";
        color: var(--muted);
        font-size: 0.75rem;
        flex-shrink: 0;
        transition: transform 0.15s ease;
      }

      details[open] summary::before {
        transform: rotate(90deg);
        color: var(--accent);
      }

      .project-summary img {
        width: 300px;
        /*height: 500px;*/

        object-fit: contain;
        border-radius: 4px;
        flex-shrink: 0;
      }

      .project-summary span {
        font-weight: 600;
        font-size: 1rem;
      }

      .project-meta {
        margin: 0.5rem 0 0 2.6rem;
        font-family: var(--mono);
        font-size: 0.78rem;
        color: var(--muted);
      }

      .section {
        margin-top: 1.4rem;
        padding-left: 2.6rem;
      }

      .section h4 {
        font-family: var(--mono);
        font-size: 0.7rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
        margin: 0 0 0.5rem;
      }

      .section p,
      .section ul {
        max-width: 62ch;
      }
      .section p {
        margin: 0;
      }

      ul {
        padding-left: 1.1rem;
        margin: 0;
      }
      li {
        margin-bottom: 0.45rem;
      }
      li:last-child {
        margin-bottom: 0;
      }

      pre {
        background: #0d1117;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 1rem 1.1rem;
        font-size: 0.8rem;
        overflow-x: auto;
      }

      code {
        font-family: var(--mono);
      }

      .project-preview,
      .svg-diagram img {
        display: block;
        max-width: 100%;
        height: auto;
        border-radius: var(--radius);
        border: 1px solid var(--border);
      }

      .section img[width="300"] {
        display: none;
      } /* redundant with summary thumbnail */

      /* ---------- Status: color encodes state, not decoration ---------- */
      .status {
        font-family: var(--mono);
        font-size: 0.75rem;
      }

      .status::before {
        content: "[";
        color: var(--border);
      }
      .status::after {
        content: "]";
        color: var(--border);
      }

      .status.active {
        color: var(--accent);
      }
      .status.complete {
        color: var(--muted);
      }

      .section p a {
        font-family: var(--mono);
        font-size: 0.8rem;
      }

      /* ---------- Skills ---------- */
      h3 {
        font-family: var(--mono);
        font-size: 0.78rem;
        color: var(--accent-quiet);
        text-transform: lowercase;
        letter-spacing: 0.02em;
        margin: 1.6rem 0 0.6rem;
      }

      section > h3:first-of-type {
        margin-top: 0;
      }

      /* ---------- Tech marks ---------- */
      .stack-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 1.4rem;
        padding-top: 0.5rem;
        justify-content: space-between;
      }

      .stack-grid i {
        font-size: 1.6rem;
        color: var(--muted);
        transition: color 0.15s ease;
      }

      .stack-grid i:hover {
        filter: opacity(70%);
      }

      /* ---------- Experience ---------- */
      .experience h4 {
        font-family: var(--sans);
        font-size: 1rem;
        font-weight: 600;
        color: var(--fg);
        text-transform: none;
        letter-spacing: 0;
        margin: 0 0 0.2rem;
      }

      .experience-meta {
        font-family: var(--mono);
        font-size: 0.78rem;
        color: var(--muted);
        margin: 0 0 1rem;
      }

      .experience ul {
        max-width: 100ch;
      }
      .experience strong {
        color: var(--accent);
        font-weight: 500;
      }

      /* ---------- Footer ---------- */
      footer {
        margin-top: 4rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--border);
        font-family: var(--mono);
        font-size: 0.78rem;
        color: var(--muted);
      }

      footer a {
        color: var(--muted);
      }
      footer a:hover {
        color: var(--accent);
      }

      @media print {
        body {
          background: white;
          color: black;
        }
        details,
        .experience {
          border: 1px solid #ccc;
          background: white;
        }
      }

      .hotkey {
        color: #5e89d3;
        text-decoration: underline;
      }

      .links > a:hover {
        text-transform: uppercase;
      }
      ::selection {
        color: var(--accent);
        background-color: #415d8e;
      }