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

    body {
      font-family: 'DM Sans', sans-serif;
      color: #1a1a1a;
      background: #fff;
      -webkit-font-smoothing: antialiased;
    }

    .container {
      max-width: 860px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* Nav */
    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 0;
      border-bottom: 0.5px solid rgba(0,0,0,0.1);
    }
    .nav-logo {
      font-family: 'Libre Baskerville', serif;
      font-size: 17px;
      letter-spacing: 0.02em;
      font-style: italic;
      color: #1a1a1a;
      text-decoration: none;
    }
    .nav-links {
      display: flex;
      gap: 28px;
      list-style: none;
    }
    .nav-links a {
      font-size: 13px;
      font-weight: 400;
      color: #666;
      text-decoration: none;
      letter-spacing: 0.03em;
    }
    .nav-links a:hover {
      color: #1a1a1a;
    }

    /* Sections */
    .section {
      padding: 44px 0;
    }
    .section + .section {
      border-top: 0.5px solid rgba(0,0,0,0.1);
    }
    .section-label {
      font-size: 16px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #224488;
      margin-bottom: 20px;
    }
    .section-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 24px;
    }
    .section-header .section-label {
      margin-bottom: 0;
    }
    .section-link {
      font-size: 12px;
      color: #999;
      text-decoration: none;
      letter-spacing: 0.04em;
    }
    .section-link:hover {
      color: #1a1a1a;
    }

    /* Mission */
    .mission h1 {
      font-family: 'Libre Baskerville', serif;
      font-size: 32px;
      font-weight: 400;
      line-height: 1.35;
      margin: 0 0 24px;
      max-width: 620px;
    }
    .mission-body {
      font-size: 15px;
      line-height: 1.8;
      color: #666;
      max-width: 580px;
    }

    /* Projects */
    .projects-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 16px;
    }
    .project-card {
      background: #fff;
      border: 0.5px solid rgba(0,0,0,0.1);
      border-radius: 12px;
      padding: 20px 20px 16px;
      text-decoration: none;
      color: inherit;
      display: block;
      transition: border-color 0.15s;
    }
    .project-card:hover {
      border-color: rgba(0,0,0,0.3);
    }
    .project-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .tag {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      background: #f5f5f3;
      color: #999;
      border-radius: 4px;
      padding: 3px 8px;
    }
    .ext-icon {
      color: #999;
      font-size: 14px;
    }
    .project-card h3 {
      font-size: 16px;
      font-weight: 500;
      margin: 0 0 6px;
      line-height: 1.4;
    }
    .project-card p {
      font-size: 13px;
      color: #666;
      margin: 0;
      line-height: 1.6;
    }

    /* Writings */
    .writings-list {
      display: flex;
      flex-direction: column;
    }
    .writing-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      padding: 14px 0;
      border-bottom: 0.5px solid rgba(0,0,0,0.1);
      gap: 16px;
    }
    .writing-row:last-child {
      border-bottom: none;
    }
    .writing-row a {
      font-size: 15px;
      font-weight: 400;
      color: #1a1a1a;
      text-decoration: none;
      flex: 1;
    }
    .writing-row a:hover {
      text-decoration: underline;
    }
    .writing-row span {
      font-size: 12px;
      color: #999;
      white-space: nowrap;
    }

    /* About */
    .about-content {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 40px;
      align-items: start;
    }
    .about-avatar {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: #f5f5f3;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      overflow: hidden;
    }
    .about-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .about-name {
      font-family: 'Libre Baskerville', serif;
      font-size: 18px;
      font-weight: 400;
      margin: 0 0 4px;
    }
    .about-role {
      font-size: 13px;
      color: #999;
      margin: 0;
    }
    .about-bio {
      font-size: 15px;
      line-height: 1.75;
      color: #666;
    }
    .about-bio p {
      margin: 0 0 12px;
    }
    .about-bio p:last-child {
      margin-bottom: 0;
    }
    .about-link {
      display: inline-block;
      margin-top: 16px;
      font-size: 13px;
      color: #999;
      text-decoration: none;
      letter-spacing: 0.03em;
    }
    .about-link:hover {
      color: #1a1a1a;
    }

    /* Footer */
    .footer {
      padding: 28px 0;
      border-top: 0.5px solid rgba(0,0,0,0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .footer-logo {
      font-family: 'Libre Baskerville', serif;
      font-size: 14px;
      font-style: italic;
      color: #999;
    }
    .footer-links {
      display: flex;
      gap: 20px;
    }
    .footer-links a {
      font-size: 12px;
      color: #999;
      text-decoration: none;
    }
    .footer-links a:hover {
      color: #1a1a1a;
    }

    /* Responsive */
    @media (max-width: 600px) {
      .mission h1 { font-size: 26px; }
      .about-content { grid-template-columns: 1fr; gap: 24px; }
      .nav-links { gap: 16px; }
    }

    /* Essay pages */
    .nav-back {
      font-size: 13px;
      color: #999;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 4px;
      letter-spacing: 0.03em;
    }
    .nav-back:hover { color: #1a1a1a; }
    .nav-back i { font-size: 12px; }

    .essay-body {
      padding: 48px 0 80px;
    }
    .essay-body h1, .essay-body h2 {
      font-family: 'Libre Baskerville', serif;
      font-size: 28px;
      font-weight: 400;
      line-height: 1.35;
      margin-bottom: 12px;
    }
    .essay-meta {
      font-size: 13px;
      color: #999;
      margin-bottom: 36px;
    }
    .essay-body p {
      font-size: 16px;
      line-height: 1.8;
      color: #444;
      margin-bottom: 20px;
    }
    .essay-body a {
      color: #1a1a1a;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .essay-body a:hover { color: #555; }

    .footer-minimal {
      padding: 28px 0;
      border-top: 0.5px solid rgba(0,0,0,0.1);
      display: flex;
      justify-content: center;
    }

    .essay-body h4 {
      margin-top: 32px;
    }

    /* Tables */
    table {
      border-collapse: collapse;
      width: 100%;
    }
    th, td {
      border: 1px solid #ccc;
      padding: 6px;
    }

    /* Working Problems page */
    .evergreen-intro { padding: 4px 0 32px;}
    .evergreen-intro h1 { font-family: 'Libre Baskerville', serif; font-size: 34px; font-weight: 400; line-height: 1.35; margin-bottom: 20px; }
    .evergreen-intro p { font-size: 17px; line-height: 1.75; color: #666; margin-bottom: 10px; }

    .clusters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
    .cluster { padding: 20px; border-radius: 14px; cursor: pointer; border: 1px solid transparent; transition: border-color 0.15s, opacity 0.15s; }
    .cluster[data-active="true"] { border-color: rgba(0,0,0,0.3); }
    .cluster[data-dimmed="true"] { opacity: 0.35; }
    .cluster-icon { font-size: 26px; margin-bottom: 9px; }
    .cluster-title { font-size: 15px; font-weight: 600; margin-bottom: 5px; }
    .cluster-sub { font-size: 13px; line-height: 1.5; }

    .cl-teal { background: #8EDFC0; }
    .cl-teal .cluster-icon, .cl-teal .cluster-title { color: #043D30; }
    .cl-teal .cluster-sub { color: #065A47; }
    .cl-purple { background: #C0BCFD; }
    .cl-purple .cluster-icon, .cl-purple .cluster-title { color: #2A2577; }
    .cl-purple .cluster-sub { color: #3D38A0; }
    .cl-coral { background: #F5A48B; }
    .cl-coral .cluster-icon, .cl-coral .cluster-title { color: #5C1B08; }
    .cl-coral .cluster-sub { color: #811E0A; }
    .cl-blue { background: #88C4F5; }
    .cl-blue .cluster-icon, .cl-blue .cluster-title { color: #09306A; }
    .cl-blue .cluster-sub { color: #134E96; }

    .legend { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
    .legend-item { display: flex; align-items: center; gap: 5px; font-size: 14px; color: #666; }
    .legend-icon { font-size: 16px; }
    .st-building { color: #27500A; }
    .st-designing { color: #854F0B; }
    .st-observing { color: #999; }

    .group { margin-bottom: 24px; }
    .group-label { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #999; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 0.5px solid rgba(0,0,0,0.1); }

    .card { background: #fff; border: 1px solid rgba(0,0,0,0.13); border-radius: 14px; padding: 18px 22px; margin-bottom: 10px; }
    .card-header { display: flex; align-items: center; gap: 12px; cursor: pointer; }
    .card-status { font-size: 21px; flex-shrink: 0; }
    .card-mid { flex: 1; min-width: 0; }
    .card-title { font-size: 17px; font-weight: 600; }
    .card-project { font-size: 14px; color: #27500A; text-decoration: none; margin-left: 7px; }
    .card-project:hover { text-decoration: underline; }
    .tags { display: flex; gap: 5px; flex-shrink: 0; }
    .tags .tag { font-size: 12px; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 5px; font-weight: 400; text-transform: none; background: none; }
    .tag-biz { background: #C0DDF8; color: #09306A; }
    .tag-civ { background: #C8EDDB; color: #043D30; }
    .chevron { color: #999; font-size: 16px; transition: transform 0.2s; flex-shrink: 0; }
    .card[data-open="true"] .chevron { transform: rotate(180deg); }
    .card-body { font-size: 16px; line-height: 1.75; color: #555; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, margin-top 0.3s ease; padding-left: 33px; margin-top: 0; }
    .card[data-open="true"] .card-body { max-height: 500px; margin-top: 12px; }

    @media (max-width: 700px) {
      .clusters { grid-template-columns: repeat(2, 1fr); }
      .evergreen-intro h1 { font-size: 28px; }
    }
    @media (max-width: 900px) {
      .sidebar-main { padding: 0 24px; }
    }

    /* Sidebar layout (desktop) */
    .sidebar-layout {
      display: grid;
      grid-template-columns: minmax(0, 860px) 340px;
      gap: 48px;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .sidebar-full-row {
      grid-column: 1 / -1;
    }
    .sidebar-column {
      position: relative;
    }
    .sidebar {
      display: none;
      position: absolute;
      width: 100%;
      border: 1px solid rgba(0,0,0,0.15);
      border-radius: 10px;
      padding: 20px 22px;
      font-size: 13px;
      line-height: 1.7;
      color: #444;
      background: #fff;
      max-height: calc(100vh - 32px);
      overflow-y: auto;
      box-sizing: border-box;
    }
    .sidebar.sidebar-visible {
      display: block;
      animation: sidebar-fadein 0.3s ease;
    }
    @keyframes sidebar-fadein {
      from { opacity: 0; transform: translateX(8px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    .sidebar h2 {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-family: 'Libre Baskerville', serif;
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 12px;
      color: #1a1a1a;
    }
    .sidebar p { margin-bottom: 10px; }
    .sidebar p:last-child { margin-bottom: 0; }
    .sidebar a { color: #224488; }
    .sidebar-close {
      font-size: 20px;
      color: #bbb;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
      margin-left: 8px;
      line-height: 1;
      flex-shrink: 0;
    }
    .sidebar-close:hover { color: #555; }
    .sidebar-trigger {
      white-space: nowrap;
      text-decoration-style: dotted;
      text-underline-offset: 3px;
    }
    .sidebar-trigger::after {
      content: '';
      display: inline-block;
      width: 11px;
      height: 9px;
      margin-left: 5px;
      border: 1.5px solid currentColor;
      border-left-width: 3.5px;
      border-radius: 2px;
      opacity: 0.45;
      vertical-align: middle;
      position: relative;
      top: -1px;
    }
    .sidebar-trigger:hover::after { opacity: 0.85; }

    /* Sidebar as popup (below 900px) */
    @media (max-width: 900px) {
      .sidebar-layout { display: block; padding: 0; }
      .sidebar {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 200;
        overflow-y: auto;
        border-radius: 0;
        border: none;
        border-top: 2px solid rgba(0,0,0,0.12);
        background: #fff;
        padding: 24px 20px 48px;
        animation: none;
      }
      .sidebar.sidebar-open {
        display: block;
        animation: sidebar-slidein 0.28s ease;
      }
      @keyframes sidebar-slidein {
        from { transform: translateY(20px); opacity: 0; }
        to   { transform: translateY(0); opacity: 1; }
      }
    }

    /* civilly-notes: popup */
    .civilly-popup {
      position: absolute;
      z-index: 9999;
      max-width: 320px;
      background: #fff;
      border: 0.5px solid rgba(0,0,0,0.15);
      border-radius: 10px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.12);
      padding: 14px 16px;
      font-size: 14px;
      line-height: 1.55;
      display: none;
      color: #1a1a1a;
    }
    .civilly-popup-label {
      display: block;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #999;
      margin-bottom: 6px;
    }
    .civilly-popup-cite {
      display: block;
      color: #333;
      margin-bottom: 8px;
    }
    .civilly-popup-status {
      display: block;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #999;
      margin-bottom: 4px;
    }
    .civilly-popup-body {
      display: block;
      font-size: 13px;
      color: #555;
      line-height: 1.6;
    }
    .civilly-popup-link {
      display: block;
      font-size: 13px;
      color: #224488;
      text-decoration: none;
      margin-top: 8px;
    }
    .civilly-popup-link:hover { text-decoration: underline; }
    .civilly-popup-warn {
      display: block;
      font-size: 12px;
      color: #b05c00;
      margin-top: 6px;
    }

    /* civilly-notes: endnote refs */
    .endnote-ref {
      cursor: pointer;
      color: #224488;
    }
    .civilly-ref-list {
      margin: 16px 0 0 20px;
      font-size: 14px;
      line-height: 1.7;
      color: #555;
    }
    .civilly-ref-list li { margin-bottom: 8px; }
    .civilly-ref-back {
      color: #999;
      text-decoration: none;
      margin-right: 6px;
      font-size: 12px;
    }
    .civilly-ref-back:hover { color: #1a1a1a; }
    .civilly-ref-url {
      color: #224488;
      word-break: break-all;
      font-size: 12px;
    }
    .civilly-ref-unverified {
      font-size: 11px;
      color: #b05c00;
      margin-left: 4px;
    }

    /* civilly-notes: sidenotes */
    .sidenote {
      border-left: 2px solid rgba(0,0,0,0.1);
      padding: 8px 0 8px 14px;
      margin: 20px 0;
    }
    .sidenote > summary {
      cursor: pointer;
      font-size: 14px;
      color: #666;
      list-style: none;
      user-select: none;
    }
    .sidenote > summary::-webkit-details-marker { display: none; }
    .sidenote > summary:hover { color: #1a1a1a; }
    .sidenote-body {
      font-size: 14px;
      color: #555;
      line-height: 1.7;
      margin-top: 8px;
    }

    /* civilly-notes: glossary tags */
    .challenge-tag {
      cursor: pointer;
      color: #224488;
      text-decoration: underline;
      text-underline-offset: 2px;
      text-decoration-style: dotted;
      border-radius: 2px;
    }
    .challenge-tag:hover { background: #f0f4ff; }