:root {
        --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        --font-mono: 'Geist Mono', monospace;

        /* Modular Type Scale (Multiples of 2, No Fractions) */
        --text-2xl: clamp(24px, 5.5vw, 28px);
        --text-xl: 20px;
        --text-lg: 16px;
        --text-base: 14px;
        --text-sm: 12px;
        --text-xs: 10px;

        /* Leading / Line Heights */
        --leading-tight: 1.2;
        --leading-snug: 1.35;
        --leading-normal: 1.6;
        --leading-relaxed: 1.65;

        /* Letter Spacing */
        --tracking-tighter: -0.02em;
        --tracking-tight: -0.01em;

        /* Colors (WCAG AAA/AA Compliant) */
        --color-bg: #ffffff;
        --color-surface: #fafafa;
        --color-surface-hover: #f5f5f5;
        --color-text-primary: #171717;
        --color-text-secondary: #525252;
        --color-text-tertiary: #737373;
        --color-text-muted: #858585;
        --color-border: #ebebeb;
        --color-border-subtle: #e2e2e2;
        --color-border-hover: #d6d6d6;
        --color-accent-green: #16a34a;
        --color-accent-rose: #e11d48;
        --color-accent-amber: #d97706;
        --color-shadow: rgba(0, 0, 0, 0.08);
        --color-skeleton: #f0f0f0;
        --color-skeleton-shimmer: #e4e4e4;
        --color-border-frame: #ebebeb;
      }

      [data-theme="dark"] {
        --color-bg: #0e0e10;
        --color-surface: #17171a;
        --color-surface-hover: #232329;
        --color-text-primary: #f4f5f7;
        --color-text-secondary: #adafb8;
        --color-text-tertiary: #8d8f97;
        --color-text-muted: #82848c;
        --color-border: #26262c;
        --color-border-subtle: #1e1e23;
        --color-border-hover: #35353d;
        --color-accent-green: #22c55e;
        --color-accent-rose: #f43f5e;
        --color-accent-amber: #fbbf24;
        --color-shadow: rgba(0, 0, 0, 0.55);
        --color-skeleton: #1b1b20;
        --color-skeleton-shimmer: #2a2a31;
        --color-border-frame: #26262c;
      }

      html {
        scroll-behavior: smooth;
        scroll-padding-top: 72px;
        /* Always reserve the scrollbar gutter. Without it the centred column
           shifts ~7.5px whenever a short page (wall) drops the scrollbar that
           a long page (showcase, cases) had. */
        scrollbar-gutter: stable;
      }

      *, *::before, *::after {
        box-sizing: border-box;
      }
      
      body {
        margin: 0;
        padding: 0;
        background-color: var(--color-bg);
        color: var(--color-text-primary);
        font-family: var(--font-sans);
        font-size: var(--text-base);
        line-height: var(--leading-normal);
        -webkit-font-smoothing: antialiased;
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: none;
        -webkit-hyphens: none;
      }

      img, video {
        -webkit-user-drag: none;
        user-select: none;
        -webkit-user-select: none;
      }

      .container {
        position: relative;
        max-width: 696px;
        margin: 0 auto;
        padding: 48px 32px 96px;
        background-color: var(--color-bg);
        border-left: 1px solid var(--color-border-frame);
        border-right: 1px solid var(--color-border-frame);
        min-height: 100vh;
        min-height: 100svh;
      }

      nav {
        position: sticky;
        top: 0;
        z-index: 100;
        display: flex;
        align-items: center;
        gap: 16px;
        margin: -48px -32px 36px -32px;
        padding: 16px 32px;
        font-size: var(--text-base);
        background: transparent;
        border-bottom: 1px solid transparent;
        transition: background-color 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease, -webkit-backdrop-filter 0.25s ease;
      }

      nav.is-scrolled {
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom-color: var(--color-border);
      }

      [data-theme="dark"] nav.is-scrolled {
        background: rgba(18, 18, 18, 0.85);
        border-bottom-color: var(--color-border);
      }

      .nav-links {
        display: flex;
        align-items: center;
        gap: 16px;
      }

      .nav-links-inner {
        display: contents;
      }

      .nav-links a {
        color: var(--color-text-tertiary);
        text-decoration: none;
        font: inherit;
        letter-spacing: inherit;
        transition: color 0.15s ease;
      }

      .nav-links a:hover, .nav-links a.active {
        color: var(--color-text-primary);
      }

      /* Google Material Symbols (Sharp & Rounded) */
      .material-symbols-sharp {
        font-family: 'Material Symbols Sharp';
        font-weight: normal;
        font-style: normal;
        font-size: 20px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        letter-spacing: normal;
        text-transform: none;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-smoothing: antialiased;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'opsz' 24;
      }

      .material-symbols-rounded {
        font-family: 'Material Symbols Rounded';
        font-weight: normal;
        font-style: normal;
        font-size: 22px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        letter-spacing: normal;
        text-transform: none;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-smoothing: antialiased;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'opsz' 24;
      }

      .nav-actions {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
      }

      /* Live clock widget in nav */
      .nav-clock {
        display: inline-flex;
        align-items: baseline;
        gap: 4px;
        cursor: default;
        user-select: none;
        line-height: 1;
      }

      .nav-clock-time {
        font-family: 'Geist Mono', 'SF Mono', ui-monospace, monospace;
        font-size: 13px;
        font-weight: 400;
        letter-spacing: 0.02em;
        color: var(--color-text-secondary);
        opacity: 0.55;
        font-variant-numeric: tabular-nums;
      }

      .nav-clock-tz {
        font-family: 'Geist Mono', 'SF Mono', ui-monospace, monospace;
        font-size: 13px;
        font-weight: 400;
        letter-spacing: 0.04em;
        color: var(--color-text-secondary);
        opacity: 0.35;
      }

    /* ── Floating Tab Bar ────────────────────────────────────────────
       dock.js owns behaviour, this file owns every visual.

       HIG tab bars carry three to five destinations and reach for a
       familiar symbol per destination, so this bar is four icons and no
       text: the glyph plus its aria-label carries the whole item. Each
       target is 44x44 to stay at the HIG minimum hit size, and the
       selected tab is the only one painted - an earlier version spread
       four text labels across the bar and read as a toolbar, not a tab bar.

       Opaque on purpose. The glass version used backdrop-filter, which
       composites the dock through an extra GPU pass - a recurring source
       of stray rectangles around rounded elements. */

    .floating-dock {
      position: fixed;
      bottom: calc(20px + env(safe-area-inset-bottom, 0px));
      left: 50%;
      transform: translateX(-50%);
      z-index: 10000;
      display: flex;
      align-items: center;
      width: calc(100% - 32px);
      max-width: 520px;
      gap: 4px;
      padding: 4px;
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: 10px;
      box-shadow: 0 12px 32px -10px var(--color-shadow), 0 2px 8px rgba(0, 0, 0, 0.05);
      transition: background-color 0.25s ease, border-color 0.25s ease;
      user-select: none;
      -webkit-user-select: none;
    }

    [data-theme="dark"] .floating-dock {
      background: #1a1a1f;
      border-color: rgba(255, 255, 255, 0.1);
      box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.8), 0 2px 10px rgba(0, 0, 0, 0.5);
    }

    .floating-dock-item {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 1 1 0;
      min-width: 0;
      height: 34px;
      padding: 0 6px;
      justify-content: center;
      text-align: center;
      z-index: 1;
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 450;
      letter-spacing: var(--tracking-tight);
      line-height: 1;
      white-space: nowrap;
      color: var(--color-text-secondary);
      text-decoration: none;
      border: none;
      background: transparent;
      /* Concentric with the bar: 10px shell - 4px padding = 6px. */
      border-radius: 6px;
      cursor: pointer;
      font-family: inherit;
      -webkit-tap-highlight-color: transparent;
      transition: color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Plain glyph. The selected plate is painted on the item itself, as a
       pill that spans the whole target. */
    .floating-dock-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      font-size: 21px;
      line-height: 1;
      font-variation-settings: 'FILL' 0, 'wght' 450, 'opsz' 21;
      /* Material Symbols draws its artboard slightly low: every glyph measured
         ~2px below the middle of its line box, which read as icons sitting low
         in their pill. Applied through the standalone translate property so
         hover and press can keep using transform - the two compose. */
      translate: 0 -2px;
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Selected tab: a pill behind the whole item, so the highlight reads as a
       capsule rather than a disc fighting the bar's rounded ends. */

    /* Extend the 34px item to a 44px touch target vertically.
       Keep horizontal hit areas separate across the 4px gap. */
    .floating-dock-item::after {
      content: "";
      position: absolute;
      inset: -5px 0;
      border-radius: 6px;
    }

    /* One indicator for the whole bar, positioned by dock.js and slid between
       items. Painting the highlight on .active instead meant four separate
       fills that popped in and out rather than travelling. No will-change
       here: promoting the bar to its own layer is what made rounded child
       fills lose their radius on the compositor. */
    .floating-dock-indicator {
      position: absolute;
      top: 4px;
      left: 0;
      width: 48px;
      height: 34px;
      border-radius: 6px;
      background-color: #4d4d4d;
      opacity: 0;
      pointer-events: none;
      transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.2s ease, width 0.42s cubic-bezier(0.16, 1, 0.3, 1),
        height 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .floating-dock-indicator.is-visible {
      opacity: 1;
    }

    .floating-dock-item.active {
      color: #ffffff;
    }

    /* Hover only where a real cursor exists: on touch it sticks after a tap
       and leaves a pill behind. */
    @media (hover: hover) and (pointer: fine) {
      .floating-dock-item:hover {
        color: #ffffff;
        transform: translateY(-1px);
      }
    }

    /* Tactile press, driven by pointerdown from dock.js. */
    .floating-dock-item.is-press {
      transform: scale(0.9);
      transition-duration: 70ms;
    }

    /* Focus: no ring for pointers, a clear inset ring for keyboards. Inset so
       it can never spill past the rounded shell. */
    .floating-dock :focus {
      outline: none;
    }

    .floating-dock :focus-visible {
      outline: 2px solid var(--color-text-primary);
      outline-offset: -3px;
    }

    /* Viewport snapshots keep long and short pages in the same coordinates. */
    ::view-transition-group(root) {
      animation: none;
    }

    ::view-transition-old(root) {
      animation: valto-page-out 180ms ease-out both;
      mix-blend-mode: normal;
    }

    ::view-transition-new(root) {
      animation: valto-page-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
      mix-blend-mode: normal;
    }

    @keyframes valto-page-out {
      to { opacity: 0; }
    }

    @keyframes valto-page-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
      ::view-transition-old(root),
      ::view-transition-new(root) {
        animation: none;
      }
    }

    html.valto-navigating {
      scroll-behavior: auto;
    }

    .valto-navigating .container {
      overflow-anchor: none;
    }

    /* While a page swap animates, swallow stray input on the outgoing page */
    .valto-navigating .container,
    .valto-navigating main {
      pointer-events: none;
    }

      /* Two navigations, one per form factor: the top menu carries pages on
         desktop, the floating text tab bar carries them on mobile. */
      @media (min-width: 768px) {
        .floating-dock {
          display: none;
        }
      }

      @media (max-width: 767px) {
        nav {
          display: none;
        }

        .floating-dock {
          display: flex;
        }
      }

      @media (max-width: 560px) {
        .container {
          padding: 24px 16px 48px;
          border-left: none;
          border-right: none;
        }

        .links {
          margin-bottom: 30px;
        }

        .section {
          margin-bottom: 44px;
        }

        .section-divider {
          margin: 0 0 44px 0;
        }

        .profile-header {
          gap: 16px;
          margin-bottom: 20px;
        }

        .user-avatar-frame {
          width: 76px;
          height: 76px;
          margin-bottom: 0;
        }
      }

      .profile-header {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 24px;
      }

      .user-avatar-frame {
        width: 88px;
        height: 88px;
        margin-bottom: 0;
        flex-shrink: 0;
        display: inline-block;
        filter: drop-shadow(0 4px 14px var(--color-shadow));
        background-color: var(--color-skeleton);
        border-radius: 22px;
      }

      .user-avatar {
        width: 100%;
        height: 100%;
        border-radius: 22px;
        -webkit-corner-smoothing: 100%;
        corner-smoothing: 100%;
        clip-path: url(#ios-squircle);
        object-fit: cover;
        display: block;
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      .user-avatar.loaded {
        opacity: 1;
      }

      .profile-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      h1 {
        font-size: var(--text-2xl);
        font-weight: 600;
        letter-spacing: var(--tracking-tighter);
        line-height: var(--leading-tight);
        margin: 0 0 4px 0;
        color: var(--color-text-primary);
      }

      .subtitle {
        color: var(--color-text-tertiary);
        font-size: var(--text-base);
        margin-top: 0;
        margin-bottom: 0;
        line-height: var(--leading-snug);
      }

      .bio {
        font-size: var(--text-lg);
        color: var(--color-text-primary);
        line-height: var(--leading-relaxed);
        margin-bottom: 24px;
      }

      .meta-block {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 28px;
      }

      .status-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: var(--text-sm);
        font-family: var(--font-mono);
        color: var(--color-text-primary);
      }

      .status-pill .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: var(--color-accent-green);
        box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
        display: inline-block;
        flex-shrink: 0;
      }

      .meta-chips {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
      }

      .meta-chip {
        display: inline-flex;
        align-items: center;
        font-size: 12px;
        font-family: var(--font-mono);
        color: var(--color-text-secondary);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: 4px;
        padding: 3px 8px;
        white-space: nowrap;
      }

      .links {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        font-size: var(--text-base);
        margin-bottom: 40px;
      }

      /* Infinite Project Ticker / Marquee */
      .project-ticker-wrap {
        position: relative;
        width: 100%;
        margin-bottom: 56px;
        padding: 6px 0;
        overflow: hidden;
        /* Seamless emergence from void - completely removes hard box/blur borders */
        -webkit-mask-image: linear-gradient(
          to right,
          transparent 0%,
          rgba(0, 0, 0, 0.4) 3%,
          rgba(0, 0, 0, 0.9) 7%,
          black 10%,
          black 90%,
          rgba(0, 0, 0, 0.9) 93%,
          rgba(0, 0, 0, 0.4) 97%,
          transparent 100%
        );
        mask-image: linear-gradient(
          to right,
          transparent 0%,
          rgba(0, 0, 0, 0.4) 3%,
          rgba(0, 0, 0, 0.9) 7%,
          black 10%,
          black 90%,
          rgba(0, 0, 0, 0.9) 93%,
          rgba(0, 0, 0, 0.4) 97%,
          transparent 100%
        );
      }

      .project-ticker-track {
        display: flex;
        gap: 22px;
        width: max-content;
        will-change: transform;
        animation: ticker-slide 110s linear infinite;
      }

      .project-ticker-track:hover {
        animation-play-state: paused;
      }

      @keyframes ticker-slide {
        from {
          transform: translate3d(0, 0, 0);
        }
        to {
          transform: translate3d(-50%, 0, 0);
        }
      }

      .ticker-card {
        display: block;
        width: 460px;
        height: 258px;
        flex-shrink: 0;
        text-decoration: none;
        background: transparent;
        border: 1px solid var(--color-border);
        border-radius: 18px;
        overflow: hidden;
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                    border-color 0.25s ease;
        -webkit-tap-highlight-color: transparent;
      }

      .ticker-card:hover {
        transform: translateY(-4px) scale(1.02);
        border-color: var(--color-border-hover);
      }

      .ticker-card-thumb {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: var(--color-skeleton);
        background-image: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0) 0,
          rgba(255, 255, 255, 0.08) 50%,
          rgba(255, 255, 255, 0) 100%
        );
        background-size: 200% 100%;
        animation: skeleton-shimmer 2s infinite ease-in-out;
      }

      [data-theme="light"] .ticker-card-thumb {
        background-image: linear-gradient(
          90deg,
          rgba(0, 0, 0, 0) 0,
          rgba(0, 0, 0, 0.04) 50%,
          rgba(0, 0, 0, 0) 100%
        );
      }

      .ticker-card-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        opacity: 0;
        transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .ticker-card-thumb img.loaded {
        opacity: 1;
      }

      .ticker-card:hover .ticker-card-thumb img {
        transform: scale(1.04);
      }

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

      /* Responsive Ticker for Mobile & Tablets */
      @media (max-width: 640px) {
        .project-ticker-wrap {
          margin-bottom: 36px;
        }

        .project-ticker-track {
          gap: 14px;
        }

        .ticker-card {
          width: 80vw !important;
          max-width: 380px !important;
          height: auto !important;
          aspect-ratio: 16 / 9;
          border-radius: 14px !important;
        }
      }

      .links a {
        color: var(--color-text-primary);
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-color: var(--color-border-hover);
        transition: text-decoration-color 0.15s ease;
      }

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

      h2 {
        font-size: var(--text-xl);
        font-weight: 600;
        letter-spacing: var(--tracking-tight);
        line-height: var(--leading-snug);
        margin: 0 0 24px 0;
        color: var(--color-text-primary);
        display: flex;
        align-items: center;
        gap: 8px;
      }

      h2 .section-icon {
        font-size: 20px;
        width: 20px;
        height: 20px;
        color: var(--color-text-muted);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'opsz' 24;
      }

      .section {
        margin-bottom: 56px;
      }

      .section-divider {
        border: none;
        border-top: 1px solid var(--color-border);
        margin: 0 0 56px 0;
      }

      .case-list {
        display: flex;
        flex-direction: column;
        gap: 28px;
      }

      .exp-list {
        display: flex;
        flex-direction: column;
        gap: 0;
        border-top: 1px solid var(--color-border);
      }

      .exp-item {
        border-bottom: 1px solid var(--color-border);
      }

      .exp-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        padding: 14px 0;
        background: transparent;
        border: none;
        cursor: pointer;
        text-align: left;
        color: inherit;
        font: inherit;
        -webkit-tap-highlight-color: transparent;
      }

      .exp-summary-left {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
        flex: 1;
      }

      .exp-logo-frame {
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        border-radius: 6px;
        border: 1px solid var(--color-border);
        background: var(--color-surface);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }

      .exp-logo {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .exp-logo-placeholder {
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 600;
        color: var(--color-text-secondary);
        line-height: 1;
      }

      .exp-company-name {
        font-size: var(--text-lg);
        font-weight: 500;
        color: var(--color-text-primary);
        line-height: var(--leading-tight);
        letter-spacing: var(--tracking-tight);
      }

      .exp-summary:hover .exp-company-name {
        color: var(--color-text-primary);
      }

      .exp-summary-right {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
      }

      .exp-chevron {
        font-size: 18px;
        width: 18px;
        height: 18px;
        color: var(--color-text-muted);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.15s ease;
      }

      .exp-summary:hover .exp-chevron {
        color: var(--color-text-primary);
      }

      .exp-item.expanded .exp-chevron {
        transform: rotate(180deg);
      }

      .exp-details-wrapper {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .exp-item.expanded .exp-details-wrapper {
        grid-template-rows: 1fr;
      }

      .exp-details-inner {
        overflow: hidden;
        min-height: 0;
      }

      .exp-content {
        padding: 0 0 16px 36px;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      @media (max-width: 560px) {
        .exp-summary {
          padding: 12px 0;
          gap: 10px;
        }
        .exp-summary-left {
          gap: 10px;
        }
        .exp-content {
          padding-left: 0;
        }
      }

      .case-item {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .more-cases-wrapper {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.7s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .more-cases-wrapper.expanded {
        grid-template-rows: 1fr;
        margin-bottom: 28px;
      }

      .more-cases-inner {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 28px;
        min-height: 0;
      }

      .more-cases-inner .case-item {
        opacity: 0;
        filter: blur(12px);
        transform: translateY(18px);
        transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                    filter 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: opacity, filter, transform;
      }

      .more-cases-wrapper.expanded .more-cases-inner .case-item.stagger-in {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
      }

      .toggle-cases-btn {
        margin-top: 0;
        background: transparent;
        border: none;
        padding: 0;
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        color: var(--color-text-tertiary);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        text-decoration: underline;
        text-underline-offset: 4px;
        text-decoration-color: var(--color-border-subtle);
        transition: color 0.15s ease, text-decoration-color 0.15s ease;
      }

      .toggle-cases-btn:hover {
        color: var(--color-text-primary);
        text-decoration-color: var(--color-text-primary);
      }

      .case-item, .exp-item {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .item-header {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
      }

      .exp-company-name {
        font-size: var(--text-lg);
        font-weight: 500;
        color: var(--color-text-primary);
        line-height: var(--leading-tight);
      }

      .item-title {
        font-size: var(--text-lg);
        font-weight: 500;
        color: var(--color-text-primary);
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-color: var(--color-border-subtle);
        transition: text-decoration-color 0.15s ease;
      }

      .item-title:hover {
        text-decoration-color: var(--color-text-primary);
      }

      .item-year {
        font-size: var(--text-sm);
        font-family: var(--font-mono);
        color: var(--color-text-muted);
        flex-shrink: 0;
      }

      .item-tagline {
        font-size: var(--text-sm);
        font-family: var(--font-mono);
        color: var(--color-text-tertiary);
      }

      .item-desc {
        font-size: var(--text-base);
        color: var(--color-text-secondary);
        margin: 4px 0 0 0;
        line-height: var(--leading-normal);
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: none;
      }

      .item-outcome {
        font-size: var(--text-sm);
        font-family: var(--font-mono);
        color: var(--color-text-primary);
        margin-top: 4px;
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: none;
      }

      .item-outcome span {
        color: var(--color-accent-green);
      }

      .copy-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        background: var(--color-surface);
        border: 1px solid var(--color-border-subtle);
        border-radius: 6px;
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        color: var(--color-text-primary);
        cursor: pointer;
        margin-top: 12px;
        transition: background 0.15s ease, border-color 0.15s ease;
      }

      .copy-btn:hover {
        background: var(--color-surface-hover);
        border-color: var(--color-border-hover);
      }

      footer {
        margin-top: 64px;
        padding-top: 32px;
        border-top: 1px solid var(--color-border);
        font-size: var(--text-sm);
        color: var(--color-text-tertiary);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 14px 20px;
      }

      .footer-links {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 18px;
        align-items: center;
      }

      .footer-copy {
        white-space: nowrap;
        color: var(--color-text-muted);
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        margin-left: auto;
      }

      @media (max-width: 640px) {
        footer {
          margin-top: 48px;
          padding-top: 24px;
          justify-content: flex-start !important;
        }

        .footer-links {
          display: none !important;
        }

        .footer-copy {
          margin-left: 0 !important;
          text-align: left !important;
        }
      }

      .footer-links a {
        color: var(--color-text-tertiary);
        text-decoration: none;
        white-space: nowrap;
        transition: color 0.15s ease;
      }

      .footer-links a:hover {
        color: var(--color-text-primary);
      }

      #toast {
        position: fixed;
        bottom: 24px;
        right: 24px;
        background: var(--color-text-primary);
        color: var(--color-bg);
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        padding: 8px 16px;
        border-radius: 6px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
      }

      #toast.show {
        opacity: 1;
      }

      /* Scroll Reveal from Blur */
      .reveal {
        opacity: 0;
        filter: blur(10px);
        transform: translateY(16px);
        transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                    filter 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: opacity, filter, transform;
      }

      .reveal.revealed {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
      }

      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }
        .reveal {
          opacity: 1 !important;
          filter: none !important;
          transform: none !important;
          transition: none !important;
        }
        .project-ticker-track {
          animation: none !important;
          transform: none !important;
          overflow-x: auto;
        }
      }

      /* --- Showcase & Wall Specific Styles --- */
      header:not(.about-hero) {
        margin-bottom: 36px;
      }

      header:not(.about-hero) h1 {
        font-size: var(--text-2xl);
        font-weight: 600;
        letter-spacing: var(--tracking-tighter);
        line-height: var(--leading-tight);
        margin: 0 0 8px 0;
        color: var(--color-text-primary);
      }

      .lead {
        color: var(--color-text-secondary);
        font-size: var(--text-base);
        line-height: var(--leading-relaxed);
        margin: 0;
      }

      .showcase-grid {
        display: flex;
        flex-direction: column;
        gap: 32px;
      }

      .showcase-item {
        background: transparent;
      }

      .showcase-video-card {
        position: relative;
        width: 100%;
        border-radius: 16px;
        overflow: hidden;
        background-color: var(--color-surface);
        border: 1px solid var(--color-border);
        box-shadow: 0 4px 20px var(--color-shadow);
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                    border-color 0.2s ease,
                    box-shadow 0.25s ease;
      }

      .showcase-video-card:hover {
        transform: translateY(-2px);
        border-color: var(--color-border-hover);
        box-shadow: 0 8px 28px var(--color-shadow);
      }

      .showcase-video-card video {
        width: 100%;
        height: auto;
        /* Reserve the frame before metadata arrives: without this the card
           collapses to zero height and shoves the rest of the page down. */
        aspect-ratio: 16 / 9;
        object-fit: cover;
        display: block;
        border-radius: 16px;
        background: #000000;
      }

.showcase-meta {
        margin-top: 12px;
        display: flex;
        align-items: baseline;
        gap: 12px;
      }
      .showcase-title {
        font-size: var(--text-base);
        font-weight: 500;
        color: var(--color-text-primary);
        letter-spacing: var(--tracking-tight);
      }

      .showcase-desc {
        font-size: var(--text-sm);
        color: var(--color-text-secondary);
        margin: 4px 0 0 0;
        line-height: var(--leading-normal);
      }

      .content-area {
        margin-top: 24px;
      }

      .empty-box {
        padding: 48px 24px;
        border: 1px dashed var(--color-border);
        border-radius: 12px;
        text-align: center;
        background: var(--color-surface);
      }

      .empty-tag {
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        color: var(--color-text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 8px;
      }

      .empty-text {
        font-size: var(--text-sm);
        color: var(--color-text-secondary);
        margin: 0;
      }