* { margin: 0; padding: 0; box-sizing: border-box; }
    /* The Recent Works landing page is deliberately locked to exactly one
       screen (no scrollbar), while every other page scrolls normally. That
       meant the scrollbar itself was appearing/disappearing when navigating
       between them, changing the viewport's available width by its size —
       and since the nav bar is horizontally centered, that shift showed up
       as the whole row nudging a couple pixels left/right. Reserving the
       scrollbar's space unconditionally removes that shift entirely. */
    html { scrollbar-gutter: stable; }
    :root {
      --bg-color: #efefef;
      --text-color: #1a1a1a;
      --text-secondary: #666;
      --border-color: var(--text-secondary);
      --border-light: rgba(128,128,128,0.35);
      --border-subtle: rgba(128,128,128,0.3);
      --border-faint: rgba(0,0,0,0.1);
      --border-medium: rgba(0,0,0,0.2);
      --hover-bg: rgba(0,0,0,0.05);
      --hover-bg-active: rgba(0,0,0,0.1);
      --shadow: rgba(0,0,0,0.1);
      --timeline-bg: rgba(128,128,128,0.3);
    }

    [data-theme="dark"] {
      --bg-color: #111111;
      --text-color: #e8e8e8;
      --text-secondary: #aaa;
      --border-color: rgba(255,255,255,0.2);
      --border-light: rgba(128,128,128,0.35);
      --border-subtle: rgba(128,128,128,0.3);
      --border-faint: rgba(255,255,255,0.1);
      --border-medium: rgba(255,255,255,0.3);
      --hover-bg: rgba(255,255,255,0.05);
      --hover-bg-active: rgba(255,255,255,0.1);
      --shadow: rgba(0,0,0,0.5);
      --timeline-bg: rgba(128,128,128,0.3);
    }

    .dark-mode-toggle {
      position: fixed;
      top: 8px;
      right: 24px;
      z-index: 2000;
      width: 24px;
      height: 24px;
      border: none;
      background: none;
      cursor: pointer;
      opacity: 0.4;
      transition: opacity 0.2s ease;
      padding: 0;
    }
    .dark-mode-toggle:hover {
      opacity: 0.8;
    }
    .dark-mode-toggle svg {
      width: 100%;
      height: 100%;
      fill: rgba(0,0,0,0.5);
    }

    .text-size-toggle {
      position: fixed;
      top: 6px;
      right: 56px;
      z-index: 2000;
      border: none;
      background: none;
      cursor: pointer;
      opacity: 0.35;
      transition: opacity 0.2s ease;
      padding: 0;
      font-family: inherit;
      color: rgba(0,0,0,0.8);
      line-height: 1;
      display: flex;
      align-items: baseline;
      gap: 1px;
    }
    .text-size-toggle .text-size-small {
      font-size: 16px;
      opacity: 0.4;
      transition: opacity 0.2s;
    }
    .text-size-toggle .text-size-large {
      font-size: 26px;
      opacity: 1;
      transition: opacity 0.2s;
    }
    .text-size-toggle.active .text-size-small {
      opacity: 1;
    }
    .text-size-toggle.active .text-size-large {
      opacity: 0.4;
    }
    .text-size-toggle:hover {
      opacity: 0.8;
    }
    .text-size-toggle.active {
      opacity: 0.7;
    }
    [data-theme="dark"] .text-size-toggle {
      color: rgba(255,255,255,0.8);
    }

    /* Large text mode */
    [data-text-size="large"] {
      font-size: 130%;
    }
    [data-text-size="large"] body {
      font-size: 26px;
    }
    [data-text-size="large"] nav {
      height: 46px;
    }
    [data-text-size="large"] .nav-btn {
      font-size: 1rem;
    }
    [data-text-size="large"] .work-subnav {
      top: 46px;
      height: 42px;
    }
    [data-text-size="large"] .subnav-btn {
      font-size: 1rem;
    }
    [data-text-size="large"] .work-year-nav {
      top: 88px;
      height: 42px;
    }
    [data-text-size="large"] .work-year-nav button,
    [data-text-size="large"] .timeline-year {
      font-size: 1rem;
    }
    [data-text-size="large"] .installation-page .work-subnav,
    [data-text-size="large"] .video-project-page .work-subnav {
      top: 46px;
      height: 42px;
    }
    [data-text-size="large"] .dark-mode-toggle {
      top: 11px;
    }
    [data-text-size="large"] .text-size-toggle {
      top: 9px;
    }

    @media (max-width: 700px) {
      [data-text-size="large"] nav {
        height: 42px;
      }
      [data-text-size="large"] .work-year-nav {
        top: 42px;
      }
      [data-text-size="large"] body {
        padding-top: 42px;
      }
    }

    [data-theme="dark"] .modal {
      background: rgba(20, 20, 20, 0.92);
    }
    [data-theme="dark"] .lightbox {
      background: rgba(10, 10, 10, 0.9);
    }
    [data-theme="dark"] .installation-page {
      background: var(--bg-color);
    }
    [data-theme="dark"] .video-project-page {
      background: var(--bg-color);
    }
    [data-theme="dark"] img {
      opacity: 0.95;
    }
    [data-theme="dark"] nav {
      background: #5c5320;
      border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    [data-theme="dark"] .work-subnav {
      background: #3d3815;
      border-bottom: 1px solid rgba(255,255,255,0.15);
    }
    [data-theme="dark"] .work-year-nav {
      background: #2e2b12;
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    [data-theme="dark"] .nav-btn {
      color: rgba(255,255,255,0.45);
    }
    [data-theme="dark"] .nav-btn.active {
      color: #e8e8e8;
    }
    [data-theme="dark"] .nav-btn:hover {
      color: #e8e8e8;
    }
    [data-theme="dark"] .hamburger {
      color: #e8e8e8;
    }
    [data-theme="dark"] .mobile-nav-title {
      color: #e8e8e8;
    }
    [data-theme="dark"] .mobile-nav-tools button {
      color: rgba(255,255,255,0.45);
    }
    [data-theme="dark"] .dark-mode-toggle svg {
      fill: rgba(255,255,255,0.5);
    }
    [data-theme="dark"] .installation-page-nav {
      background: #5c5320;
      border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    [data-theme="dark"] .installation-page-nav a {
      color: rgba(255,255,255,0.45);
    }
    [data-theme="dark"] .installation-page-nav a.active {
      color: #e8e8e8;
      font-weight: 500;
    }
    [data-theme="dark"] .installation-page-nav a:hover {
      color: #e8e8e8;
    }
    [data-theme="dark"] .page-mobile-nav {
      background: #5c5320;
      border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    [data-theme="dark"] .page-mobile-nav .page-mobile-title {
      color: #e8e8e8;
    }
    [data-theme="dark"] .page-mobile-nav .hamburger {
      color: #e8e8e8;
    }
    [data-theme="dark"] .page-mobile-tools button {
      color: rgba(255,255,255,0.45);
    }
    [data-theme="dark"] .installation-page .work-subnav {
      background: #3d3815;
      border-bottom: 1px solid rgba(255,255,255,0.15);
    }
    [data-theme="dark"] .installation-page .work-year-nav {
      background: #2e2b12;
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    [data-theme="dark"] .video-project-page .work-subnav {
      background: #3d3815;
      border-bottom: 1px solid rgba(255,255,255,0.15);
    }
    [data-theme="dark"] .video-project-page .work-year-nav {
      background: #2e2b12;
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    [data-theme="dark"] .video-project-page .installation-page-nav {
      background: #5c5320;
      border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    [data-theme="dark"] .video-project-page .installation-page-nav a {
      color: rgba(255,255,255,0.45);
    }
    [data-theme="dark"] .video-project-page .installation-page-nav a.active,
    [data-theme="dark"] .video-project-page .installation-page-nav a:hover {
      color: #e8e8e8;
    }
    body { 
      background: var(--bg-color); 
      font-family: 'EB Garamond', Garamond, Georgia, serif; 
      color: var(--text-color);
      line-height: 1.4;
      font-size: 19px;
      overflow-x: hidden;
    }

    /* Hamburger menu - mobile only */
    .hamburger {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0.5rem;
      z-index: 1100;
      color: #111;
    }

    .hamburger svg {
      width: 20px;
      height: 20px;
      display: block;
    }

    .mobile-menu-backdrop {
      display: none;
      position: fixed;
      top: 42px;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.4);
      z-index: 2100;
    }

    .mobile-menu-backdrop.open {
      display: block;
    }

    .mobile-menu {
      display: none;
      position: fixed;
      top: 42px;
      left: 0;
      right: 0;
      background: var(--bg-color);
      z-index: 2110;
      padding: 1rem 1.5rem;
      border-bottom: 1px solid var(--border-light);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .mobile-menu.open {
      display: block;
    }

    .mobile-menu-label {
      font-size: 0.9rem;
      color: var(--text-secondary);
      letter-spacing: 0.05em;
      margin-bottom: 0.1rem;
    }

    .mobile-menu-item {
      display: block;
      background: none;
      border: none;
      font-family: inherit;
      font-size: 0.9rem;
      color: var(--text-color);
      cursor: pointer;
      padding: 0.3rem 0;
      text-align: left;
      width: 100%;
      letter-spacing: 0.03em;
      text-decoration: none;
    }

    .mobile-menu-item:hover {
      opacity: 0.7;
      font-weight: 500;
    }

    .mobile-menu-item.active {
      font-weight: 500;
      text-decoration: underline;
      text-underline-offset: 4px;
      text-decoration-thickness: 1px;
    }

    .mobile-menu-item.indented {
      padding-left: 1.5rem;
    }

    .mobile-menu-divider {
      border: none;
      border-top: 1px solid var(--border-medium);
      margin: 0.25rem 0 0.25rem 1.5rem;
      width: 35%;
    }

    /* Mobile nav toolbar: +/- and dark mode in nav bar */
    .mobile-nav-title {
      cursor: pointer;
      display: none;
      font-size: 0.85rem;
      color: #111;
      letter-spacing: 0.03em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 55vw;
      text-align: center;
    }

    /* Mobile nav bar for installation/video/AC pages */
    .page-mobile-nav {
      display: none;
      position: sticky;
      top: 0;
      z-index: 110;
      height: 42px;
      background: #e8d44d;
      border-bottom: 1px solid rgba(0,0,0,0.2);
      align-items: center;
      justify-content: center;
    }

    .page-mobile-nav .hamburger {
      display: block;
      position: absolute;
      left: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-color);
    }

    .page-mobile-title {
      cursor: pointer;
      font-size: 0.85rem;
      color: var(--text-color);
      letter-spacing: 0.03em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 55vw;
      text-align: center;
    }

    .page-mobile-tools {
      position: absolute;
      right: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .page-mobile-tools button {
      background: none;
      border: none;
      color: var(--text-secondary);
      cursor: pointer;
      padding: 0.25rem;
      font-size: 0.95rem;
      line-height: 1;
    }

    .mobile-text-size-toggle {
      display: inline-flex;
      align-items: baseline;
      gap: 1px;
      font-family: inherit;
    }
    .mobile-text-size-toggle .text-size-small {
      font-size: 11px;
      opacity: 0.4;
    }
    .mobile-text-size-toggle .text-size-large {
      font-size: 17px;
      opacity: 1;
    }
    [data-text-size="large"] .mobile-text-size-toggle .text-size-small {
      opacity: 1;
    }
    [data-text-size="large"] .mobile-text-size-toggle .text-size-large {
      opacity: 0.4;
    }

    .mobile-nav-tools {
      display: none;
      align-items: center;
      gap: 0.5rem;
      position: absolute;
      right: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
    }

    .mobile-nav-tools button {
      background: none;
      border: none;
      color: rgba(0,0,0,0.55);
      cursor: pointer;
      padding: 0.35rem;
      font-size: 1.15rem;
      line-height: 1;
      min-width: 28px;
      min-height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    @media (max-width: 700px) {
      body {
        padding-top: 42px;
      }

      .hamburger {
        display: block;
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
      }

      .mobile-nav-title {
      cursor: pointer;
        display: block;
      }

      .mobile-nav-tools {
        display: flex;
      }

      nav .nav-content {
        display: none;
      }

      nav {
        justify-content: center;
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        min-width: 100%;
        z-index: 1000;
        will-change: transform;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
      }

      .work-subnav {
        display: none !important;
      }

      .dark-mode-toggle {
        display: none;
      }

      .text-size-toggle {
        display: none;
      }

      /* Installation/video page mobile nav */
      .page-mobile-nav {
        display: flex;
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1600;
        will-change: transform;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
      }

      .installation-page .installation-page-nav,
      .video-project-page .installation-page-nav {
        display: none !important;
      }

      .installation-page .work-subnav,
      .video-project-page .work-subnav {
        display: none !important;
      }

      .installation-page .work-year-nav,
      .video-project-page .work-year-nav {
        display: none !important;
      }

      /* Hide installation section nav and headers on mobile */
      #installation-section-nav {
        display: none !important;
      }

      /* Add padding for fixed mobile nav on installation/video pages */
      .installation-page .installation-page-content,
      .video-project-page .installation-page-content {
        padding-top: 48px;
      }

      /* The page-mobile-nav replaces the desktop nav on overlay pages */
      .installation-page .installation-page-content {
        padding-left: 1rem;
        padding-right: 1rem;
      }
      .video-project-page .installation-page-content {
        padding-left: 1rem;
        padding-right: 1rem;
      }

      /* Alphabet Clock: hide sidebar on mobile */
      .ac-toc {
        display: none !important;
      }

      .ac-content {
        border-left: none;
        padding-left: 0;
      }
    }

    @media (min-width: 701px) {
      .mobile-menu,
      .mobile-menu-backdrop {
        display: none !important;
      }
    }

    nav {
      position: sticky;
      top: 0;
      background: #e8d44d;
      border-bottom: 1px solid rgba(0,0,0,0.2);
      padding: 0 max(3rem, env(safe-area-inset-right)) 0 max(3rem, env(safe-area-inset-left));
      z-index: 1000;
      height: 42px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .nav-content {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 3rem;
      flex-wrap: wrap;
    }

    .nav-btn {
      background: none;
      border: none;
      font-size: 0.95rem;
      cursor: pointer;
      padding: 0.5rem 0;
      color: rgba(0,0,0,0.55);
      transition: all 0.3s ease;
      letter-spacing: 0.05em;
      font-family: inherit;
      text-decoration: none;
    }

    .nav-btn.active {
      color: #111;
      text-decoration: underline;
      text-underline-offset: 6px;
      text-decoration-thickness: 1px;
    }

    .nav-btn:hover { color: #111; }

    .nav-home {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      /* Fixed box (not padding + an offsetting negative margin) so nothing
         about its size can shift by even a sub-pixel between states —
         padding/margin arithmetic combined with color/underline changes on
         click was rounding slightly differently and reading as a 1-2px
         "nudge" in the whole centered nav row. */
      width: 28px;
      height: 28px;
      box-sizing: border-box;
      flex: 0 0 28px;
    }

    /* text-decoration doesn't reliably paint under a plain SVG (there's no
       text run for it to attach to), so the active-state underline is drawn
       by hand here instead, matched to sit at the same height as the text
       buttons' underline. */
    .nav-home.active::after {
      content: '';
      position: absolute;
      left: 6px;
      right: 6px;
      bottom: 4px;
      height: 1px;
      background: currentColor;
    }

    .nav-home svg {
      display: block;
    }

    .year-nav {
      position: sticky;
      top: 42px;
      background: var(--bg-color);
      border-bottom: 1px solid var(--border-subtle);
      padding: 0.75rem 3rem;
      height: 42px;
      box-sizing: border-box;
      z-index: 900;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 2rem;
      overflow: hidden;
    }

    .year-nav.hidden { display: none; }

    .year-nav button {
      background: none;
      border: none;
      border-bottom: 1px solid transparent;
      font-size: 0.85rem;
      cursor: pointer;
      padding: 0;
      color: var(--text-secondary);
      font-family: inherit;
      transition: all 0.3s ease;
    }

    .year-nav button.active { color: var(--text-color); font-weight: 500; border-bottom: 1px solid var(--text-color); }
    .year-nav button:hover { color: var(--text-color); }

    .year-section { margin-bottom: 3rem; }

    .year-marker {
      height: 0;
      margin: 0;
      padding: 0;
      visibility: hidden;
    }

    .year-section h2 {
      font-size: 1.1rem;
      font-weight: normal;
      margin-bottom: 1.5rem;
      text-align: center;
      letter-spacing: 0.1em;
    }

    main {
      max-width: 1600px;
      margin: 0 auto;
      padding: 0 max(3rem, env(safe-area-inset-right)) 3rem max(3rem, env(safe-area-inset-left));
      box-sizing: border-box;
    }

    @media (max-width: 700px) {
      main {
        padding: 0 max(1rem, env(safe-area-inset-right)) 2rem max(1rem, env(safe-area-inset-left));
      }
    }

    .section { display: none; }
    .section.active { display: block; }

    /* Work sub-navigation */
    .work-subnav {
      position: sticky;
      top: 42px;
      z-index: 900;
      background: #ece09a;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      gap: 2rem;
      margin-bottom: 0;
      padding: 0 max(3rem, env(safe-area-inset-right)) 0 max(3rem, env(safe-area-inset-left));
      height: 42px;
      box-sizing: border-box;
      border-bottom: 1px solid rgba(0,0,0,0.2);
      width: 100vw;
      margin-left: calc(-50vw + 50%);
      overflow: visible;
    }

    .subnav-btn {
      background: none;
      border: none;
      font-size: 0.95rem;
      cursor: pointer;
      padding: 0.5rem 0;
      color: var(--text-secondary);
      font-family: inherit;
      transition: all 0.3s ease;
      letter-spacing: 0.03em;
      outline: none;
      white-space: nowrap;
      flex-shrink: 0;
      text-decoration: none;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
    }

    .subnav-btn::after {
      content: attr(data-text);
      font-weight: 500;
      height: 0;
      overflow: hidden;
      visibility: hidden;
      pointer-events: none;
      letter-spacing: 0.03em;
    }

    .subnav-btn.active {
      color: var(--text-color);
      font-weight: 500;
      text-decoration: underline;
      text-underline-offset: 6px;
      text-decoration-thickness: 1px;
    }

    .subnav-btn:hover {
      color: var(--text-color);
    }

    .subnav-btn:focus {
      outline: none;
    }

    .subnav-separator {
      color: var(--text-secondary);
      opacity: 0.4;
      font-size: 0.9rem;
      flex-shrink: 0;
    }

    .work-type {
      display: none;
    }

    .work-type.active {
      display: block;
    }

    /* Work-specific year nav - sticky below work-subnav */
    .work-year-nav {
      position: sticky;
      top: 84px;
      background: #e9e5c0;
      z-index: 800;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      gap: 2rem;
      padding: 0.75rem max(3rem, env(safe-area-inset-right)) 0.75rem max(3rem, env(safe-area-inset-left));
      height: 42px;
      box-sizing: border-box;
      border-bottom: 1px solid rgba(0,0,0,0.2);
      margin-bottom: 1.5rem;
      width: 100vw;
      margin-left: calc(-50vw + 50%);
      overflow: visible;
    }

    .work-year-nav::-webkit-scrollbar {
      display: none;
    }

    .work-year-nav button {
      background: none;
      border: none;
      font-size: 0.95rem;
      cursor: pointer;
      padding: 0.5rem 0;
      color: var(--text-secondary);
      font-family: inherit;
      transition: all 0.3s ease;
      letter-spacing: 0.03em;
      white-space: nowrap;
      flex-shrink: 0;
      text-decoration: none;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
    }

    .work-year-nav button::after {
      content: attr(data-text);
      font-weight: 500;
      height: 0;
      overflow: hidden;
      visibility: hidden;
      pointer-events: none;
      letter-spacing: 0.03em;
    }

    .work-year-nav button.active { color: var(--text-color); font-weight: 500; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
    .work-year-nav button:hover { color: var(--text-color); }

    /* Compact timeline indicator */
    .compact-timeline {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      user-select: none;
    }

    .compact-timeline .timeline-year {
      font-size: 0.85rem;
      color: var(--text-color);
      font-family: inherit;
      min-width: 32px;
      text-align: right;
      transition: opacity 0.2s ease;
      cursor: pointer;
    }

    .compact-timeline .timeline-year:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .compact-timeline .timeline-year-select {
      font-size: 0.85rem;
      color: var(--text-color);
      font-family: inherit;
      background: transparent;
      border: none;
      border-bottom: 1px solid var(--text-color);
      outline: none;
      padding: 0;
      cursor: pointer;
      -webkit-appearance: none;
      appearance: none;
    }

    .compact-timeline .timeline-track {
      width: 500px;
      max-width: 50vw;
      height: 36px;
      background: transparent;
      position: relative;
      cursor: pointer;
      display: flex;
      align-items: center;
    }

    .compact-timeline .timeline-track::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--text-secondary);
      transform: translateY(-50%);
    }

    .compact-timeline .timeline-handle {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0%;
      width: 4px;
      height: 16px;
      margin-left: -2px;
      background-color: #1a1a1a;
      cursor: grab;
      transition: left 0.15s ease;
      z-index: 2;
    }

    /* Invisible larger click/drag target */
    .compact-timeline .timeline-handle::after {
      content: '';
      position: absolute;
      top: -12px;
      left: -14px;
      right: -14px;
      bottom: -12px;
      cursor: grab;
    }

    /* Larger touch target on mobile */
    @media (max-width: 700px) {
      .compact-timeline .timeline-track {
        height: 44px;
        touch-action: none;
      }
      .compact-timeline .timeline-handle {
        width: 4px;
        height: 18px;
        margin-left: -2px;
      }
      /* Invisible touch target around handle */
      .compact-timeline .timeline-handle::after {
        content: '';
        position: absolute;
        top: -15px;
        left: -20px;
        right: -20px;
        bottom: -15px;
      }
    }

    [data-theme="dark"] .compact-timeline .timeline-handle {
      background-color: #e8e8e8;
    }

    .compact-timeline .timeline-handle.dragging {
      cursor: grabbing;
    }

    .timeline-grid-controls {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      margin-left: 1rem;
    }

    .timeline-grid-controls button {
      background: none;
      border: none;
      width: 28px;
      height: 28px;
      font-size: 1.15rem;
      color: var(--text-secondary);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      cursor: pointer;
    }

    .timeline-grid-controls button:hover {
      background: var(--hover-bg);
      color: var(--text-color);
    }

    @media (max-width: 700px) {
      .work-year-nav {
        position: fixed !important;
        top: 42px;
        left: 0;
        width: 100%;
        padding: 0.75rem max(1rem, env(safe-area-inset-right)) 0.75rem max(1rem, env(safe-area-inset-left));
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0;
        height: 48px;
        z-index: 999;
        will-change: transform;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
      }
      .compact-timeline {
        width: 100%;
        justify-content: center;
      }
      .compact-timeline .timeline-track {
        flex: 1;
        width: auto;
      }
      .timeline-grid-controls {
        margin-left: 0.5rem;
      }
      .timeline-grid-controls button {
        width: 28px;
        height: 28px;
        font-size: 1.15rem;
      }
    }

    .masonry-grid {
      display: grid;
      grid-template-columns: repeat(var(--grid-columns, 5), 1fr);
      gap: 1.5rem;
      padding-bottom: 20vh;
      transition: max-width 0.2s ease;
    }

    @media (max-width: 700px) {
      .masonry-grid {
        gap: 0.5rem;
      }
    }

    .masonry-grid .work-card {
      cursor: pointer;
      transition: opacity 0.3s ease;
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      min-height: 0;
      text-decoration: none;
      color: inherit;
    }

    .masonry-grid .work-card:hover {
      opacity: 0.85;
    }

    .masonry-grid .work-card img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      display: block;
      object-fit: contain;
    }

    @media (max-width: 700px) {
      .masonry-grid .work-card {
        aspect-ratio: auto;
        overflow: visible;
        display: block;
      }
      .masonry-grid .work-card img {
        width: 100%;
        height: auto;
        max-height: none;
      }
    }

    .work-type {
      position: relative;
      padding-top: 2rem;
    }

    @media (max-width: 700px) {
      .work-type {
        padding-top: 56px;
      }
    }

    /* Installation grid - larger horizontal thumbnails */
    .installations-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }

    .year-markers-container {
      display: none;
    }

    .installation-card {
      cursor: pointer;
      text-decoration: none;
      color: inherit;
      display: block;
    }

    .installation-card:hover {
      opacity: 1;
    }

    .installation-card .image-container {
      position: relative;
      overflow: hidden;
      aspect-ratio: var(--grid-aspect-ratio, 16 / 10);
    }

    .installation-card .image-container img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transform: scale(1);
      transition: opacity 0.3s ease;
      opacity: 1;
    }

    .installation-card .image-container img.slideshow-img {
      opacity: 0;
    }

    .installation-card .image-container img.slideshow-img.visible {
      opacity: 1;
    }

    .installation-card .image-container img.zooming {
      animation: zoomIn 2s linear forwards;
    }

    @keyframes zoomIn {
      0% { transform: scale(1); }
      100% { transform: scale(1.08); }
    }

    .installation-card .caption {
      margin-top: 0.75rem;
      margin-bottom: 1rem;
      font-size: 0.9rem;
      color: var(--text-color);
      line-height: 1.4;
    }

    .installation-card .caption .caption-title {
      font-weight: 500;
      text-decoration: underline;
      text-underline-offset: 4px;
      text-decoration-thickness: 1px;
      text-decoration-color: var(--border-medium);
    }

    .installation-card .caption .caption-detail {
      color: var(--text-secondary);
      margin-top: 0.15rem;
    }

    .installation-card .caption .caption-date {
      color: var(--text-secondary);
    }

    .installation-card .caption em {
      font-style: italic;
    }

    @media (max-width: 900px) {
      .installations-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 700px;
      }
    }

    @media (max-width: 600px) {
      .installations-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
      }
    }

    /* Info styles */
    /* News Section */
    .news-section {
      max-width: 1000px;
      margin: 0 auto;
      padding: 2rem 3rem;
    }

    .news-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
    }

    .news-entry {
      display: flex;
      flex-direction: column;
    }

    .news-image {
      width: 100%;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      margin-bottom: 0.75rem;
    }

    .news-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: opacity 0.3s ease;
    }

    .news-image img:hover {
      opacity: 0.85;
    }

    .news-date {
      font-size: 0.8rem;
      color: var(--text-secondary);
      margin-bottom: 0.3rem;
    }

    .news-title {
      font-size: 0.9rem;
      font-weight: 500;
      margin-bottom: 0.3rem;
    }

    .news-title a {
      color: var(--text-color);
      text-decoration: underline;
      text-underline-offset: 4px;
      text-decoration-thickness: 1px;
      text-decoration-color: var(--border-medium);
    }

    .news-title a:hover {
      text-decoration-color: var(--text-color);
    }

    .news-description {
      color: var(--text-secondary);
      font-size: 0.9rem;
      line-height: 1.5;
    }

    @media (max-width: 700px) {
      .news-section {
        padding: 1.5rem 1.5rem;
      }
      .news-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
    }

    /* Log (studio devlog) — warm cream tint, distinct from the rest of the
       site, echoing the yellow nav without competing with photos. */
    /* Full-bleed background so the tint reaches the true edges of the
       window — <main> has its own side padding/max-width, so painting the
       color there would leave visible gaps on the left/right. Applying it
       to body instead (toggled on while the Log page is active) covers
       the full viewport with no borders. */
    body.log-page {
      background: #cfcac2;
      min-height: 100vh;
    }

    [data-theme="dark"] body.log-page {
      background: #3a3835;
    }

    /* The lightbox is a shared component (also used on Drawings,
       Installations, Diagrams, Objects, etc.), so its default background
       is a neutral near-white to match the site's normal --bg-color.
       Override it here to match the Log page's own sky-blue background
       instead, so opening a log photo doesn't flash white behind it. */
    body.log-page .lightbox {
      background: rgba(207, 202, 194, 0.85);
    }

    [data-theme="dark"] body.log-page .lightbox {
      background: rgba(58, 56, 53, 0.85);
    }

    .log-section {
      max-width: 700px;
      margin: 0 auto;
      padding: 2rem 3rem;
    }

    /* Log entries are styled like old-web blog posts: each one is its
       own rounded, outlined card sitting on the page's green background,
       with a little "washi tape" corner and a scrapbook-style rotating
       set of paper colors, rather than a plain text block separated by
       a rule. */
    .log-entry {
      position: relative;
      background-color: #fdfbf5;
      /* A loose-leaf notebook look: a thin red margin rule near the left
         edge, plus evenly repeating horizontal ruled lines. Purely
         decorative (not aligned to actual text baselines), same trick
         used on real notebook-paper backgrounds. */
      background-image:
        linear-gradient(to right, transparent 0, transparent 2.3rem, rgba(206, 84, 84, 0.35) 2.3rem, rgba(206, 84, 84, 0.35) calc(2.3rem + 1px), transparent calc(2.3rem + 1px)),
        repeating-linear-gradient(to bottom, transparent 0, transparent 27px, rgba(94, 132, 189, 0.16) 27px, rgba(94, 132, 189, 0.16) 28px);
      border: 1px solid rgba(0, 0, 0, 0.14);
      border-radius: 16px;
      /* Soft shadow spreading evenly in every direction, like the card is
         resting just above the page rather than being lit from one side. */
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.06), 0 0 26px rgba(0, 0, 0, 0.16);
      padding: 1.85rem 2rem;
      margin-bottom: 2.25rem;
    }

    .log-entry:last-child {
      margin-bottom: 0;
    }

    /* Rotating paper colors, cycling every 4 posts */
    .log-entry:nth-child(4n+2) { background-color: #fdf3ea; }
    .log-entry:nth-child(4n+3) { background-color: #eef2fb; }
    .log-entry:nth-child(4n+0) { background-color: #eef8f0; }

    .log-date {
      display: inline-block;
      font-family: 'Special Elite', 'Courier New', monospace;
      font-size: 0.85rem;
      letter-spacing: 0.02em;
      color: var(--text-secondary);
      background: rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 999px;
      padding: 0.3rem 0.9rem;
      margin-bottom: 1rem;
    }

    .log-images {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 0.6rem;
      margin-bottom: 1.1rem;
    }

    .log-images.single {
      grid-template-columns: 1fr;
    }

    /* Wrapper around each photo/video, purely so the photo-corner
       stickers (::after) have something to sit on top of. */
    .log-photo {
      position: relative;
      display: block;
    }

    .log-photo-video {
      /* video spans the full row on its own line so its native controls
         have room, rather than squeezing into the photo grid tiles */
      grid-column: 1 / -1;
    }

    .log-images img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      display: block;
      cursor: pointer;
      border-radius: 10px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
    }

    .log-images video {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      display: block;
      background: #000;
      border-radius: 10px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
    }

    .log-images.single img,
    .log-images.single video {
      aspect-ratio: 3 / 2;
    }

    /* Photo-corner stickers: four little triangles laid over each corner,
       like the paper corners used to mount prints in an old photo album.
       Built from four diagonally-split gradients rather than extra
       markup, one per corner. */
    .log-photo::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(135deg, #2b241c 50%, transparent 50%),
        linear-gradient(-135deg, #2b241c 50%, transparent 50%),
        linear-gradient(45deg, #2b241c 50%, transparent 50%),
        linear-gradient(-45deg, #2b241c 50%, transparent 50%);
      background-size: 20px 20px;
      background-repeat: no-repeat;
      background-position: top left, top right, bottom left, bottom right;
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
    }

    .log-images.single .log-photo::after {
      background-size: 28px 28px;
    }

    .log-text {
      font-size: 0.95rem;
      line-height: 1.6;
      color: var(--text-color);
    }

    .log-text em { font-style: italic; }

    .log-text a {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: 1px;
      text-decoration-color: var(--border-medium);
    }

    .log-text a:hover {
      text-decoration-color: var(--text-color);
    }

    /* Hashtag cloud (browse/filter by tag) + per-entry tag pills */
    .log-tag-cloud {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 2rem;
      padding: 1rem 1.25rem;
      background: rgba(255, 255, 255, 0.35);
      border: 1px solid rgba(0, 0, 0, 0.12);
      border-radius: 14px;
    }

    .log-tag {
      display: inline-block;
      font-size: 0.78rem;
      padding: 0.32rem 0.85rem;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.6);
      color: var(--text-color);
      text-decoration: none;
      border: 1px solid rgba(0, 0, 0, 0.1);
      transition: background 0.15s ease, transform 0.15s ease;
    }

    .log-tag:hover {
      background: rgba(255, 255, 255, 0.9);
      transform: translateY(-1px);
    }

    .log-tag.active {
      background: var(--text-color);
      color: var(--bg-color);
      border-color: var(--text-color);
    }

    .log-tag-status {
      font-size: 0.85rem;
      color: var(--text-secondary);
      margin-bottom: 1.5rem;
    }

    .log-tag-status strong {
      color: var(--text-color);
    }

    .log-tag-status a {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .log-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      margin-top: 1.1rem;
      padding-top: 1.1rem;
      border-top: 1px dashed rgba(0, 0, 0, 0.14);
    }

    .log-tags .log-tag {
      font-size: 0.72rem;
      padding: 0.22rem 0.6rem;
      background: rgba(0, 0, 0, 0.05);
    }

    .log-tags .log-tag:hover {
      background: rgba(0, 0, 0, 0.1);
    }

    [data-theme="dark"] .log-entry {
      background-color: #2b2720;
      background-image:
        linear-gradient(to right, transparent 0, transparent 2.3rem, rgba(214, 110, 110, 0.3) 2.3rem, rgba(214, 110, 110, 0.3) calc(2.3rem + 1px), transparent calc(2.3rem + 1px)),
        repeating-linear-gradient(to bottom, transparent 0, transparent 27px, rgba(255, 255, 255, 0.05) 27px, rgba(255, 255, 255, 0.05) 28px);
      border-color: rgba(255, 255, 255, 0.1);
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.4);
    }

    [data-theme="dark"] .log-entry:nth-child(4n+2) { background-color: #33291f; }
    [data-theme="dark"] .log-entry:nth-child(4n+3) { background-color: #262a35; }
    [data-theme="dark"] .log-entry:nth-child(4n+0) { background-color: #22301f; }

    [data-theme="dark"] .log-photo::after {
      background-image:
        linear-gradient(135deg, #d9c49a 50%, transparent 50%),
        linear-gradient(-135deg, #d9c49a 50%, transparent 50%),
        linear-gradient(45deg, #d9c49a 50%, transparent 50%),
        linear-gradient(-45deg, #d9c49a 50%, transparent 50%);
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
    }

    [data-theme="dark"] .log-date {
      background: rgba(255, 255, 255, 0.07);
      border-color: rgba(255, 255, 255, 0.12);
    }

    [data-theme="dark"] .log-images img,
    [data-theme="dark"] .log-images video {
      border-color: rgba(255, 255, 255, 0.12);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }

    [data-theme="dark"] .log-tag-cloud {
      background: rgba(0, 0, 0, 0.18);
      border-color: rgba(255, 255, 255, 0.12);
    }

    [data-theme="dark"] .log-tag {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.14);
    }

    [data-theme="dark"] .log-tag:hover {
      background: rgba(255, 255, 255, 0.15);
    }

    [data-theme="dark"] .log-tags {
      border-top-color: rgba(255, 255, 255, 0.14);
    }

    [data-theme="dark"] .log-tags .log-tag {
      background: rgba(255, 255, 255, 0.06);
    }

    @media (max-width: 700px) {
      .log-section {
        padding: 1.5rem 1.5rem;
      }
      .log-entry {
        padding: 1.4rem 1.4rem;
        border-radius: 14px;
      }
      .log-images {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
      }
    }

    /* Recent Works Section (landing page) */
    .recentworks-section {
      max-width: min(1500px, 92vw);
      margin: 0 auto;
      padding: 2rem 2rem;
    }

    .recentworks-carousel-grid {
      display: grid;
      grid-template-columns: auto 1fr auto;
      column-gap: 2rem;
      align-items: center;
      position: relative;
    }

    /* Full-bleed hero image on both breakpoints — desktop uses a curated
       landscape image set, mobile a curated portrait set (see recent.txt),
       each shot/cropped for its own screen shape. object-fit:cover crops
       slightly to fill the frame exactly, which is the only way to
       guarantee both edge-to-edge full bleed AND zero scroll at once for
       an image that doesn't exactly match the window's own aspect ratio.
       The caption is a short, content-width chip floating over the image. */
    .recentworks-carousel-outer {
      position: relative;
      grid-column: 1 / -1;
      grid-row: 1;
      min-width: 0;
    }

    .recentworks-carousel-wrap {
      position: relative;
      left: 50%;
      width: 100vw;
      margin-left: -50vw;
      min-width: 0;
      height: 82vh; /* fallback; JS resizes to exactly fit the viewport */
      overflow: hidden;
      touch-action: pan-y;
      transition: height 0.45s ease, width 0.45s ease;
    }

    .recentworks-carousel {
      display: flex;
      width: 100%;
      height: 100%;
      transition: transform 1.1s ease-in-out;
    }

    .recentworks-carousel-item {
      flex: 0 0 100%;
      width: 100%;
      height: 100%;
      overflow: hidden;
      cursor: pointer;
      background: var(--bg-color);
    }

    .recentworks-carousel-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .recentworks-carousel-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 5;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.7rem;
      color: #fff;
      background: transparent;
      border: none;
      cursor: pointer;
      text-shadow: 0 1px 4px rgba(0,0,0,0.6), 0 0 12px rgba(0,0,0,0.35);
      opacity: 0.35;
      transition: opacity 0.2s ease;
    }

    .recentworks-carousel-arrow:hover {
      opacity: 0.7;
    }

    .recentworks-carousel-prev { left: 0.6rem; }
    .recentworks-carousel-next { right: 0.6rem; }

    .recentworks-caption {
      position: absolute;
      left: 50%;
      bottom: 1.5rem;
      transform: translateX(-50%);
      z-index: 3;
      max-width: calc(100% - 3rem);
      margin: 0;
      padding: 0.55rem 1rem;
      background: rgba(255,255,255,0.45);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: #1a1a1a;
      display: inline-flex;
      align-items: baseline;
      justify-content: flex-start;
      gap: 0.6rem;
      white-space: nowrap;
      font-size: 0.9rem;
      line-height: 1.4;
    }

    .recentworks-caption .rw-line-text {
      flex: 0 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .recentworks-caption .rw-line-text em {
      font-style: italic;
    }

    .recentworks-caption .rw-line-text a {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: 1px;
      text-decoration-color: rgba(0,0,0,0.3);
    }

    .recentworks-caption .rw-line-text a:hover {
      text-decoration-color: #1a1a1a;
    }

    .recentworks-caption .rw-counter {
      flex: 0 0 auto;
      color: rgba(0,0,0,0.55);
      font-size: 0.8rem;
    }

    body.recent-landing main {
      padding-bottom: 0;
    }

    @media (min-width: 701px) {
      .recentworks-section {
        padding-top: 0;
        padding-bottom: 0;
      }
    }

    @media (max-width: 700px) {
      .recentworks-section {
        padding: 0;
      }
      .recentworks-carousel-arrow {
        width: 40px;
        height: 40px;
        font-size: 1.4rem;
      }
      .recentworks-carousel-prev { left: 0.4rem; }
      .recentworks-carousel-next { right: 0.4rem; }
      .recentworks-caption {
        bottom: 1rem;
        width: calc(100% - 1.5rem);
        max-width: calc(100% - 1.5rem);
        padding: 0.45rem 0.8rem;
        font-size: 0.8rem;
        gap: 0.4rem;
        white-space: normal;
        flex-wrap: wrap;
      }
      .recentworks-caption .rw-line-text {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
      }
      .recentworks-caption .rw-counter {
        font-size: 0.7rem;
      }
    }

    .info-section {
      max-width: 1200px;
      margin: 0 auto;
      padding-top: 3rem;
      overflow: visible;
    }

    /* Little toy bug sitting over the top-left corner of the portrait
       photo. The gif itself is already an animation (the bug's own
       movement), so it just sits in place rather than being pushed
       around with CSS — no extra motion needed on top of it. */
    .info-portrait {
      position: relative;
    }

    .info-bug {
      position: absolute;
      top: -20px;
      left: -20px;
      width: 64px;
      height: 64px;
      z-index: 2;
      pointer-events: none;
    }

    .info-header {
      display: flex;
      gap: 3rem;
      align-items: stretch;
      margin-bottom: 2rem;
    }

    .info-portrait {
      flex: 0 0 300px;
      display: flex;
      flex-direction: column;
    }

    .info-portrait > img:not(.info-bug) {
      width: 100%;
      flex: 1;
      object-fit: cover;
      display: block;
    }

    .photo-credit {
      font-size: 0.75rem;
      color: var(--text-secondary);
      margin-top: 0.4rem;
      flex-shrink: 0;
    }

    .info-main {
      flex: 1;
    }

    .info-bio {
      margin-bottom: 2.5rem;
      line-height: 1.7;
      font-size: 1rem;
    }

    .info-bio p {
      margin-bottom: 1rem;
    }

    .info-bio p:last-child {
      margin-bottom: 0;
    }

    .info-section h2 {
      font-size: 1rem;
      font-weight: 500;
      margin-bottom: 1.5rem;
      margin-top: 3rem;
    }

    .info-section h2:first-child {
      margin-top: 0;
    }

    .info-section p {
      margin-bottom: 1rem;
      line-height: 1.4;
      font-size: 1rem;
    }

    .info-section a {
      color: var(--text-color);
      text-decoration: underline;
      text-underline-offset: 4px;
      text-decoration-thickness: 1px;
      text-decoration-color: var(--border-medium);
    }

    .info-section a:hover { text-decoration-color: var(--text-color); }

    .info-links {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 0.25rem 1.25rem;
      font-size: 1rem;
      margin-bottom: 1.5rem;
    }

    .info-links a {
      display: inline;
      width: fit-content;
      font-size: 1rem;
    }

    @media (max-width: 700px) {
      .info-header {
        flex-direction: column;
        gap: 2rem;
        align-items: center;
      }
      .info-portrait {
        flex: none;
        width: 100%;
        max-width: none;
      }
      .info-portrait > img:not(.info-bug) {
        flex: none;
        height: auto;
        object-fit: contain;
      }
      .info-bug {
        width: 84px;
        height: 84px;
        top: -26px;
        left: -26px;
      }
      .info-section {
        font-size: 0.9rem;
      }
    }

    .info-cv {
      margin-top: 3rem;
    }

    .info-divider {
      border: none;
      border-top: 2px solid var(--border-medium);
      margin: 3rem 0;
      margin-left: calc(-50vw + 50%);
      margin-right: calc(-50vw + 50%);
    }

    .cv-columns {
      columns: 2;
      column-gap: 3rem;
    }

    .cv-section {
      break-inside: avoid;
      margin-bottom: 2.5rem;
    }

    @media (max-width: 700px) {
      .cv-columns {
        columns: 1;
      }
    }

    .cv-section h3 {
      font-size: 1rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 0.75rem;
      color: var(--text-color);
    }

    .cv-section p {
      margin-bottom: 0.15rem;
      line-height: 1.5;
      font-size: 1rem;
    }

    .cv-section a {
      color: var(--text-color);
      text-decoration: underline;
      text-underline-offset: 4px;
      text-decoration-thickness: 1px;
      text-decoration-color: var(--border-medium);
    }

    .cv-section a:hover {
      text-decoration-color: var(--text-color);
    }

    .cv-item {
      margin-left: 0;
      margin-bottom: 0.15rem;
      display: flex;
      gap: 0;
    }

    .cv-year {
      min-width: 3.2em;
      flex-shrink: 0;
      color: var(--text-color);
    }

    .cv-year-blank {
      min-width: 3.2em;
    }

    .cv-item a, .cv-item .cv-entry {
      flex: 1;
    }

    .cv-lang {
      font-size: 0.8em;
      opacity: 0.5;
      margin-left: 0.3em;
    }

    .cv-item-title {
      font-style: italic;
    }

    /* Modal */
    .modal {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(240, 240, 240, 0.92);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 2000;
      opacity: 0;
      transition: opacity 0.25s ease;
      text-align: center;
      overflow: hidden;
    }

    .modal.active { 
      display: flex;
      flex-direction: column;
      opacity: 1;
    }

    .modal.closing {
      opacity: 0;
    }

    .modal-close {
      position: fixed;
      top: 2rem; right: 2rem;
      background: none;
      border: none;
      font-size: 1.1rem;
      padding: 0.5rem;
      cursor: pointer;
      color: var(--text-color);
      z-index: 2001;
    }

    .modal-magnifier-btn {
      position: fixed;
      top: 2rem; right: 4.5rem;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-secondary);
      z-index: 2001;
      padding: 0.25rem;
      transition: color 0.2s ease;
    }

    .modal-magnifier-btn:hover,
    .modal-magnifier-btn.active {
      color: var(--text-color);
    }

    .magnifier-lens {
      display: none;
      position: fixed;
      width: 500px;
      height: 500px;
      border: 2px solid var(--text-secondary);
      background-repeat: no-repeat;
      pointer-events: none;
      z-index: 2002;
      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    }

    @media (max-width: 700px) {
      .modal-magnifier-btn {
        display: none;
      }
    }

    .modal-nav-bottom {
      position: fixed;
      bottom: 1.5rem;
      right: 2rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      z-index: 2001;
    }

    .modal-nav-btn {
      background: none;
      border: none;
      font-size: 1.5rem;
      color: var(--text-secondary);
      cursor: pointer;
      padding: 0.25rem 0.4rem;
      line-height: 1;
      transition: color 0.2s ease;
    }

    .modal-nav-btn:hover {
      color: var(--text-color);
    }

    .modal-counter {
      font-size: 0.95rem;
      color: var(--text-secondary);
      letter-spacing: 0.05em;
      white-space: nowrap;
    }

    .modal-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: left;
      padding: 2rem 2rem 0 2rem;
      position: relative;
      overflow: hidden;
    }

    .modal-image-container {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      max-height: 100%;
      max-width: 90vw;
      overflow: hidden;
    }

    .modal-main-image {
      width: auto;
      max-width: 100%;
      max-height: calc(100vh - 220px);
      object-fit: contain;
      display: block;
      touch-action: none;
      cursor: pointer;
    }

    .modal-bottom {
      flex-shrink: 0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-end;
      padding: 1rem 2.5rem 1.5rem;
      gap: 2rem;
      width: 100%;
      max-width: 900px;
      margin: 0 auto;
    }
    
    .modal-info {
      flex: 0 0 auto;
      text-align: left;
      white-space: nowrap;
    }

    @media (max-width: 700px) {
      .modal-info {
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
      }
    }

    /* Object captions (esp. context) tend to run much longer than a
       Drawings caption, so a single nowrap line would eat most of the
       modal width and squeeze the thumbnail strip into many cramped
       rows. Cap the width and let it wrap instead. Also dock the image
       against the caption/thumbnail row instead of centering it, so
       there's no dead vertical gap above the caption when the image is
       shorter than the max reserved height. */
    #object-modal .modal-content {
      justify-content: flex-end;
    }

    #object-modal .modal-info {
      white-space: normal;
      max-width: 340px;
    }

    #object-modal .additional-images {
      justify-content: flex-start;
    }

    #object-modal-context a {
      color: var(--text-secondary);
      text-decoration: none;
      border-bottom: 1px solid var(--border-subtle);
    }

    #object-modal-context a:hover {
      color: var(--text-color);
      border-bottom-color: var(--text-color);
    }


    .additional-images {
      flex: 1 1 auto;
      display: flex;
      gap: 0.35rem;
      justify-content: center;
      align-items: flex-end;
      flex-wrap: wrap;
    }
    
    @media (max-width: 700px) {
      .modal-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.75rem 1rem 4.5rem 1rem;
      }
      .additional-images {
        justify-content: flex-start;
      }
      .modal-close {
        top: 0.75rem;
        right: 0.75rem;
        font-size: 1.375rem;
        padding: 0.5rem;
      }
      .modal-content {
        padding: 1rem 0.5rem 0 0.5rem;
        overflow: visible;
      }
      .modal-image-container {
        max-width: 98vw;
        overflow: visible;
      }
      .modal-main-image {
        max-height: 60vh;
        max-width: 98vw;
      }
      .modal-nav-bottom {
        bottom: 0.75rem;
        right: 1rem;
      }
      /* Full screen modal - prevent gap and background scroll */
      .modal {
        overscroll-behavior: contain;
      }
      .modal.active {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
      }
    }

    @media (max-width: 700px) {
      /* The object modal can have longer captions and more thumbnail rows
         than a Drawings modal, so a fixed vh height for the image easily
         pushes the caption/thumbnails below the fold on a vertical photo.
         Let the image shrink to fill whatever space is actually left
         (min-height: 0 lets these flex items shrink past their content
         size) instead of guessing a fixed height, so the whole thing
         fits on one screen without scrolling. */
      #object-modal .modal-content {
        min-height: 0;
      }
      #object-modal .modal-image-container {
        min-height: 0;
        max-height: 100%;
      }
      #object-modal .modal-main-image {
        max-height: 100%;
        max-width: 98vw;
      }
    }

    .modal-info h2 {
      font-size: 0.95rem;
      font-weight: normal;
      font-style: italic;
      margin-bottom: 0;
      color: var(--text-color);
    }

    .modal-info p {
      font-size: 0.95rem;
      color: var(--text-secondary);
      margin-bottom: 0;
      line-height: 1.3;
    }

    .modal-info .exhibited {
      margin-top: 0;
      font-size: 0.95rem;
      color: var(--text-secondary);
      font-style: normal;
    }

    .modal-info .exhibited a {
      color: var(--text-secondary);
      text-decoration: none;
      border-bottom: 1px solid var(--border-subtle);
    }

    .modal-info .exhibited a:hover {
      color: var(--text-color);
      border-bottom-color: var(--text-color);
    }

    /* Video/Moving Image grid */
    .video-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem 2rem;
      max-width: 1000px;
      margin: 0 auto;
    }

    @media (max-width: 700px) {
      .video-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
      }
    }

    .video-card {
      cursor: pointer;
      width: 100%;
      padding-bottom: 1rem;
      text-decoration: none;
      color: inherit;
      display: block;
    }

    .video-thumb-container {
      position: relative;
      overflow: hidden;
      aspect-ratio: var(--video-grid-aspect-ratio, 16 / 9);
    }

    .video-thumb-container .video-thumb {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .video-thumb-container .video-preview-gif {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .video-thumb-container .video-preview-gif.visible {
      opacity: 1;
    }

    .video-thumb-container .placeholder-thumb {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, var(--border-subtle) 0%, var(--bg-color) 50%, var(--border-subtle) 100%);
      background-size: 200% 200%;
      animation: shimmer 1.5s ease-in-out infinite;
    }

    @keyframes shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    .video-card .caption {
      margin-top: 0.75rem;
      margin-bottom: 0;
      font-size: 0.9rem;
      color: var(--text-color);
      line-height: 1.4;
    }

    .video-card .caption .caption-title {
      font-weight: 500;
      text-decoration: underline;
      text-underline-offset: 4px;
      text-decoration-thickness: 1px;
      text-decoration-color: var(--border-medium);
    }

    .video-card .caption .caption-detail {
      color: var(--text-secondary);
      margin-top: 0.15rem;
    }

    .video-card .caption .caption-date {
      color: var(--text-secondary);
    }

    .video-card .video-synopsis {
      font-size: 0.85rem;
      color: var(--text-secondary);
      line-height: 1.4;
      margin-top: 0.25rem;
    }

    .video-links {
      margin: 1.5rem 0;
    }

    .video-links a {
      display: inline-block;
      margin-right: 1.5rem;
      color: var(--text-color);
      text-decoration: underline;
      font-size: 0.95rem;
    }

    .video-links a:hover {
      opacity: 0.7;
    }

    .video-link-item {
      margin-bottom: 0.25rem;
    }

    .video-link-item.has-embed {
      margin-bottom: 1.5rem;
      margin-top: 1.5rem;
    }

    .video-link-item .vimeo-embed {
      width: 100%;
      max-width: 700px;
      margin-bottom: 0.5rem;
    }

    .video-link-item .vimeo-embed iframe {
      width: 100%;
      aspect-ratio: 16 / 9;
      border: none;
    }

    .video-link-item .bandcamp-embed {
      width: 100%;
      max-width: 500px;
      margin-bottom: 0.5rem;
    }

    .video-link-item .bandcamp-embed iframe {
      width: 100%;
      height: 470px;
      border: none;
    }

    /* Sound gallery */
    #sound-gallery {
      max-width: 700px;
      margin: 0 auto;
      padding: 0 2rem 2rem 2rem;
    }

    .sound-section {
      margin-bottom: 4rem;
    }

    .sound-section-title {
      font-size: 0.9rem;
      font-weight: normal;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 1.5rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid rgba(128,128,128,0.2);
    }

    .sound-section-items {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    .sound-item {
      width: 100%;
    }

    .sound-item .bandcamp-embed iframe {
      width: 100%;
      height: 350px;
      border: none;
    }

    .sound-item .radio-embed {
      background: #f5f5f5;
      border-radius: 4px;
      overflow: hidden;
    }

    .sound-item .radio-embed iframe {
      width: 100%;
      height: 700px;
      border: none;
    }

    .sound-item .radio-embed .radio-link {
      display: block;
      padding: 0.75rem 1rem;
      text-align: center;
      color: var(--text-color);
      text-decoration: none;
      font-size: 0.85rem;
      border-top: 1px solid rgba(0,0,0,0.1);
    }

    .sound-item .radio-embed .radio-link:hover {
      background: var(--hover-bg);
    }

    .sound-item .soundcloud-embed iframe {
      width: 100%;
      height: 166px;
      border: none;
    }

    .sound-item .mixcloud-embed iframe {
      width: 100%;
      height: 120px;
      border: none;
    }

    .sound-item .radio-link-card {
      background: #f5f5f5;
      border-radius: 4px;
      overflow: hidden;
      transition: background 0.2s ease;
    }

    .sound-item .radio-link-card:hover {
      background: #eee;
    }

    .sound-item .radio-link-card a {
      display: block;
      text-decoration: none;
      color: var(--text-color);
      padding: 1.5rem;
    }

    .sound-item .radio-link-card-content {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .sound-item .radio-link-card-icon {
      width: 50px;
      height: 50px;
      background: #333;
      color: var(--bg-color);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      flex-shrink: 0;
    }

    .sound-item .radio-link-card-source {
      font-size: 0.8rem;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 0.25rem;
    }

    .sound-item .radio-link-card-title {
      font-size: 1.1rem;
      font-weight: 500;
    }

    .sound-item .caption {
      margin-top: 0.5rem;
      font-size: 0.9rem;
      color: var(--text-secondary);
    }

    .video-link-item .link-caption {
      font-size: 0.9rem;
      color: var(--text-secondary);
      margin-top: 0.5rem;
    }

    .video-link-item .external-link {
      display: inline-block;
      color: var(--text-color);
      text-decoration: underline;
      font-size: 0.95rem;
    }

    .video-link-item .external-link:hover {
      opacity: 0.7;
    }

    #video-stills-content.installation-thumb-grid:not(.single-view) {
      gap: 0.75rem;
      grid-template-columns: repeat(6, 1fr);
    }

    @media (max-width: 900px) {
      #video-stills-content.installation-thumb-grid:not(.single-view) {
        grid-template-columns: repeat(5, 1fr);
      }
    }

    @media (max-width: 700px) {
      #video-stills-content.installation-thumb-grid:not(.single-view) {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    #video-stills-content img {
      width: 100%;
      height: auto;
      object-fit: contain;
      cursor: pointer;
      display: block;
    }

    #video-stills-content img:hover {
      opacity: 0.85;
    }

    #video-stills-content.single-view img {
      aspect-ratio: auto;
      max-height: 80vh;
      object-fit: contain;
    }

    /* Video Project Page */
    .video-project-page {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: var(--bg-color);
      z-index: 1500;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .video-project-page.active { display: block; }

    .video-project-page .installation-page-nav {
      background: #e8d44d;
      border-bottom: 1px solid rgba(0,0,0,0.2);
    }

    .video-project-page .work-subnav {
      background: #ece09a;
      border-bottom: 1px solid rgba(0,0,0,0.2);
    }

    .video-project-page .work-year-nav {
      background: #e9e5c0;
      border-bottom: 1px solid rgba(0,0,0,0.2);
    }

    /* Installation Page - integrated page view */
    .installation-page {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: var(--bg-color);
      z-index: 1500;
      overflow-y: scroll;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
    }

    .installation-page.active { display: block; }

    .installation-page-nav {
      position: sticky;
      top: 0;
      z-index: 101;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 3rem;
      padding: 0 3rem;
      height: 42px;
      box-sizing: border-box;
      border-bottom: 1px solid rgba(0,0,0,0.2);
      background: #e8d44d;
    }

    .installation-page-nav a {
      font-size: 0.95rem;
      color: rgba(0,0,0,0.55);
      text-decoration: none;
      padding: 0.5rem 0;
      transition: all 0.3s ease;
      letter-spacing: 0.05em;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
    }

    .installation-page-nav a::after {
      content: attr(data-text);
      font-weight: 500;
      height: 0;
      overflow: hidden;
      visibility: hidden;
      pointer-events: none;
      letter-spacing: 0.05em;
    }

    .installation-page-nav a:hover {
      color: #111;
    }

    .installation-page-nav a.active {
      color: #111;
      font-weight: 500;
      text-decoration: underline;
      text-underline-offset: 6px;
      text-decoration-thickness: 1px;
    }

    .installation-page-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 2rem 6rem;
      box-sizing: border-box;
    }

    .inst-nav-arrow {
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1600;
      background: none;
      border: none;
      font-size: 3rem;
      color: var(--text-secondary);
      cursor: pointer;
      padding: 1rem 0.5rem;
      transition: color 0.2s ease;
      line-height: 1;
      display: none;
    }

    .inst-nav-arrow.visible {
      display: block;
    }

    .inst-nav-arrow:hover {
      color: rgba(0,0,0,0.6);
    }

    .inst-nav-prev, .video-nav-prev { left: 0.75rem; }
    .inst-nav-next, .video-nav-next { right: 0.75rem; }

    .inst-nav-arrow:disabled {
      opacity: 0;
      pointer-events: none;
    }

    @media (max-width: 700px) {
      .inst-nav-arrow {
        display: none !important;
      }
    }

    /* Override sticky positions for subnavs inside installation page */
    .installation-page .work-subnav {
      position: sticky;
      top: 42px;
      z-index: 100;
      background: #ece09a;
      margin-left: 0;
      margin-right: 0;
      margin-bottom: 0;
      border-bottom: 1px solid rgba(0,0,0,0.2);
    }

    .installation-page .work-year-nav {
      position: sticky;
      top: 84px;
      z-index: 99;
      background: #e9e5c0;
      margin-left: 0;
      margin-right: 0;
      margin-bottom: 0;
      border-bottom: 1px solid rgba(0,0,0,0.2);
      padding-top: 0.75rem;
      padding-bottom: 0.75rem;
    }

    .installation-hero {
      margin: 2rem auto;
      max-width: 50%;
      display: none; /* Hidden - start with text instead */
    }

    .installation-hero img {
      width: 100%;
      height: auto;
      display: block;
    }

    .installation-info-section {
      max-width: 800px;
      margin: 0 auto 2rem;
      padding-top: 1.5rem;
    }

    .installation-info {
      display: none;
      padding: 1.5rem 0 1rem;
    }

    .installation-info h2 {
      font-size: 1rem;
      font-weight: normal;
      margin-bottom: 0.5rem;
      color: var(--text-color);
    }

    .installation-info .venue {
      font-size: 1rem;
      color: var(--text-color);
      margin-bottom: 0.25rem;
    }

    .installation-info .date {
      font-size: 1rem;
      color: var(--text-color);
      margin-bottom: 0.25rem;
    }

    .installation-info .materials {
      font-size: 1rem;
      color: var(--text-color);
    }

    .installation-text {
      max-width: 700px;
      margin: 0 auto 2rem;
      line-height: 1.4;
      font-size: 1rem;
      color: var(--text-color);
      padding: 0;
    }

    .installation-text p {
      margin-bottom: 0.75rem;
    }

    .installation-text p:empty {
      margin-bottom: 0.25rem;
    }

    .inst-text-header {
      width: fit-content;
      margin: 0 auto 0.75rem;
      text-align: left;
    }

    .inst-text-header p {
      margin-bottom: 0;
    }

    .installation-shots-section,
    .installation-extras-section {
      margin-bottom: 4rem;
    }

    .installation-shots-section h3,
    .installation-extras-section h3 {
      font-size: 0.85rem;
      font-weight: normal;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 0.5rem;
      text-align: center;
    }

    .other-venues-caption {
      max-width: 800px;
      margin: 0 auto 2rem;
      font-size: 0.95rem;
      line-height: 1.4;
    }

    .other-venues-caption:empty {
      display: none;
    }

    .other-venues-caption a {
      color: var(--text-color);
      text-decoration: none;
      display: block;
    }

    .other-venues-caption a:hover {
      text-decoration: underline;
    }

    .other-venues-caption p {
      margin-bottom: 1rem;
    }

    .other-venues-caption p:last-child {
      margin-bottom: 0;
    }

    .installation-links {
      margin-top: 3rem;
      display: flex;
      flex-direction: column;
      gap: 2rem;
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
    }

    .installation-links:empty {
      display: none;
    }

    .installation-link-item {
      text-align: left;
    }

    .installation-link-item .link-preview {
      display: block;
      max-width: 100%;
      cursor: pointer;
      transition: opacity 0.2s ease;
    }

    .installation-link-item .link-preview:hover {
      opacity: 0.8;
    }

    .installation-link-item .vimeo-embed {
      position: relative;
      padding-bottom: 56.25%; /* 16:9 aspect ratio */
      height: 0;
      overflow: hidden;
    }

    .installation-link-item .vimeo-embed iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }

    .installation-link-item .link-caption {
      margin-top: 0.75rem;
      font-size: 0.9rem;
      color: var(--text-color);
      text-align: left;
    }

    .installation-link-item a.external-link {
      display: inline-block;
      color: var(--text-color);
      text-decoration: underline;
      font-size: 0.95rem;
      padding: 0.5rem 0;
      transition: opacity 0.2s ease;
    }

    .installation-link-item a.external-link:hover {
      opacity: 0.7;
    }

    .installation-related-links {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      max-width: 900px;
      margin: 0 auto;
      margin-top: 0.75rem;
    }

    #section-related,
    #video-section-exhibited,
    #video-section-related {
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
    }

    .installation-related-item {
      text-align: left;
    }

    .installation-related-item a {
      color: var(--text-color);
      text-decoration: underline;
      font-size: 0.95rem;
      transition: opacity 0.2s ease;
    }

    .installation-related-item a:hover {
      opacity: 0.7;
    }

    .installation-related-item .related-caption {
      font-size: 0.9rem;
      color: var(--text-secondary);
      margin-top: 0.2rem;
    }

    .installation-view-toggle {
      display: flex;
      justify-content: flex-end;
      gap: 0.5rem;
      margin-bottom: 1rem;
      position: sticky;
      z-index: 50;
      pointer-events: none;
      padding: 0.5rem 0;
    }

    .installation-view-toggle .view-btn {
      pointer-events: auto;
      background: var(--bg-color);
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    /* Sticky top offset accounts for stacked sticky navs */
    .installation-page .installation-view-toggle {
      top: 126px; /* nav 42 + subnav 42 + year-nav 42 */
    }

    .video-project-page .installation-view-toggle {
      top: 84px; /* nav 42 + subnav 42 */
    }

    @media (max-width: 700px) {
      .installation-page .installation-view-toggle,
      .video-project-page .installation-view-toggle {
        top: 48px; /* mobile fixed nav 42 + 6px buffer */
      }
    }

    .view-btn {
      background: none;
      border: 1px solid var(--text-secondary);
      padding: 0.4rem;
      cursor: pointer;
      color: var(--text-secondary);
      border-radius: 3px;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .view-btn:hover {
      border-color: var(--text-color);
      color: var(--text-color);
    }

    .view-btn.active {
      border-color: var(--text-color);
      color: var(--text-color);
      background: var(--bg-color);
    }

    .installation-thumb-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 1rem;
    }

    .installation-thumb-grid.single-view {
      grid-template-columns: 1fr;
      max-width: 800px;
      margin: 0 auto;
      gap: 1.5rem;
    }

    .installation-thumb-grid img {
      width: 100%;
      aspect-ratio: 1;
      object-fit: contain;
      cursor: pointer;
      display: block;
    }

    .installation-thumb-grid video {
      width: 100%;
      aspect-ratio: 1;
      object-fit: contain;
      cursor: pointer;
      background: #000;
      display: block;
    }

    .installation-thumb-grid.single-view img {
      aspect-ratio: auto;
      max-height: 80vh;
      object-fit: contain;
    }

    .installation-thumb-grid.single-view video {
      aspect-ratio: auto;
      max-height: 80vh;
      object-fit: contain;
    }

    .installation-thumb-grid img,
    .installation-thumb-grid video {
      transition: opacity 0.15s ease;
    }

    .installation-thumb-grid img:hover,
    .installation-thumb-grid video:hover {
      opacity: 0.97;
    }

    @media (max-width: 900px) {
      .installation-thumb-grid:not(.single-view) {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    @media (max-width: 700px) {
      .installation-thumb-grid:not(.single-view) {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    /* Individual works grid - Finder-style square cells */
    .individual-works-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 1.5rem;
    }

    .individual-works-grid img {
      width: 100%;
      aspect-ratio: 1;
      object-fit: contain;
      cursor: pointer;
      display: block;
    }

    .individual-works-grid video {
      width: 100%;
      aspect-ratio: 1;
      object-fit: contain;
      cursor: pointer;
      background: #000;
      display: block;
    }

    .individual-works-grid img:hover,
    .individual-works-grid video:hover {
      opacity: 0.85;
    }

    .individual-works-grid.single-view {
      grid-template-columns: 1fr;
      max-width: 800px;
      margin: 0 auto;
      gap: 2rem;
    }

    .individual-works-grid.single-view img,
    .individual-works-grid.single-view video {
      aspect-ratio: auto;
      max-height: 80vh;
      object-fit: contain;
    }

    @media (max-width: 900px) {
      .individual-works-grid:not(.single-view) {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    @media (max-width: 700px) {
      .individual-works-grid:not(.single-view) {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    @media (max-width: 500px) {
      .installation-thumb-grid:not(.single-view),
      .individual-works-grid:not(.single-view) {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    .additional-images img {
      width: 45px; height: 45px;
      object-fit: cover;
      cursor: pointer;
      opacity: 0.6;
      transition: opacity 0.3s ease;
      border: 1px solid transparent;
    }

    .additional-images img:hover,
    .additional-images img.active {
      opacity: 1;
      border-color: var(--text-color);
    }

    .lightbox {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(250, 250, 250, 0.85);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 3000;
      cursor: pointer;
      opacity: 0;
      transition: opacity 0.25s ease, backdrop-filter 0.25s ease;
    }

    .lightbox.active { 
      display: flex; 
      align-items: center; 
      justify-content: center;
      opacity: 1;
    }

    .lightbox.closing {
      opacity: 0;
      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);
    }

    .lightbox img, .lightbox video {
      max-width: 96%;
      max-height: 90%;
      object-fit: contain;
    }
    
    .lightbox img {
      cursor: pointer;
      touch-action: none;
    }
    
    .lightbox video {
      background: #000;
    }
    
    .lightbox-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      gap: 0.75rem;
      padding: 1rem;
      box-sizing: border-box;
      position: relative;
    }

    @media (max-width: 700px) {
      .lightbox img, .lightbox video {
        max-width: 100%;
        max-height: 92%;
      }
      .lightbox-content {
        padding: 0.5rem;
        gap: 0.5rem;
      }
    }

    .lightbox-caption {
      color: var(--text-color);
      font-size: 0.95rem;
      text-align: center;
      max-width: 90%;
      padding: 0.5rem 1rem;
      position: absolute;
      bottom: 1.5rem;
      left: 50%;
      transform: translateX(-50%);
    }

    [data-theme="dark"] .lightbox-caption {
    }

    .lightbox-caption:empty {
      display: none;
    }

    .lightbox-close {
      position: fixed;
      top: 1.25rem;
      right: 1.5rem;
      background: none;
      border: none;
      font-size: 1.8rem;
      line-height: 1;
      color: var(--text-secondary);
      cursor: pointer;
      z-index: 3100;
      padding: 0.25rem 0.4rem;
      transition: color 0.2s ease;
    }

    .lightbox-close:hover {
      color: var(--text-color);
    }

    .lightbox-nav-bottom {
      position: fixed;
      bottom: 1.5rem;
      right: 2rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      z-index: 3100;
    }

    .lightbox-nav-btn {
      background: none;
      border: none;
      font-size: 1.5rem;
      color: var(--text-secondary);
      cursor: pointer;
      padding: 0.25rem 0.4rem;
      line-height: 1;
      transition: color 0.2s ease;
    }

    .lightbox-nav-btn:hover {
      color: var(--text-color);
    }

    .lightbox-counter {
      font-size: 0.95rem;
      color: var(--text-secondary);
      letter-spacing: 0.05em;
      white-space: nowrap;
      font-family: inherit;
    }

    .misc-category {
      margin-bottom: 5rem;
    }

    /* Misc: Diagrams */
    .diagrams-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
      max-width: 1000px;
      margin: 2rem auto;
      padding: 0 3rem;
    }

    .diagram-item img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: contain;
      background: var(--bg-color);
      display: block;
      cursor: pointer;
      margin-bottom: 0.6rem;
    }

    .diagram-caption {
      font-size: 0.85rem;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    @media (max-width: 700px) {
      .diagrams-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0 1.5rem;
      }
    }

    /* Misc: Objects */
    .objects-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 3rem 2.5rem;
      max-width: 1100px;
      margin: 2rem auto;
      padding: 0 3rem;
    }

    .object-card {
      display: block;
      color: inherit;
      text-decoration: none;
      cursor: pointer;
    }

    .object-card img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      display: block;
      margin-bottom: 0.8rem;
      transition: opacity 0.2s ease;
    }

    .object-card:hover img {
      opacity: 0.85;
    }

    .object-card .caption {
      margin-top: 0.75rem;
      margin-bottom: 0;
      font-size: 0.9rem;
      color: var(--text-color);
      line-height: 1.4;
    }

    .object-card .caption .caption-title {
      font-weight: 500;
      text-decoration: underline;
      text-underline-offset: 4px;
      text-decoration-thickness: 1px;
      text-decoration-color: var(--border-medium);
    }

    .object-card .caption .caption-detail {
      color: var(--text-secondary);
      margin-top: 0.15rem;
    }

    .object-card .caption .caption-date {
      color: var(--text-secondary);
    }

    .object-context {
      font-size: 0.85rem;
      color: var(--text-secondary);
      line-height: 1.5;
      margin: 0.4rem 0 0;
    }

    @media (max-width: 700px) {
      .objects-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0 1.5rem;
      }
    }

    /* Misc: Texts (PDFs) */
    .texts-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem;
      max-width: 1000px;
      margin: 2rem auto;
      padding: 0 3rem;
    }

    .text-card {
      display: block;
      color: inherit;
      text-decoration: none;
    }

    .text-card img {
      width: 100%;
      aspect-ratio: 3 / 4;
      object-fit: cover;
      display: block;
      margin-bottom: 0.6rem;
      border: 1px solid var(--border-medium);
      transition: opacity 0.2s ease;
    }

    .text-card:hover img {
      opacity: 0.85;
    }

    .text-title {
      font-size: 0.85rem;
      font-style: italic;
      color: var(--text-color);
      margin-bottom: 0.2rem;
    }

    .text-context {
      font-size: 0.8rem;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    @media (max-width: 700px) {
      .texts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        padding: 0 1.5rem;
      }
    }

    .ac-container {
      display: flex;
      align-items: flex-start;
      max-width: 1200px;
      margin: 0 auto;
      padding: 1rem 2rem 2rem 220px;
      gap: 3rem;
      font-family: Arial, Helvetica, sans-serif;
    }

    #work-alphabet-clock {
      background: #eaeaea;
      padding-top: 0;
      margin-left: -3rem;
      margin-right: -3rem;
      padding-left: 3rem;
      padding-right: 3rem;
    }
    [data-theme="dark"] #work-alphabet-clock {
      background: #1a1a1a;
    }

    .ac-toc {
      display: none;
      position: fixed;
      left: max(14px, calc((100vw - 1200px) / 2));
      top: 50%;
      transform: translateY(-50%);
      width: 180px;
      z-index: 10;
      padding: 1.5rem 1rem 1.5rem 0;
      background: #eaeaea;
    }

    .ac-toc *,
    .ac-toc *::before,
    .ac-toc *::after {
      border: none !important;
      box-shadow: none !important;
      outline: none !important;
      text-decoration: none !important;
    }

    [data-theme="dark"] .ac-toc {
      background: #1a1a1a;
    }

    /* Divider between sidebar and content - CSS border on toc */

    .ac-toc-inner {
      display: block;
      background: transparent;
    }

    .ac-toc-item {
      display: block;
      margin-bottom: 0.2rem;
      background: transparent;
      border: none;
    }

    .ac-toc-link {
      color: var(--text-secondary);
      text-decoration: none !important;
      font-size: 0.85rem;
      padding: 0.3rem 0;
      display: flex;
      align-items: center;
      gap: 0.3rem;
      transition: all 0.2s ease;
      background: transparent;
      border: none;
      outline: none;
    }

    .ac-toc-link:hover {
      color: var(--text-color);
      text-decoration: none !important;
    }

    .ac-toc-link.active {
      color: var(--text-color);
      font-weight: 600;
      text-decoration: none !important;
    }

    .ac-toc-child-link.active {
      color: var(--text-color);
      font-weight: 600;
      opacity: 1;
    }

    .ac-toc-toggle {
      font-size: 0.7rem;
      transition: transform 0.2s ease;
      width: 0.8rem;
    }

    .ac-toc-link.expanded .ac-toc-toggle {
      transform: rotate(90deg);
    }

    .ac-toc-children {
      display: none;
      padding-left: 1.1rem;
      max-height: 300px;
      overflow: hidden;
      background: transparent;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .ac-toc-children::-webkit-scrollbar {
      display: none;
    }

    .ac-toc-children.expanded {
      display: block;
      background: transparent;
    }

    .ac-toc-child-link {
      display: block;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 0.8rem;
      padding: 0.2rem 0;
      opacity: 0.8;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      background: transparent;
      border: none;
    }

    .ac-toc-child-link:hover {
      color: var(--text-color);
      opacity: 1;
    }

    .ac-content {
      flex: 1;
      min-width: 0;
    }

    .ac-section {
      margin-bottom: 1rem;
      padding-bottom: 0.5rem;
    }

    .ac-section:last-child {
      border-bottom: none;
    }

    .ac-section-header {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      cursor: pointer;
      padding: 0.25rem 0;
      margin-bottom: 0.75rem;
      user-select: none;
    }

    .ac-section.collapsible .ac-section-header:hover {
      opacity: 0.7;
    }

    .ac-section-toggle {
      font-size: 0.9rem;
      transition: transform 0.2s ease;
      width: 1rem;
    }

    .ac-section.collapsed .ac-section-header {
      margin-bottom: 0;
    }

    .ac-section.collapsed .ac-section-toggle {
      transform: rotate(0deg);
    }

    .ac-section:not(.collapsed) .ac-section-toggle {
      transform: rotate(90deg);
    }

    .ac-section-title {
      font-size: 1.3rem;
      font-weight: 600;
      font-style: italic;
      margin: 0;
      color: var(--text-color);
      background: rgba(255, 220, 180, 0.5);
      padding: 0.3rem 0.5rem;
      display: inline-block;
    }

    .ac-section-body {
      padding-top: 0.5rem;
    }

    .ac-section.collapsed .ac-section-body {
      display: none;
    }

    .ac-children {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .ac-child {
      margin: 1rem 0;
    }

    .ac-child-header {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      cursor: pointer;
      padding: 0.3rem 0;
      margin-bottom: 1rem;
      user-select: none;
    }

    .ac-child-header:hover {
      opacity: 0.7;
    }

    .ac-toggle {
      font-size: 0.75rem;
      transition: transform 0.2s ease;
      width: 0.8rem;
    }

    .ac-child:not(.collapsed) .ac-toggle {
      transform: rotate(90deg);
    }

    .ac-child-title {
      font-size: 1rem;
      font-weight: 600;
      margin: 0;
      background: rgba(180, 220, 240, 0.5);
      padding: 0.2rem 0.5rem;
      display: inline-block;
    }

    .ac-child-content {
      padding: 0.75rem 0;
    }

    .ac-child.collapsed .ac-child-content {
      display: none;
    }

    .ac-text {
      font-size: 0.9rem;
      line-height: 1.6;
      margin-bottom: 0.5rem;
      max-width: 900px;
    }

    .ac-text-file {
      max-width: 900px;
    }

    .ac-text-file .ac-text {
      margin-bottom: 0.75rem;
    }

    .ac-list {
      margin: 0.5rem 0;
      padding-left: 1.25rem;
    }

    .ac-list li {
      margin-bottom: 0.2rem;
      font-size: 0.85rem;
    }

    .ac-image {
      margin: 0.75rem 0;
      text-align: left;
    }

    .ac-image img {
      max-width: 420px;
      width: 100%;
      height: auto;
      display: block;
      object-fit: contain;
    }

    .ac-image figcaption {
      font-size: 0.75rem;
      color: var(--text-secondary);
      margin-top: 0.25rem;
    }

    .ac-image-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.5rem;
      margin: 1rem 0;
      max-width: 824px;
    }

    .ac-image-row .ac-image {
      margin: 0;
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      cursor: pointer;
      transition: opacity 0.2s;
    }

    .ac-image-row .ac-image:hover {
      opacity: 0.8;
    }

    .ac-image-row .ac-image img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      display: block;
      object-fit: contain;
    }

    .ac-image-grid {
      display: flex;
      gap: 0.4rem;
      margin: 1rem 0;
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    .ac-image-grid .ac-image {
      flex: 0 0 auto;
      margin: 0;
      width: 80px;
      height: 80px;
      overflow: hidden;
    }

    .ac-image-grid .ac-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .ac-video {
      margin: 0.75rem 0;
      max-width: 600px;
    }

    .ac-video-embed {
      position: relative;
      padding-bottom: 56.25%;
      height: 0;
      overflow: hidden;
    }

    .ac-video-embed iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .ac-video-caption {
      font-size: 0.75rem;
      color: var(--text-secondary);
      margin-top: 0.25rem;
    }

    .ac-video-link {
      margin: 0.5rem 0;
    }

    .ac-video-link a {
      color: var(--text-color);
      text-decoration: underline;
      font-size: 0.9rem;
    }

    .ac-video-link a:hover {
      opacity: 0.7;
    }

    .ac-link {
      margin: 0.5rem 0;
    }

    .ac-link a {
      color: var(--text-color);
      text-decoration: underline;
      font-size: 0.9rem;
    }

    .ac-link a:hover {
      opacity: 0.7;
    }

    .ac-image-grid .ac-image {
      cursor: pointer;
      transition: opacity 0.2s;
    }

    .ac-image-grid .ac-image:hover {
      opacity: 0.8;
    }

    @media (max-width: 900px) {
      .ac-container {
        flex-direction: column;
        padding: 1rem;
      }

      .ac-text {
        font-size: 0.8rem;
        line-height: 1.5;
        margin-bottom: 0.25rem;
      }

      .ac-section-title {
        font-size: 0.85rem;
        padding: 0.2rem 0.4rem;
      }

      .ac-child-title {
        font-size: 0.75rem;
        padding: 0.15rem 0.4rem;
      }

      .ac-section {
        margin-bottom: 0.5rem;
        padding-bottom: 0.25rem;
      }

      .ac-section-header {
        margin-bottom: 0.35rem;
      }

      .ac-section-body {
        padding-top: 0.25rem;
      }

      .ac-child {
        margin: 0.5rem 0;
      }

      .ac-child-header {
        margin-bottom: 0.5rem;
      }

      .ac-child-content {
        padding: 0.35rem 0;
      }

      .ac-children {
        gap: 0.5rem;
      }

      .ac-image {
        margin: 0.35rem 0;
      }

      .ac-image-row {
        margin: 0.5rem 0;
      }

      .ac-video {
        margin: 0.35rem 0;
      }

      .ac-video-caption,
      .ac-video-link,
      .ac-link,
      .ac-list {
        font-size: 0.8rem;
      }

      .ac-image figcaption {
        font-size: 0.65rem;
      }

      .ac-toc {
        position: static;
        transform: none;
        width: auto;
        left: auto;
        top: auto;
        height: auto;
        max-height: 40vh;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        padding-right: 0;
        background: transparent;
        border-right: none;
        border-bottom: 1px solid var(--border-faint);
      }

      .ac-content {
        border-left: none;
        padding-left: 0;
      }

      .ac-toc-children {
        max-height: 200px;
      }

      .ac-image-row {
        grid-template-columns: repeat(3, 1fr);
        max-width: none;
      }

      .ac-image-grid .ac-image {
        width: 80px;
        height: 80px;
      }

      /* Mobile subnav - allow wrapping */
      .work-subnav {
        flex-wrap: wrap;
        height: auto;
        gap: 0.5rem 1.5rem;
        padding: 0.5rem 1rem;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: 0;
      }

      .subnav-btn {
        font-size: 0.85rem;
      }

      .subnav-separator {
        display: none;
      }
    }

    @media (max-width: 500px) { 
      header, nav, .year-nav, main { padding-left: 1rem; padding-right: 1rem; }
      .email-form { flex-direction: column; align-items: center; }
      .email-form input { width: 100%; }
      .exhibition-images .placeholder-img { width: 100%; height: 180px; }

      .work-subnav {
        gap: 0.4rem 1rem;
        padding: 0.5rem 0.75rem;
      }

      .subnav-btn {
        font-size: 0.8rem;
      }

      .ac-image-row {
        grid-template-columns: repeat(3, 1fr);
      }

      .ac-image-grid .ac-image {
        width: 70px;
        height: 70px;
      }
    }
    /* Cursor — last rule for maximum cascade priority */
    a, button, select, summary, label[for],
    [onclick], [onclick] *,
    .nav-btn, .subnav-btn, .mobile-menu-item,
    .work-card, .work-card *,
    .installation-card, .installation-card *,
    .video-card, .video-card *,
    .info-links a, .info-section a, .cv-section a,
    .news-title a, .ac-link a, .ac-video-link a,
    .radio-link, .external-link,
    .dark-mode-toggle,
    .modal-close, .modal-nav-btn,
    .timeline-grid-controls button {
      cursor: pointer;
    }
    /* ── Accessibility ── */

    /* Skip navigation link */
    .skip-link {
      position: absolute;
      top: -100px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--text-color);
      color: var(--bg-color);
      padding: 0.5rem 1.5rem;
      z-index: 9999;
      font-size: 0.9rem;
      border-radius: 0 0 4px 4px;
      text-decoration: none;
      transition: top 0.2s;
    }
    .skip-link:focus {
      top: 0;
    }

    /* Focus styles for keyboard navigation */
    *:focus-visible {
      outline: 2px solid #4A90D9;
      outline-offset: 2px;
    }
    .nav-btn:focus-visible,
    .subnav-btn:focus-visible {
      outline-offset: -2px;
    }
    .modal-close:focus-visible,
    .modal-nav-btn:focus-visible,
    .inst-nav-arrow:focus-visible {
      outline-offset: -2px;
    }
    .work-card:focus-visible {
      outline-offset: 0;
      border-radius: 2px;
    }
    .dark-mode-toggle:focus-visible,
    .text-size-toggle:focus-visible {
      outline-offset: 0;
    }

    /* Improve contrast for inactive nav items */
    .nav-btn:not(:hover):not(.active) {
      color: rgba(0,0,0,0.55);
    }
    .subnav-btn:not(:hover):not(.active) {
      color: rgba(0,0,0,0.55);
    }
    [data-theme="dark"] .nav-btn:not(:hover):not(.active) {
      color: rgba(255,255,255,0.6);
    }
    [data-theme="dark"] .subnav-btn:not(:hover):not(.active) {
      color: rgba(255,255,255,0.6);
    }

    /* Reduced motion for users who prefer it */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
      html { scroll-behavior: auto; }
    }