:root {
      --paper: #F7F6F0;
      --grid: #E7E4DA;
      --ink: #171817;
      --ink-soft: #3F4240;
      --muted: #74766F;
      --copper: #9B4A35;
      --copper-deep: #663024;
      --copper-soft: #E7DCD3;
      --note-bg: #EFEDE6;
      --rule: #D2D0C5;
      --signal: #46524D;
      --blue: #566268;
      --surface: #FFFFFF;
      --max: 1080px;
      --prose: 64ch;
      --ease-out: cubic-bezier(.22, 1, .36, 1);
      --ease-smooth: cubic-bezier(.4, 0, .2, 1);
      --shadow-soft: 0 18px 48px rgba(23, 24, 23, .08);
      --shadow-hover: 0 24px 56px rgba(23, 24, 23, .12);
    }

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

    html {
      scroll-behavior: smooth
    }

    @media (prefers-reduced-motion:reduce) {
      html {
        scroll-behavior: auto
      }
    }

    /* ---------- cross-page view transitions ---------- */
    /* Smooth same-origin navigation between the home page and case studies.
       No-ops in browsers without the API — navigation just stays instant. */
    @view-transition {
      navigation: auto;
    }

    ::view-transition-group(root) {
      animation-duration: .58s;
      animation-timing-function: var(--ease-out);
    }

    ::view-transition-old(root) {
      animation: vt-out .28s var(--ease-smooth) both;
    }

    ::view-transition-new(root) {
      animation: vt-in .58s var(--ease-out) both;
    }

    @keyframes vt-out {
      to { opacity: 0; transform: scale(.995); }
    }

    @keyframes vt-in {
      from { opacity: 0; transform: translateY(8px) scale(.995); }
    }

    @keyframes vt-fade-out {
      to { opacity: 0; }
    }

    @keyframes vt-fade-in {
      from { opacity: 0; }
    }

    /* The top bar is identical on every page — let it hold still while the
       content underneath transitions, so the site feels app-like. */
    nav {
      view-transition-name: site-nav;
    }

    @media (prefers-reduced-motion: reduce) {
      ::view-transition-old(root) {
        animation: vt-fade-out .16s linear both;
      }
      ::view-transition-new(root) {
        animation: vt-fade-in .16s linear both;
      }
    }

    body {
      background: var(--paper);
      color: var(--ink);
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: 17px;
      line-height: 1.65;
    }

    .wrap {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 24px
    }

    a {
      color: var(--ink);
      text-decoration: none;
      border-bottom: 1px solid var(--copper);
      transition: color .15s, border-color .15s
    }

    a:hover {
      color: var(--copper)
    }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible {
      outline: 2px solid var(--copper);
      outline-offset: 3px;
      border-radius: 1px
    }

    .mono {
      font-family: 'IBM Plex Mono', monospace
    }

    ::selection {
      background: var(--copper);
      color: var(--paper)
    }

    /* ---------- nav ---------- */
    nav {
      border-bottom: 1px solid var(--rule);
      background: rgba(246,246,241,.94);
      backdrop-filter: blur(12px);
      position: sticky;
      top: 0;
      z-index: 50;
    }

    nav .wrap {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding-top: 18px;
      padding-bottom: 14px;
      gap: 16px;
      flex-wrap: wrap
    }

    nav .brand {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 13px;
      letter-spacing: .04em;
      border: none
    }

    nav .brand b {
      font-weight: 500
    }

    nav .brand .pulse-dot {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--copper);
      margin-right: 8px;
      animation: pulse-dot 2.4s ease-in-out infinite;
      vertical-align: middle;
    }

    @keyframes pulse-dot {

      0%,
      100% {
        opacity: .35;
        transform: scale(.85)
      }

      50% {
        opacity: 1;
        transform: scale(1.15)
      }
    }

    nav ul {
      display: flex;
      gap: 22px;
      list-style: none;
      flex-wrap: wrap
    }

    nav ul a {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      color: var(--ink-soft);
      border-bottom: 1px solid transparent
    }

    nav ul a:hover {
      color: var(--copper);
      border-color: var(--copper)
    }

    nav ul a.nav-cta {
      color: var(--ink);
      font-weight: 500;
      border: 1px solid var(--ink);
      padding: 4px 9px;
    }

    nav ul a.nav-cta:hover {
      background: var(--ink);
      color: var(--paper);
      border-color: var(--ink);
    }

    /* ---------- hero ---------- */
    .hero {
      padding: 64px 0 48px
    }

    .eyebrow {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      letter-spacing: .1em;
      color: var(--copper);
      text-transform: lowercase;
      margin-bottom: 14px
    }

    .hero h1 {
      font-family: 'Archivo', sans-serif;
      font-weight: 700;
      font-size: 2.6rem;
      line-height: 1.12;
      letter-spacing: -.02em;
      max-width: 19ch;
      margin-bottom: 20px;
    }

    .hero .lead {
      font-size: 1.06rem;
      color: var(--ink-soft);
      max-width: 60ch;
      margin-bottom: 36px
    }

    .figure {
      border: 1px solid var(--ink);
      background: var(--paper)
    }

    .figure canvas {
      display: block;
      width: 100%;
      height: 240px
    }

    .fig-controls {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      border-top: 1px solid var(--rule);
      padding: 10px 14px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      color: var(--ink-soft);
    }

    .fig-controls input[type=range] {
      flex: 1;
      min-width: 120px;
      max-width: 260px;
      accent-color: var(--copper)
    }

    .fig-controls .preset {
      font-family: inherit;
      font-size: 11px;
      background: none;
      border: 1px solid var(--rule);
      color: var(--ink-soft);
      padding: 3px 9px;
      cursor: pointer;
      transition: border-color .15s, color .15s;
    }

    .fig-controls .preset:hover {
      border-color: var(--copper);
      color: var(--copper)
    }

    .fig-controls .readout {
      margin-left: auto;
      color: var(--ink)
    }

    .fig-controls .readout b {
      color: var(--copper);
      font-weight: 500
    }

    .fig-caption {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11.5px;
      color: var(--muted);
      padding: 10px 2px 0;
      line-height: 1.6
    }

    /* ---------- sections ---------- */
    section {
      padding: 56px 0;
      border-top: 1px solid var(--ink)
    }

    .sec-eyebrow {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      letter-spacing: .1em;
      color: var(--copper);
      margin-bottom: 10px
    }

    h2 {
      font-family: 'Archivo', sans-serif;
      font-weight: 700;
      font-size: 2.05rem;
      letter-spacing: 0;
      line-height: 1.15;
      margin-bottom: 8px
    }

    .meta {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 22px
    }

    .meta a {
      color: var(--copper-deep);
      border-color: var(--copper)
    }

    .cols {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
      gap: 48px;
      align-items: start
    }

    .prose p {
      max-width: var(--prose);
      margin-bottom: 1em;
      color: var(--ink-soft)
    }

    .prose p strong {
      color: var(--ink);
      font-weight: 600
    }

    .prose code {
      font-family: 'IBM Plex Mono', monospace;
      font-size: .85em;
      background: var(--note-bg);
      padding: 1px 5px;
      border: 1px solid var(--rule)
    }

    .fieldnote {
      border-left: 3px solid var(--copper);
      background: var(--note-bg);
      padding: 14px 18px;
      max-width: var(--prose);
      margin-top: 6px
    }

    .fieldnote .fn-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10.5px;
      letter-spacing: .12em;
      color: var(--copper);
      margin-bottom: 6px
    }

    .fieldnote p {
      font-style: italic;
      font-size: .95rem;
      color: var(--ink-soft);
      line-height: 1.6;
      margin: 0
    }

    figure.diagram {
      border: 1px solid var(--rule);
      background: var(--paper);
      padding: 18px 14px 8px
    }

    figure.diagram svg {
      width: 100%;
      height: auto;
      display: block
    }

    figure.diagram figcaption {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      padding: 10px 4px 6px;
      border-top: 1px solid var(--rule);
      margin-top: 12px
    }

    .stats {
      display: flex;
      gap: 0;
      flex-wrap: wrap;
      border: 1px solid var(--rule);
      margin-top: 26px;
      max-width: 680px
    }

    .stats div {
      flex: 1;
      min-width: 140px;
      padding: 14px 18px;
      border-right: 1px solid var(--rule)
    }

    .stats div:last-child {
      border-right: none
    }

    .stats .n {
      font-family: 'Archivo', sans-serif;
      font-weight: 700;
      font-size: 1.4rem;
      color: var(--ink)
    }

    .stats .l {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      margin-top: 2px
    }

    /* ---------- terminal-style result card ---------- */
    .terminal {
      border: 1px solid var(--ink);
      background: var(--paper);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      max-width: var(--prose);
      margin-top: 18px;
    }

    .terminal .term-bar {
      border-bottom: 1px solid var(--rule);
      padding: 7px 12px;
      display: flex;
      gap: 8px;
      align-items: center;
      color: var(--muted);
      font-size: 10.5px;
      letter-spacing: .12em;
    }

    .terminal .term-bar .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--copper);
    }

    .terminal pre {
      padding: 14px 16px;
      line-height: 1.65;
      color: var(--ink-soft);
      white-space: pre-wrap;
      word-break: break-word;
    }

    .terminal pre b {
      color: var(--copper-deep);
      font-weight: 500;
    }

    .terminal pre i {
      color: var(--muted);
      font-style: normal;
    }

    /* ---------- about ---------- */
    .about-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr);
      gap: 56px;
      align-items: start
    }

    .facts {
      border: 1px solid var(--ink);
      padding: 18px 20px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px
    }

    .facts dt {
      color: var(--muted);
      font-size: 10.5px;
      letter-spacing: .1em;
      margin-top: 14px
    }

    .facts dt:first-child {
      margin-top: 0
    }

    .facts dd {
      color: var(--ink);
      margin-top: 2px;
      line-height: 1.55
    }

    .facts a {
      border-bottom-color: var(--copper)
    }

    /* ---------- pillars (Nover ownership) ---------- */
    .pillars {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 0;
      border: 1px solid var(--rule);
      margin-top: 24px;
    }

    .pillars > div {
      padding: 22px 24px;
      border-right: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      position: relative;
    }

    .pillars > div::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 3px;
      width: 32px;
      background: var(--copper);
    }

    .pillars h3 {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: .14em;
      color: var(--copper);
      font-weight: 500;
      margin-bottom: 8px;
      text-transform: uppercase;
    }

    .pillars h4 {
      font-family: 'Archivo', sans-serif;
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--ink);
      margin-bottom: 10px;
      line-height: 1.25;
    }

    .pillars p {
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: .95rem;
      color: var(--ink-soft);
      line-height: 1.6;
    }

    /* ---------- scope grid (Nover OWNED / CONTRIBUTED / PRIVATE) ---------- */
    .scope-grid {
      border: 1px solid var(--rule);
      margin-top: 22px;
      max-width: 820px;
    }

    .scope-grid-title {
      padding: 10px 18px;
      border-bottom: 1px solid var(--rule);
      margin: 0;
    }

    .scope-grid-cells {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }

    .scope-grid-cells > div {
      padding: 16px 20px;
      border-right: 1px solid var(--rule);
    }

    .scope-grid-cells > div:last-child {
      border-right: 0;
    }

    .scope-grid-cells .fn-label {
      margin-bottom: 8px;
    }

    .scope-grid-cells p:not(.fn-label) {
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: .92rem;
      color: var(--ink-soft);
      line-height: 1.55;
      margin: 0;
    }

    @media (max-width: 720px) {
      .scope-grid-cells {
        grid-template-columns: 1fr;
      }
      .scope-grid-cells > div {
        border-right: 0;
        border-bottom: 1px solid var(--rule);
      }
      .scope-grid-cells > div:last-child {
        border-bottom: 0;
      }
    }

    /* ---------- more / list ---------- */
    .worklist {
      list-style: none;
      max-width: 820px
    }

    .worklist li {
      display: flex;
      gap: 18px;
      align-items: baseline;
      padding: 14px 0;
      border-bottom: 1px solid var(--rule);
      flex-wrap: wrap
    }

    .worklist .wl-name {
      font-family: 'Archivo', sans-serif;
      font-weight: 600;
      font-size: 1rem;
      min-width: 230px
    }

    .worklist .wl-icon {
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: none;
      border: 1px solid var(--rule);
      background: var(--surface);
      color: var(--copper);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      line-height: 1;
    }

    .worklist .wl-desc {
      flex: 1;
      min-width: 240px;
      font-size: .92rem;
      color: var(--ink-soft)
    }

    .worklist .wl-meta {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      white-space: nowrap
    }

    /* ---------- toolbox ---------- */
    .toolbox {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 0;
      border: 1px solid var(--rule)
    }

    .toolbox div {
      padding: 18px 22px;
      border-right: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule)
    }

    .toolbox h3 {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: .12em;
      color: var(--copper);
      font-weight: 500;
      margin-bottom: 10px
    }

    .toolbox p {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12.5px;
      color: var(--ink-soft);
      line-height: 1.9
    }

    /* ---------- contact / footer ---------- */
    .contact .big {
      font-family: 'Archivo', sans-serif;
      font-weight: 800;
      font-size: 2.45rem;
      letter-spacing: 0;
      line-height: 1.15;
      max-width: 24ch;
      margin-bottom: 20px
    }

    .contact .big a {
      border-bottom: 3px solid var(--copper)
    }

    .contact-links {
      display: flex;
      gap: 26px;
      flex-wrap: wrap;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 13px
    }

    footer {
      border-top: 1px solid var(--ink);
      padding: 26px 0 40px
    }

    footer .wrap {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      line-height: 1.7
    }

    /* ---------- reveal ---------- */
    .reveal {
      opacity: 1;
      transform: none;
    }

    .reveal > .wrap > * {
      opacity: 0;
      transform: translateY(18px);
      transition:
        opacity .72s var(--ease-out),
        transform .72s var(--ease-out);
    }

    .reveal > .wrap > :nth-child(2) { transition-delay: .07s; }
    .reveal > .wrap > :nth-child(3) { transition-delay: .14s; }
    .reveal > .wrap > :nth-child(4) { transition-delay: .21s; }

    .reveal.vis > .wrap > * {
      opacity: 1;
      transform: none
    }

    @media (prefers-reduced-motion:reduce) {
      .reveal > .wrap > * {
        opacity: 1;
        transform: none;
        transition: none
      }
    }

    /* ---------- SVG diagram animations ---------- */
    .flow {
      stroke-dasharray: 6 4;
      animation: dashflow 1.4s linear infinite;
    }

    .flow-slow {
      stroke-dasharray: 5 3;
      animation: dashflow 2.6s linear infinite;
    }

    @keyframes dashflow {
      to {
        stroke-dashoffset: -20
      }
    }

    .node-pulse {
      transform-origin: center;
      transform-box: fill-box;
      animation: nodepulse 2.6s ease-in-out infinite;
    }

    @keyframes nodepulse {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .55
      }
    }

    @media (prefers-reduced-motion:reduce) {

      .flow,
      .flow-slow,
      .node-pulse {
        animation: none
      }
    }

    /* ---------- interactive diagrams ---------- */
    /* let hovers pass through labels to the node rects beneath them */
    figure.diagram svg text {
      pointer-events: none;
    }

    figure.diagram svg [data-node] {
      cursor: pointer;
      transition: stroke .16s ease, stroke-width .16s ease, filter .16s ease;
    }

    figure.diagram svg [data-node]:hover,
    figure.diagram svg [data-node].lit,
    figure.diagram svg [data-node]:focus-visible {
      stroke: var(--copper);
      stroke-width: 2.2px;
    }

    figure.diagram svg [data-node]:hover,
    figure.diagram svg [data-node]:focus-visible {
      filter: drop-shadow(0 2px 5px rgba(122, 63, 20, .35));
    }

    figure.diagram svg [data-node]:focus {
      outline: none;
    }

    figure.diagram svg [data-edge] {
      transition: stroke .16s ease, stroke-width .16s ease, opacity .16s ease;
    }

    figure.diagram.dg-active svg [data-edge]:not(.lit) {
      opacity: .18;
    }

    figure.diagram svg [data-edge].lit {
      stroke: var(--copper);
      stroke-width: 2px;
      opacity: 1;
    }

    .dg-hint {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      color: var(--muted);
      margin: 8px 4px 0;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .dg-hint::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--copper);
      flex: none;
    }

    /* inline glossary terms — hover / focus reveals a definition tooltip */
    .tip {
      border-bottom: 1px dashed var(--copper);
      cursor: help;
      text-underline-offset: 2px;
      transition: color .15s ease, border-color .15s ease;
    }

    .tip:hover,
    .tip:focus-visible {
      color: var(--copper);
      border-bottom-style: solid;
      outline: none;
    }

    .dg-tip {
      position: fixed;
      z-index: 60;
      max-width: 264px;
      padding: 8px 11px;
      font: 500 11.5px/1.55 'IBM Plex Mono', monospace;
      color: #FAFAF7;
      background: #16181D;
      border: 1px solid #45443E;
      border-radius: 5px;
      pointer-events: none;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity .12s ease, transform .12s ease;
      box-shadow: 0 8px 28px rgba(0, 0, 0, .32);
    }

    .dg-tip.show {
      opacity: 1;
      transform: none;
    }

    .dg-tip b {
      display: block;
      margin-bottom: 3px;
      color: #E7935B;
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      font-size: 10px;
    }

    @media (prefers-reduced-motion:reduce) {

      figure.diagram svg [data-node],
      figure.diagram svg [data-edge],
      .dg-tip {
        transition: none
      }
    }

    /* ---------- Hopfield widget ---------- */
    .hop-figure {
      border: 1px solid var(--ink);
      background: var(--paper);
      margin-top: 22px;
    }

    .hop-figure canvas {
      display: block;
      width: 100%;
      height: 260px;
      cursor: crosshair;
      image-rendering: pixelated;
    }

    .hop-controls {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      border-top: 1px solid var(--rule);
      padding: 10px 14px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      color: var(--ink-soft);
    }

    .hop-controls .group {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .hop-controls .group + .group {
      border-left: 1px solid var(--rule);
      padding-left: 10px;
    }

    .hop-controls button {
      font-family: inherit;
      font-size: 11px;
      background: none;
      border: 1px solid var(--rule);
      color: var(--ink-soft);
      padding: 3px 9px;
      cursor: pointer;
      transition: border-color .15s, color .15s, background .15s;
    }

    .hop-controls button:hover {
      border-color: var(--copper);
      color: var(--copper)
    }

    .hop-controls button.primary {
      background: var(--ink);
      color: var(--paper);
      border-color: var(--ink);
    }

    .hop-controls button.primary:hover {
      background: var(--copper);
      border-color: var(--copper);
      color: var(--paper);
    }

    .hop-controls .readout {
      margin-left: auto;
      color: var(--ink)
    }

    .hop-controls .readout b {
      color: var(--copper);
      font-weight: 500
    }

    /* ---------- responsive ---------- */
    @media (max-width:860px) {

      .cols,
      .about-grid {
        grid-template-columns: 1fr;
        gap: 30px
      }

      .hero {
        padding: 44px 0 36px
      }

      .hero h1 {
        font-size: 2.7rem;
      }

      h2 {
        font-size: 1.78rem;
      }

      .contact .big {
        font-size: 2rem;
      }

      section {
        padding: 44px 0
      }

      .figure canvas {
        height: 190px
      }

      .hop-figure canvas {
        height: 220px
      }
    }

    /* ---------- dark mode ---------- */
    [data-theme="dark"] {
      --paper: #171816;
      --grid: #22241F;
      --ink: #F0EFE7;
      --ink-soft: #C9C6BB;
      --muted: #8F9188;
      --copper: #D18473;
      --copper-deep: #E3AB9F;
      --copper-soft: #2A201C;
      --note-bg: #20231F;
      --rule: #343830;
      --signal: #B9C0B5;
      --blue: #A8B2B7;
      --surface: #1C1E1B;
    }

    [data-theme="dark"] nav {
      background: rgba(23,24,22,.94);
    }

    /* Cards with hardcoded-color SVGs / terminal blocks keep a paper surface
       even in dark mode so the illustrations stay legible. */
    [data-theme="dark"] figure.diagram,
    [data-theme="dark"] .terminal,
    [data-theme="dark"] .figure,
    [data-theme="dark"] .hop-figure,
    [data-theme="dark"] .qsim-wrap {
      background: #FAFAF7;
      border-color: #16181D;
    }
    [data-theme="dark"] figure.diagram { border-color: #D8D6CC }
    [data-theme="dark"] figure.diagram figcaption {
      color: #807F76;
      border-top-color: #D8D6CC;
    }
    [data-theme="dark"] .terminal .term-bar {
      color: #807F76;
      border-bottom-color: #D8D6CC;
    }
    [data-theme="dark"] .terminal pre { color: #45443E }
    [data-theme="dark"] .terminal pre b { color: #7A3F14 }
    [data-theme="dark"] .terminal pre i { color: #807F76 }
    [data-theme="dark"] .fig-controls,
    [data-theme="dark"] .hop-controls,
    [data-theme="dark"] .qsim-controls {
      border-top-color: #D8D6CC;
      color: #45443E;
    }
    [data-theme="dark"] .fig-controls .preset,
    [data-theme="dark"] .hop-controls button,
    [data-theme="dark"] .qsim-controls button {
      border-color: #D8D6CC;
      color: #45443E;
    }
    [data-theme="dark"] .fig-controls .preset:hover,
    [data-theme="dark"] .hop-controls button:hover,
    [data-theme="dark"] .qsim-controls button:hover {
      border-color: #B05E22;
      color: #B05E22;
    }
    [data-theme="dark"] .fig-controls .readout,
    [data-theme="dark"] .hop-controls .readout,
    [data-theme="dark"] .qsim-controls .qsim-stats {
      color: #16181D;
    }
    [data-theme="dark"] .fig-controls .readout b,
    [data-theme="dark"] .hop-controls .readout b,
    [data-theme="dark"] .qsim-controls .qsim-stats b {
      color: #B05E22;
    }
    [data-theme="dark"] .hop-controls .group + .group {
      border-left-color: #D8D6CC;
    }
    [data-theme="dark"] .hop-controls button.primary,
    [data-theme="dark"] .qsim-controls button.primary {
      background: #16181D;
      color: #FAFAF7;
      border-color: #16181D;
    }
    [data-theme="dark"] .facts {
      border-color: var(--ink);
    }
    [data-theme="dark"] .pillars > div {
      background: var(--note-bg);
    }
    [data-theme="dark"] nav { border-bottom-color: var(--rule) }
    [data-theme="dark"] ::selection {
      background: var(--copper);
      color: #14161B;
    }

    /* ---------- theme toggle ---------- */
    .theme-toggle {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      background: none;
      border: 1px solid var(--rule);
      color: var(--ink-soft);
      padding: 3px 9px;
      cursor: pointer;
      border-radius: 0;
      transition: color .15s, border-color .15s, background .15s;
    }
    .theme-toggle:hover {
      border-color: var(--copper);
      color: var(--copper);
    }
    .theme-toggle .tt-sun { display: none }
    [data-theme="dark"] .theme-toggle .tt-sun { display: inline }
    [data-theme="dark"] .theme-toggle .tt-moon { display: none }

    /* ---------- terminal copy button ---------- */
    .terminal { position: relative }
    .term-copy {
      position: absolute;
      top: 5px;
      right: 6px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      letter-spacing: .1em;
      background: rgba(176,94,34,0.06);
      border: 1px solid var(--rule);
      color: var(--ink-soft);
      padding: 2px 8px;
      cursor: pointer;
      transition: color .15s, border-color .15s, background .15s;
    }
    [data-theme="dark"] .term-copy {
      border-color: #D8D6CC;
      color: #45443E;
      background: rgba(176,94,34,0.08);
    }
    .term-copy:hover { border-color: var(--copper); color: var(--copper) }
    .term-copy.copied { color: var(--copper); border-color: var(--copper) }

    /* ---------- queue simulator ---------- */
    .qsim-wrap {
      border: 1px solid var(--ink);
      background: var(--paper);
      margin-top: 28px;
    }
    .qsim-wrap canvas {
      display: block;
      width: 100%;
      height: 340px;
    }
    .qsim-controls {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      border-top: 1px solid var(--rule);
      padding: 10px 14px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      color: var(--ink-soft);
    }
    .qsim-controls button {
      font-family: inherit;
      font-size: 11px;
      background: none;
      border: 1px solid var(--rule);
      color: var(--ink-soft);
      padding: 3px 9px;
      cursor: pointer;
    }
    .qsim-controls button:hover {
      border-color: var(--copper);
      color: var(--copper);
    }
    .qsim-controls button.danger {
      border-color: #B05E22;
      color: #B05E22;
    }
    .qsim-controls button.danger:hover {
      background: #B05E22;
      color: var(--paper);
    }
    .qsim-controls .qsim-stats {
      margin-left: auto;
      color: var(--ink);
      font-size: 11px;
    }
    .qsim-controls .qsim-stats b {
      color: var(--copper);
      font-weight: 500;
    }
    @media (max-width: 860px) {
      .qsim-wrap canvas { height: 380px }
      .qsim-controls .qsim-stats { margin-left: 0; width: 100% }
    }



    /* ---------- refactored homepage + case studies ---------- */
    .skip-link {
      position: absolute;
      left: 12px;
      top: -40px;
      z-index: 100;
      background: var(--ink);
      color: var(--paper);
      border: 0;
      padding: 8px 10px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
    }

    .skip-link:focus { top: 12px; }

    main { display: block; }

    .hero-actions,
    .card-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 22px;
    }

    .button-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      padding: 8px 13px;
      border: 1px solid var(--ink);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      line-height: 1.2;
      background: var(--ink);
      color: var(--paper);
      text-decoration: none;
    }

    .button-link:hover {
      color: var(--paper);
      background: var(--copper-deep);
      border-color: var(--copper-deep);
    }

    .button-link.secondary {
      background: transparent;
      color: var(--ink);
      border-color: var(--rule);
    }

    .button-link.secondary:hover {
      color: var(--copper);
      border-color: var(--copper);
    }

    .home-hero {
      padding: 52px 0 0;
      border-top: 0;
      overflow: hidden;
      background:
        linear-gradient(90deg, rgba(70,82,77,.06), transparent 44%),
        var(--paper);
    }

    .home-hero h1 {
      font-size: 3.65rem;
      line-height: 1.03;
      letter-spacing: 0;
      max-width: 17ch;
    }

    .home-hero .lead { max-width: 62ch; }

    .hero-shell {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(330px, .7fr);
      gap: 52px;
      align-items: center;
      min-height: 470px;
    }

    .hero-copy {
      padding: 36px 0 40px;
    }

    .hero-note {
      display: grid;
      gap: 8px;
      max-width: 620px;
      margin-top: 26px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      color: var(--ink-soft);
    }

    .hero-note span {
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .hero-note span::before {
      content: "";
      width: 8px;
      height: 8px;
      background: var(--copper);
      flex: none;
    }

    /* "current signal" panel — a live readout, not a bordered table.
       One copper top accent, zero internal dividers; separation is spacing,
       tone, and a leading copper marker on each row. */
    .hero-system {
      position: relative;
      min-height: 0;
      border: 1px solid var(--rule);
      border-top: 2px solid var(--copper);
      background:
        radial-gradient(130% 70% at 100% 0, rgba(155, 74, 53, .07), transparent 55%),
        var(--surface);
      box-shadow: 0 24px 60px rgba(23, 24, 23, .10);
    }

    .system-topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 15px 16px 8px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      color: var(--muted);
    }

    .system-topbar .sig {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--copper);
      letter-spacing: .02em;
    }

    /* animated equalizer glyph — the "signal" is alive */
    .sig-bars {
      display: inline-flex;
      align-items: flex-end;
      gap: 2px;
      height: 12px;
    }

    .sig-bars i {
      width: 2px;
      height: 100%;
      background: var(--copper);
      transform: scaleY(.4);
      transform-origin: bottom;
      animation: sig 1.15s ease-in-out infinite;
    }

    .sig-bars i:nth-child(1) { animation-delay: 0s }
    .sig-bars i:nth-child(2) { animation-delay: .18s }
    .sig-bars i:nth-child(3) { animation-delay: .36s }
    .sig-bars i:nth-child(4) { animation-delay: .54s }

    @keyframes sig {
      0%, 100% { transform: scaleY(.35) }
      50% { transform: scaleY(1) }
    }

    .dossier-list {
      display: grid;
      gap: 2px;
      padding: 4px 8px 6px;
    }

    /* row = [copper marker] [label + statement]; no rules, hover slides + fills */
    .dossier-list a {
      display: grid;
      grid-template-columns: 8px 1fr;
      column-gap: 11px;
      align-items: start;
      border: 0;
      padding: 12px 12px 13px;
      color: var(--ink);
      background: transparent;
      transition: background .18s ease, transform .18s ease;
    }

    .dossier-list a::before {
      content: "";
      grid-row: 1 / 3;
      width: 8px;
      height: 8px;
      margin-top: 5px;
      background: var(--copper);
      opacity: .4;
      transition: opacity .18s ease, transform .18s ease;
    }

    .dossier-list a:hover {
      background: var(--note-bg);
      color: var(--ink);
      transform: translateX(4px);
    }

    .dossier-list a:hover::before {
      opacity: 1;
      transform: scale(1.18);
    }

    .dossier-list span {
      grid-column: 2;
      display: block;
      margin-bottom: 6px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      letter-spacing: .07em;
      color: var(--copper);
      text-transform: uppercase;
    }

    .dossier-list strong {
      grid-column: 2;
      display: block;
      font-family: 'Archivo', sans-serif;
      font-size: .95rem;
      line-height: 1.4;
      font-weight: 600;
      letter-spacing: -.008em;
    }

    /* footer = tonal chips, separated from the list by space, not a rule */
    .system-stream {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 8px 14px 16px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10.5px;
    }

    .system-stream span {
      display: inline-flex;
      align-items: center;
      padding: 5px 9px;
      background: var(--note-bg);
      color: var(--muted);
      line-height: 1.3;
    }

    .system-stream b {
      color: var(--copper);
      font-weight: 500;
      margin-right: 6px;
    }

    @media (prefers-reduced-motion: reduce) {
      .sig-bars i { animation: none; transform: scaleY(.7) }
      .dossier-list a:hover { transform: none }
    }

    .proof-label {
      display: block;
      margin-bottom: 10px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10.5px;
      font-weight: 400;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--copper);
    }

    .about-panel {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(280px, .65fr);
      gap: 52px;
      align-items: start;
    }

    .about-panel .prose {
      margin-top: 18px;
    }

    .home-facts {
      background: var(--surface);
      box-shadow: 8px 8px 0 var(--copper-soft);
    }

    .systems-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border: 1px solid var(--rule);
      margin-top: 24px;
      background: var(--surface);
    }

    .systems-grid > div {
      min-height: 196px;
      padding: 22px;
      border-right: 1px solid var(--rule);
      position: relative;
    }

    .systems-grid > div:last-child {
      border-right: 0;
    }

    .system-index {
      display: inline-block;
      margin-bottom: 28px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      color: var(--copper);
    }

    .systems-grid h3 {
      font-family: 'Archivo', sans-serif;
      font-size: 1.08rem;
      line-height: 1.2;
      margin-bottom: 10px;
    }

    .systems-grid p {
      color: var(--ink-soft);
      font-size: .95rem;
      line-height: 1.55;
    }

    .systems-grid > div::after {
      content: "";
      position: absolute;
      top: 22px;
      right: 22px;
      width: 30px;
      height: 10px;
      background: var(--ink);
    }

    .systems-grid > div:nth-child(2)::after { background: var(--copper); }
    .systems-grid > div:nth-child(3)::after { background: var(--blue); }
    .systems-grid > div:nth-child(4)::after { background: var(--muted); }

    .project-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0;
      border: 1px solid var(--rule);
      margin-top: 24px;
    }

    .project-grid.compact {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .project-card {
      display: flex;
      flex-direction: column;
      min-height: 100%;
      padding: 22px;
      border: 0;
      border-right: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      color: var(--ink);
      background: var(--paper);
      transition: background .15s ease, transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    }

    .project-card:hover {
      background: var(--note-bg);
      color: var(--ink);
      transform: translateY(-2px);
      box-shadow: inset 2px 0 0 var(--copper), 0 10px 24px rgba(23, 24, 23, .06);
    }

    .project-card h3 {
      font-family: 'Archivo', sans-serif;
      font-size: 1.08rem;
      line-height: 1.2;
      margin-bottom: 8px;
      color: var(--ink);
    }

    .project-card p {
      color: var(--ink-soft);
      font-size: .95rem;
      line-height: 1.55;
      margin-bottom: 14px;
    }

    .project-card .metric {
      margin-top: auto;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      color: var(--copper-deep);
    }

    .selected-grid .project-card {
      min-height: 280px;
      padding: 30px;
    }

    .selected-grid .project-card h3 {
      font-size: 1.24rem;
    }

    .selected-grid .project-card p {
      font-size: 1rem;
      max-width: 38rem;
    }

    .selected-grid .project-card.feature {
      grid-column: 1 / -1;
      min-height: 0;
      border-top: 2px solid var(--copper);
      background: var(--note-bg);
    }

    .selected-grid .project-card.feature:hover {
      box-shadow: inset 2px 0 0 var(--copper), 0 12px 28px rgba(23, 24, 23, .08);
    }

    .card-eyebrow {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10.5px;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--copper);
      margin-bottom: 12px;
    }

    .more-list {
      max-width: 100%;
      margin-top: 18px;
    }

    .more-list li {
      align-items: flex-start;
      padding: 12px 0;
      gap: 14px;
    }

    .more-list .wl-name {
      padding-top: 4px;
      min-width: 250px;
    }

    .more-list .wl-desc {
      padding-top: 3px;
    }

    .more-list .wl-meta {
      padding-top: 6px;
      margin-left: auto;
    }

    .tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin: 8px 0 14px;
    }

    .tag {
      border: 1px solid var(--rule);
      padding: 2px 7px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10.5px;
      color: var(--ink-soft);
      background: var(--paper);
    }

    .read-more {
      margin-top: 12px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      color: var(--copper);
    }

    .case-hero {
      padding: 58px 0 36px;
      border-top: 0;
    }

    .back-link {
      display: inline-block;
      margin-bottom: 22px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      color: var(--ink-soft);
    }

    .case-hero h1 {
      font-family: 'Archivo', sans-serif;
      font-weight: 800;
      font-size: 3.2rem;
      line-height: 1.08;
      letter-spacing: 0;
      max-width: 18ch;
      margin-bottom: 14px;
    }

    .case-hero .lead { max-width: 64ch; }

    .case-meta {
      display: flex;
      gap: 10px 18px;
      flex-wrap: wrap;
      margin-top: 20px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      color: var(--muted);
    }

    .case-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 280px;
      gap: 44px;
      align-items: start;
    }

    .case-summary {
      border: 1px solid var(--ink);
      background: var(--paper);
      padding: 18px 20px;
      margin: 22px 0;
      max-width: 760px;
    }

    .logo-panel {
      border: 1px solid var(--rule);
      background: var(--surface);
      max-width: 760px;
      margin: 22px 0 0;
      overflow: hidden;
    }

    .logo-panel img {
      display: block;
      width: 100%;
      height: auto;
    }

    .logo-panel figcaption {
      border-top: 1px solid var(--rule);
      padding: 9px 14px 10px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      line-height: 1.5;
      color: var(--muted);
      background: var(--paper);
    }

    .mindcloud-logo-panel {
      max-width: 520px;
    }

    .case-nav {
      position: sticky;
      top: 86px;
      border: 1px solid var(--rule);
      padding: 14px 16px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
    }

    .case-nav a {
      display: block;
      border: 0;
      padding: 5px 0;
      color: var(--ink-soft);
    }

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

    .case-section {
      padding: 34px 0;
      border-top: 1px solid var(--rule);
    }

    .case-section h2 {
      font-size: 1.6rem;
      margin-bottom: 12px;
    }

    .case-detail {
      padding-top: 34px;
    }

    .case-detail > .wrap > .prose:first-child,
    .case-detail > .wrap > .cols:first-child {
      margin-top: 0;
    }

    .related-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      border: 1px solid var(--rule);
      margin-top: 14px;
    }

    .related-grid a {
      padding: 14px 16px;
      border: 0;
      border-right: 1px solid var(--rule);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
    }

    .related-grid a:last-child { border-right: 0; }

    @media (max-width: 920px) {
      .case-layout {
        grid-template-columns: 1fr;
      }
      .case-nav { position: static; }
      .project-grid,
      .project-grid.compact,
      .related-grid {
        grid-template-columns: 1fr 1fr;
      }

      .hero-shell,
      .about-panel {
        grid-template-columns: 1fr;
      }

      .hero-shell {
        min-height: 0;
        gap: 16px;
      }

      .hero-copy {
        padding: 26px 0 10px;
      }

      .home-hero h1 {
        font-size: 3.1rem;
        max-width: 18ch;
      }

      .hero-system {
        box-shadow: 8px 8px 0 var(--copper-soft);
      }

      .systems-grid {
        grid-template-columns: 1fr 1fr;
      }

      .systems-grid > div:nth-child(2) {
        border-right: 0;
      }

      .systems-grid > div:nth-child(-n+2) {
        border-bottom: 1px solid var(--rule);
      }
    }

    @media (max-width: 620px) {
      nav .wrap {
        align-items: flex-start;
        padding-top: 14px;
        padding-bottom: 12px;
      }

      nav ul {
        gap: 10px 14px;
      }

      nav ul a,
      .theme-toggle {
        font-size: 11px;
      }

      .home-hero {
        padding: 42px 0 22px;
      }

      .hero h1 {
        font-size: 2.45rem;
        line-height: 1.08;
        max-width: 12ch;
      }

      .selected-grid .project-card {
        min-height: 0;
        padding: 22px;
      }

      .more-list .wl-name {
        min-width: calc(100% - 48px);
      }

      .more-list .wl-desc {
        min-width: 100%;
        padding-top: 0;
      }

      .more-list .wl-meta {
        margin-left: 48px;
        padding-top: 0;
      }

      .home-hero .lead {
        font-size: 1.02rem;
        margin-bottom: 22px;
      }

      .hero-actions {
        margin-top: 16px;
      }

      .project-grid,
      .project-grid.compact,
      .related-grid {
        grid-template-columns: 1fr;
      }

      .systems-grid {
        grid-template-columns: 1fr;
      }

      .systems-grid > div {
        border-right: 0;
      }

      .systems-grid > div,
      .systems-grid > div:nth-child(-n+2) {
        border-bottom: 1px solid var(--rule);
        border-top: 0;
        grid-column: auto;
      }

      .systems-grid > div:last-child {
        border-bottom: 0;
      }

      .system-stream {
        grid-template-columns: 1fr;
      }

      .system-stream span {
        border-right: 0;
      }

      .case-hero h1 {
        font-size: 2.35rem;
      }

      .case-section h2 {
        font-size: 1.35rem;
      }
      .project-card,
      .related-grid a {
        border-right: 0;
      }
      .case-meta { display: grid; }
    }

    /* ---------- motion + surface polish ---------- */
    body {
      transition: background-color .45s var(--ease-smooth), color .45s var(--ease-smooth);
    }

    nav {
      border-bottom-color: color-mix(in srgb, var(--rule) 72%, transparent);
      transition: background-color .45s var(--ease-smooth), border-color .45s var(--ease-smooth);
    }

    nav ul a:not(.nav-cta) {
      position: relative;
      border-bottom: 0;
    }

    nav ul a:not(.nav-cta)::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -5px;
      height: 1px;
      background: var(--copper);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform .36s var(--ease-out);
    }

    nav ul a:not(.nav-cta):hover::after,
    nav ul a:not(.nav-cta):focus-visible::after {
      transform: scaleX(1);
      transform-origin: left;
    }

    section {
      position: relative;
      border-top: 0;
    }

    section::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      width: min(calc(100% - 48px), var(--max));
      height: 1px;
      transform: translateX(-50%);
      background: linear-gradient(90deg, transparent, var(--rule) 14%, var(--rule) 86%, transparent);
      opacity: .68;
    }

    .home-hero::before,
    .case-hero::before {
      display: none;
    }

    .button-link,
    .theme-toggle,
    nav ul a.nav-cta {
      border-radius: 7px;
      transition:
        color .3s var(--ease-smooth),
        border-color .3s var(--ease-smooth),
        background-color .3s var(--ease-smooth),
        transform .38s var(--ease-out),
        box-shadow .38s var(--ease-out);
    }

    .button-link:hover,
    nav ul a.nav-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(23, 24, 23, .14);
    }

    .button-link:active,
    nav ul a.nav-cta:active {
      transform: translateY(0);
      transition-duration: .1s;
    }

    .home-hero {
      background:
        radial-gradient(80% 85% at 8% 10%, rgba(155, 74, 53, .08), transparent 58%),
        linear-gradient(115deg, rgba(70, 82, 77, .045), transparent 44%),
        var(--paper);
    }

    @media (prefers-reduced-motion: no-preference) {
      .home-hero .hero-copy,
      .case-hero > .wrap {
        animation: hero-enter .78s var(--ease-out) backwards;
      }

      .home-hero .hero-system {
        animation: hero-enter .82s .1s var(--ease-out) backwards;
      }
    }

    @keyframes hero-enter {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
    }

    .hero-system,
    .home-facts,
    .case-summary,
    .case-nav,
    .logo-panel {
      border-color: color-mix(in srgb, var(--rule) 72%, transparent);
      border-radius: 18px;
      box-shadow: var(--shadow-soft);
      overflow: hidden;
      transition:
        background-color .45s var(--ease-smooth),
        border-color .45s var(--ease-smooth),
        box-shadow .45s var(--ease-out),
        transform .45s var(--ease-out);
    }

    .hero-system {
      border-top-width: 1px;
    }

    .hero-system:hover,
    .home-facts:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-hover);
    }

    .home-facts {
      border-color: color-mix(in srgb, var(--rule) 72%, transparent);
      box-shadow: var(--shadow-soft);
    }

    .experience-intro {
      max-width: 62ch;
      margin-top: 14px;
      color: var(--ink-soft);
      font-size: 1.03rem;
    }

    .experience-list {
      display: grid;
      gap: 14px;
      margin-top: 30px;
    }

    .experience-item {
      display: grid;
      grid-template-columns: minmax(220px, .58fr) minmax(0, 1.42fr);
      gap: 34px;
      padding: 28px 30px;
      border: 1px solid color-mix(in srgb, var(--rule) 68%, transparent);
      border-radius: 16px;
      background: color-mix(in srgb, var(--surface) 72%, var(--paper));
      box-shadow: 0 8px 28px rgba(23, 24, 23, .04);
      transition:
        background-color .38s var(--ease-smooth),
        border-color .38s var(--ease-smooth),
        transform .48s var(--ease-out),
        box-shadow .48s var(--ease-out);
    }

    .experience-item:hover {
      border-color: color-mix(in srgb, var(--copper) 38%, var(--rule));
      background: var(--surface);
      transform: translateY(-3px);
      box-shadow: var(--shadow-soft);
    }

    .experience-role,
    .experience-meta,
    .experience-stack {
      font-family: 'IBM Plex Mono', monospace;
    }

    .experience-role {
      margin-bottom: 8px;
      color: var(--copper);
      font-size: 10.5px;
      line-height: 1.45;
      letter-spacing: .055em;
      text-transform: uppercase;
    }

    .experience-heading h3 {
      margin-bottom: 8px;
      color: var(--ink);
      font-family: 'Archivo', sans-serif;
      font-size: 1.18rem;
      line-height: 1.25;
    }

    .experience-meta {
      color: var(--muted);
      font-size: 10.5px;
      line-height: 1.55;
    }

    .experience-copy p {
      max-width: 64ch;
      color: var(--ink-soft);
      font-size: .98rem;
      line-height: 1.62;
    }

    .experience-stack {
      display: flex;
      flex-wrap: wrap;
      gap: 7px 16px;
      margin-top: 16px;
      color: var(--muted);
      font-size: 10.5px;
    }

    .experience-stack span {
      position: relative;
    }

    .experience-stack span:not(:first-child)::before {
      content: "·";
      position: absolute;
      left: -10px;
      color: var(--copper);
    }

    .dossier-list a {
      border-radius: 10px;
      transition: background-color .36s var(--ease-smooth), transform .42s var(--ease-out);
    }

    .dossier-list a:hover {
      transform: translateX(6px);
    }

    .system-stream span,
    .tag {
      border-radius: 999px;
    }

    .project-grid,
    .related-grid {
      gap: 16px;
      border: 0;
      background: transparent;
    }

    .project-card,
    .related-grid a {
      border: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
      border-radius: 16px;
      background: color-mix(in srgb, var(--surface) 74%, var(--paper));
      box-shadow: 0 8px 28px rgba(23, 24, 23, .045);
      overflow: hidden;
      transition:
        color .3s var(--ease-smooth),
        background-color .38s var(--ease-smooth),
        border-color .38s var(--ease-smooth),
        transform .48s var(--ease-out),
        box-shadow .48s var(--ease-out);
    }

    .project-card:hover,
    .related-grid a:hover {
      border-color: color-mix(in srgb, var(--copper) 45%, var(--rule));
      background: var(--surface);
      transform: translateY(-6px);
      box-shadow: var(--shadow-hover);
    }

    .selected-grid .project-card.feature {
      border: 1px solid color-mix(in srgb, var(--copper) 38%, var(--rule));
      background:
        radial-gradient(80% 120% at 100% 0, rgba(155, 74, 53, .10), transparent 58%),
        var(--note-bg);
    }

    .selected-grid .project-card.feature:hover {
      box-shadow: var(--shadow-hover);
    }

    .read-more {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: transform .38s var(--ease-out), color .3s var(--ease-smooth);
    }

    .project-card:hover .read-more {
      transform: translateX(5px);
    }

    .worklist li {
      position: relative;
      border-bottom: 0;
      border-radius: 12px;
      padding-left: 10px;
      padding-right: 10px;
      transition:
        background-color .35s var(--ease-smooth),
        transform .42s var(--ease-out);
    }

    .worklist li::after {
      content: "";
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: 0;
      height: 1px;
      background: linear-gradient(90deg, var(--rule), transparent 86%);
      opacity: .55;
    }

    .worklist li:last-child::after {
      display: none;
    }

    .worklist li:hover {
      background: color-mix(in srgb, var(--note-bg) 70%, transparent);
      transform: translateX(5px);
    }

    .worklist .wl-icon {
      border-color: color-mix(in srgb, var(--rule) 68%, transparent);
      border-radius: 9px;
      transition:
        color .3s var(--ease-smooth),
        background-color .3s var(--ease-smooth),
        border-color .3s var(--ease-smooth),
        transform .4s var(--ease-out);
    }

    .worklist li:hover .wl-icon {
      color: var(--paper);
      background: var(--copper);
      border-color: var(--copper);
      transform: rotate(-3deg) scale(1.04);
    }

    .case-section {
      border-top: 0;
    }

    .prose > .case-section::before {
      display: none;
    }

    footer {
      position: relative;
      border-top: 0;
    }

    footer::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      width: min(calc(100% - 48px), var(--max));
      height: 1px;
      transform: translateX(-50%);
      background: linear-gradient(90deg, transparent, var(--rule) 14%, var(--rule) 86%, transparent);
      opacity: .68;
    }

    [data-theme="dark"] {
      --shadow-soft: 0 20px 54px rgba(0, 0, 0, .22);
      --shadow-hover: 0 26px 64px rgba(0, 0, 0, .32);
    }

    @media (prefers-reduced-motion: reduce) {
      body,
      nav,
      .button-link,
      .theme-toggle,
      nav ul a,
      .hero-system,
      .home-facts,
      .experience-item,
      .project-card,
      .related-grid a,
      .worklist li,
      .worklist .wl-icon,
      .read-more {
        transition-duration: .01ms !important;
      }

      .button-link:hover,
      nav ul a.nav-cta:hover,
      .hero-system:hover,
      .home-facts:hover,
      .experience-item:hover,
      .project-card:hover,
      .related-grid a:hover,
      .worklist li:hover,
      .worklist li:hover .wl-icon,
      .project-card:hover .read-more {
        transform: none;
      }
    }

    @media (max-width: 620px) {
      section::before,
      footer::before {
        width: calc(100% - 32px);
      }

      .project-grid,
      .related-grid {
        gap: 12px;
      }

      .experience-item {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 22px;
      }

      .experience-item:hover {
        transform: none;
      }

      .project-card:hover,
      .related-grid a:hover {
        transform: translateY(-3px);
      }

      .worklist li {
        padding-left: 8px;
        padding-right: 8px;
      }
    }