/* Simple Index Mobile CSS
   Scope: Simple mode only. Load after assets/css/home-simple.css.
   This file is intentionally a clean mobile reset, not a stack of versioned overrides.
   Desktop Simple and Whiteboard are untouched.
*/

@media (max-width: 768px) {
  html.is-simple-mobile-boot #loader,
  html.is-simple-mobile-boot .intro-loader {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 768px) {
  body.is-simple-mode {
    --simple-mobile-noise-fallback: radial-gradient(circle at 25% 30%, rgba(120, 130, 124, 0.10) 0 0.8px, transparent 0.9px), radial-gradient(circle at 70% 60%, rgba(40, 48, 44, 0.08) 0 0.7px, transparent 0.8px);
    --mobile-page-pad: clamp(18px, 5vw, 30px);
    --mobile-card-width: min(calc(100vw - (var(--mobile-page-pad) * 2)), 680px);
    --simple-mobile-name-one-x: 0vw;
    --simple-mobile-name-two-x: 0vw;
    --simple-mobile-desktop-note-opacity: 0;
    --simple-mobile-name-one-opacity: 1;
    --simple-mobile-name-two-opacity: 0.66;
    --simple-mobile-name-one-blur: 0px;
    --simple-mobile-name-two-blur: 0.8px;
    overflow-x: hidden;
  }

  /* Mobile should enter Simple directly without the desktop loader overlay. */
  body.is-simple-mode .intro-loader,
  body.is-simple-mode #loader {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.is-simple-mode,
  body.is-simple-mode .simple-index,
  body.is-simple-mode .simple-index__content {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  /* One continuous theme surface across the whole mobile Simple page. */
  body.is-light.is-simple-mode,
  body.is-light.is-simple-mode .simple-index,
  body.is-light.is-simple-mode .simple-index__content,
  body.is-simple-mode:not(.is-dark),
  body.is-simple-mode:not(.is-dark) .simple-index,
  body.is-simple-mode:not(.is-dark) .simple-index__content {
    background-color: #f5f7f8 !important;
  }

  body.is-dark.is-simple-mode,
  body.is-dark.is-simple-mode .simple-index,
  body.is-dark.is-simple-mode .simple-index__content {
    background-color: #111312 !important;
  }

  body.is-simple-mode .simple-index {
    position: relative;
    isolation: isolate;
  }

  body.is-simple-mode .simple-index::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-position: 0 0, 0 0, 0 0;
    background-size: 180px 180px, 34vw 34vw, 34vw 34vw;
  }

  body.is-light.is-simple-mode .simple-index::before,
  body.is-simple-mode:not(.is-dark) .simple-index::before {
    opacity: 0.55;
    background-image:
      var(--simple-noise-texture, var(--noise-texture, var(--simple-mobile-noise-fallback))),
      linear-gradient(rgba(0, 0, 0, 0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 0, 0, 0.045) 1px, transparent 1px);
    background-blend-mode: multiply, normal, normal;
  }

  body.is-dark.is-simple-mode .simple-index::before {
    opacity: 0.42;
    background-image:
      var(--simple-noise-texture, var(--noise-texture, var(--simple-mobile-noise-fallback))),
      linear-gradient(rgba(255, 255, 255, 0.052) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.052) 1px, transparent 1px);
    background-blend-mode: screen, normal, normal;
  }

  body.is-simple-mode .simple-entry,
  body.is-simple-mode .simple-index__section,
  body.is-simple-mode .simple-index__feature-links,
  body.is-simple-mode .simple-index__footer,
  body.is-simple-mode .simple-footer-final,
  body.is-simple-mode .simple-footer-final__inner,
  body.is-simple-mode .simple-footer-final__content {
    position: relative;
    z-index: 1;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  /* Mobile nav: sticky simple top bar with a soft blur/fade underneath. */
  body.is-simple-mode .simple-board-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-height: clamp(82px, 19vw, 108px) !important;
    padding: clamp(24px, 6.4vw, 38px) var(--mobile-page-pad) clamp(22px, 5.4vw, 34px) var(--mobile-page-pad) !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
    z-index: 120 !important;
    pointer-events: auto !important;
    background: transparent !important;
    isolation: isolate !important;
    transition:
      opacity 720ms ease,
      filter 820ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 820ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  body.is-simple-mode.simple-mobile-menu-open .simple-board-nav {
    opacity: 0.18 !important;
    filter: blur(7px) saturate(0.86) !important;
    transform: translate3d(0, -8px, 0) scale(0.992) !important;
    pointer-events: none !important;
  }

  /* The mobile top fade is a stable page layer, not part of the nav itself.
     This prevents the fade from popping when the nav controls animate behind the menu. */
  body.is-simple-mode .simple-board-nav::after {
    display: none !important;
    content: none !important;
  }

  body.is-simple-mode .simple-index::after {
    content: "" !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: clamp(210px, 54vw, 340px) !important;
    z-index: 110 !important;
    pointer-events: none !important;
    background:
      var(--simple-noise-texture, var(--noise-texture, var(--simple-mobile-noise-fallback))),
      linear-gradient(to bottom, rgba(245, 247, 248, 0.92) 0%, rgba(245, 247, 248, 0.76) 26%, rgba(245, 247, 248, 0.48) 58%, rgba(245, 247, 248, 0.18) 84%, rgba(245, 247, 248, 0) 100%) !important;
    background-size: 170px 170px, auto !important;
    background-blend-mode: multiply, normal !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    opacity: 0.92 !important;
    transition: none !important;
    mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,0.72) 70%, rgba(0,0,0,0.22) 90%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,0.72) 70%, rgba(0,0,0,0.22) 90%, transparent 100%) !important;
  }

  body.is-dark.is-simple-mode .simple-index::after {
    background:
      var(--simple-noise-texture, var(--noise-texture, var(--simple-mobile-noise-fallback))),
      linear-gradient(to bottom, rgba(17, 19, 18, 0.94) 0%, rgba(17, 19, 18, 0.74) 26%, rgba(17, 19, 18, 0.46) 58%, rgba(17, 19, 18, 0.16) 84%, rgba(17, 19, 18, 0) 100%) !important;
    background-blend-mode: screen, normal !important;
    opacity: 0.9 !important;
  }


  body.is-simple-mode .board-brand {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    padding-top: 0.7rem !important;
    pointer-events: auto !important;
  }

  body.is-simple-mode .board-brand span {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.is-simple-mode .board-brand em,
  body.is-simple-mode .board-links,
  body.is-simple-mode .sound-label,
  body.is-simple-mode .mode-toggle span {
    display: none !important;
  }

  body.is-simple-mode .nav-controls {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding-top: 1.22rem !important;
    margin-right: clamp(18px, 4.4vw, 30px) !important;
    transform: translateY(2px) !important;
    pointer-events: auto !important;
  }

  body.is-simple-mode .simple-board-nav a,
  body.is-simple-mode .simple-board-nav button {
    pointer-events: auto !important;
  }

  /* Mobile hero: use the same banner artwork as desktop, full-screen. */
  body.is-simple-mode .simple-entry {
    min-height: 100svh;
    margin: 0 !important;
    padding: clamp(86px, 18vw, 126px) var(--mobile-page-pad) clamp(48px, 12vw, 78px) !important;
    overflow: hidden !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  body.is-simple-mode .simple-entry::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    background-image: url("../img/profile-banner.png") !important;
    background-repeat: no-repeat !important;
    background-position: 46% 88% !important;
    background-size: cover !important;
    opacity: 0.92 !important;
    filter: blur(0.2px) saturate(0.98) contrast(1.06) brightness(1.02) !important;
    pointer-events: none !important;
  }

  body.is-light.is-simple-mode .simple-entry::before,
  body.is-simple-mode:not(.is-dark) .simple-entry::before {
    opacity: 0.9 !important;
    filter: blur(0.2px) saturate(0.98) contrast(1.04) brightness(1.06) !important;
  }

  body.is-dark.is-simple-mode .simple-entry::before {
    opacity: 0.72 !important;
    filter: blur(0.2px) saturate(0.98) contrast(1.1) brightness(0.78) !important;
  }

  body.is-simple-mode .simple-entry::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    top: auto !important;
    height: clamp(480px, 82svh, 920px) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(
      to bottom,
      rgba(245, 247, 248, 0) 0%,
      rgba(245, 247, 248, 0.16) 18%,
      rgba(245, 247, 248, 0.42) 38%,
      rgba(245, 247, 248, 0.76) 64%,
      rgba(245, 247, 248, 0.96) 86%,
      rgba(245, 247, 248, 1) 100%
    ) !important;
  }

  body.is-dark.is-simple-mode .simple-entry::after {
    background: linear-gradient(
      to bottom,
      rgba(17, 19, 18, 0) 0%,
      rgba(17, 19, 18, 0.16) 24%,
      rgba(17, 19, 18, 0.5) 56%,
      rgba(17, 19, 18, 0.86) 84%,
      rgba(17, 19, 18, 1) 100%
    ) !important;
  }

  body.is-simple-mode .simple-entry__portrait,
  body.is-simple-mode .simple-entry__distortion,
  body.is-simple-mode .simple-entry__lens,
  body.is-simple-mode .simple-entry__paper,
  body.is-simple-mode .simple-entry__grain {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.is-simple-mode .simple-entry__name {
    z-index: 2 !important;
    width: 100% !important;
    max-width: none !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  body.is-light.is-simple-mode .simple-entry__name,
  body.is-simple-mode:not(.is-dark) .simple-entry__name {
    color: rgba(0, 0, 0, 0.78) !important;
  }

  body.is-dark.is-simple-mode .simple-entry__name {
    color: rgba(255, 255, 255, 0.78) !important;
  }

  body.is-simple-mode .simple-entry__name-line--one {
    top: 46svh !important;
    left: 7vw !important;
    font-size: clamp(8.8rem, 32vw, 17rem) !important;
    line-height: 0.82 !important;
    transform: translate3d(var(--simple-mobile-name-one-x), 0, 0) !important;
    opacity: var(--simple-mobile-name-one-opacity) !important;
    filter: blur(var(--simple-mobile-name-one-blur)) !important;
    will-change: transform, opacity, filter;
  }

  body.is-simple-mode .simple-entry__name-line--two {
    top: 82svh !important;
    left: 42vw !important;
    font-size: clamp(8rem, 29vw, 15.5rem) !important;
    line-height: 0.82 !important;
    transform: translate3d(var(--simple-mobile-name-two-x), 0, 0) !important;
    opacity: var(--simple-mobile-name-two-opacity) !important;
    filter: blur(var(--simple-mobile-name-two-blur)) !important;
    will-change: transform, opacity, filter;
  }

  body.is-light.is-simple-mode .simple-entry__name-line--two,
  body.is-simple-mode:not(.is-dark) .simple-entry__name-line--two {
    text-shadow: 0 0 0.01em rgba(0, 0, 0, 0.18) !important;
  }

  body.is-simple-mode .simple-entry__intro {
    left: var(--mobile-page-pad) !important;
    right: var(--mobile-page-pad) !important;
    bottom: clamp(32px, 8vw, 56px) !important;
    max-width: 30rem !important;
    z-index: 4 !important;
    pointer-events: none !important;
  }

  body.is-simple-mode .simple-entry__intro > span,
  body.is-simple-mode .simple-entry__intro > p,
  body.is-simple-mode .simple-entry__intro::after {
    display: none !important;
    content: none !important;
  }

  body.is-simple-mode .simple-mobile-desktop-note {
    display: block !important;
    max-width: min(24rem, calc(100vw - (var(--mobile-page-pad) * 2))) !important;
    opacity: var(--simple-mobile-desktop-note-opacity) !important;
    transform: translate3d(0, calc((1 - var(--simple-mobile-desktop-note-opacity)) * 10px), 0) !important;
    transition: opacity 120ms linear !important;
    pointer-events: auto !important;
  }

  body.is-simple-mode .simple-mobile-desktop-note__text {
    margin: 0 0 clamp(14px, 3.4vw, 20px) !important;
    font-family: var(--condensed-font, "Barlow Condensed", sans-serif) !important;
    font-size: clamp(0.98rem, 4.2vw, 1.28rem) !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    line-height: 1.22 !important;
    text-transform: uppercase !important;
  }

  body.is-light.is-simple-mode .simple-mobile-desktop-note__text,
  body.is-simple-mode:not(.is-dark) .simple-mobile-desktop-note__text {
    color: rgba(0, 0, 0, 0.66) !important;
  }

  body.is-dark.is-simple-mode .simple-mobile-desktop-note__text {
    color: rgba(255, 255, 255, 0.78) !important;
  }

  body.is-simple-mode .simple-mobile-desktop-note__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  body.is-simple-mode .simple-mobile-share-btn {
    appearance: none !important;
    border: 1px solid currentColor !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: inherit !important;
    padding: 0.68rem 1rem !important;
    font-family: var(--condensed-font, "Barlow Condensed", sans-serif) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
  }

  body.is-light.is-simple-mode .simple-mobile-share-btn,
  body.is-simple-mode:not(.is-dark) .simple-mobile-share-btn {
    color: rgba(0, 0, 0, 0.66) !important;
  }

  body.is-dark.is-simple-mode .simple-mobile-share-btn {
    color: rgba(255, 255, 255, 0.78) !important;
  }

  body.is-simple-mode .simple-entry__scroll {
    display: none !important;
  }

  /* Sections */
  body.is-simple-mode .simple-index__section {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: clamp(58px, 14vw, 88px) var(--mobile-page-pad) clamp(92px, 24vw, 150px) !important;
  }

  body.is-simple-mode .simple-index__section::before,
  body.is-simple-mode .simple-index__section::after,
  body.is-simple-mode .simple-index__feature-links::before,
  body.is-simple-mode .simple-index__feature-links::after,
  body.is-simple-mode .simple-index__footer::before,
  body.is-simple-mode .simple-index__footer::after,
  body.is-simple-mode .simple-footer-final::before,
  body.is-simple-mode .simple-footer-final::after {
    display: none !important;
    content: none !important;
  }

  body.is-simple-mode .simple-index__section-head {
    display: block !important;
    width: 100% !important;
    max-width: var(--mobile-card-width) !important;
    margin: 0 auto clamp(48px, 12vw, 78px) !important;
  }

  body.is-simple-mode .simple-index__section-head span {
    display: block !important;
    margin: 0 0 0.55rem !important;
  }

  body.is-simple-mode .simple-index__section-head h2 {
    font-size: clamp(4.7rem, 17vw, 7.4rem) !important;
    line-height: 0.84 !important;
    letter-spacing: -0.035em !important;
    max-width: 7.8ch !important;
  }

  /* Project stack: centred cards with one real tape layer only. */
  body.is-simple-mode .simple-project-list {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(104px, 25vw, 164px) !important;
  }

  body.is-simple-mode .simple-project-card,
  body.is-simple-mode .simple-project-card:nth-child(n) {
    box-sizing: border-box !important;
    position: relative !important;
    inset: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    order: initial !important;
    display: block !important;
    width: var(--mobile-card-width) !important;
    max-width: var(--mobile-card-width) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    justify-self: center !important;
    align-self: center !important;
    overflow: visible !important;
  }

  body.is-simple-mode .simple-project-card:nth-child(7) {
    display: none !important;
  }

  body.is-simple-mode .simple-project-card__tape {
    display: none !important;
    content: none !important;
  }

  body.is-simple-mode .simple-project-card figure::after,
  body.is-simple-mode .simple-feature-link figure::after {
    display: none !important;
    content: none !important;
  }

  body.is-simple-mode .simple-project-card::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 8 !important;
    top: clamp(-42px, -8vw, -28px) !important;
    left: 50% !important;
    width: clamp(210px, 52vw, 300px) !important;
    aspect-ratio: 190 / 70 !important;
    background-image: url("../img/tape/41.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    opacity: 0.68 !important;
    mix-blend-mode: screen !important;
    pointer-events: none !important;
    transform: translateX(-50%) rotate(-2.5deg) !important;
  }

  body.is-simple-mode .simple-project-card:nth-child(2)::before { background-image: url("../img/tape/42.png") !important; transform: translateX(-50%) rotate(3deg) !important; }
  body.is-simple-mode .simple-project-card:nth-child(3)::before { background-image: url("../img/tape/43.png") !important; transform: translateX(-50%) rotate(-4deg) !important; }
  body.is-simple-mode .simple-project-card:nth-child(4)::before { background-image: url("../img/tape/44.png") !important; transform: translateX(-50%) rotate(2deg) !important; }
  body.is-simple-mode .simple-project-card:nth-child(5)::before,
  body.is-simple-mode .simple-project-card:nth-child(6)::before { background-image: url("../img/tape/45.png") !important; transform: translateX(-50%) rotate(-1deg) !important; }

  body.is-simple-mode .simple-project-card figure,
  body.is-simple-mode .simple-project-card:nth-child(n) figure {
    box-sizing: border-box !important;
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    background: rgba(0, 0, 0, 0.06) !important;
  }

  body.is-simple-mode .simple-project-card img,
  body.is-simple-mode .simple-project-card:nth-child(n) img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    filter: none !important;
  }

  body.is-simple-mode .simple-project-card__body,
  body.is-simple-mode .simple-project-card:nth-child(n) .simple-project-card__body {
    box-sizing: border-box !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: clamp(20px, 5vw, 30px) auto 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  body.is-simple-mode .simple-project-card__body h3,
  body.is-simple-mode .simple-project-card:nth-child(n) .simple-project-card__body h3 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(3.2rem, 10.5vw, 5.4rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.02em !important;
    white-space: normal !important;
    text-wrap: balance;
  }

  body.is-simple-mode .simple-project-card__body span,
  body.is-simple-mode .simple-project-card__body em,
  body.is-simple-mode .simple-project-card__body p {
    max-width: 100% !important;
    font-size: clamp(0.72rem, 2.8vw, 0.95rem) !important;
  }

  /* About / Archive cards */
  body.is-simple-mode .simple-index__feature-links {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(104px, 26vw, 156px) var(--mobile-page-pad) clamp(72px, 18vw, 112px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: clamp(68px, 17vw, 104px) !important;
  }

  body.is-simple-mode .simple-feature-link,
  body.is-simple-mode .simple-feature-link:nth-child(n) {
    box-sizing: border-box !important;
    width: var(--mobile-card-width) !important;
    max-width: var(--mobile-card-width) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
  }

  body.is-simple-mode .simple-feature-link figure,
  body.is-simple-mode .simple-feature-link--archive figure {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    transform: none !important;
  }

  body.is-simple-mode .simple-feature-link--about figure {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    transform: none !important;
  }

  body.is-simple-mode .simple-feature-link figure img,
  body.is-simple-mode .simple-feature-link--about figure img,
  body.is-simple-mode .simple-feature-link--archive figure img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    filter: none !important;
  }

  body.is-simple-mode .simple-feature-link--about figure img {
    object-position: center top !important;
  }

  body.is-simple-mode .simple-feature-link__body {
    position: static !important;
    margin: clamp(20px, 5vw, 30px) 0 0 !important;
    transform: none !important;
  }

  body.is-simple-mode .simple-feature-link__body strong {
    font-size: clamp(4.2rem, 16vw, 7.2rem) !important;
    line-height: 0.9 !important;
    letter-spacing: -0.025em !important;
  }

  body.is-simple-mode .simple-feature-link__body span,
  body.is-simple-mode .simple-feature-link__body em {
    font-size: clamp(0.72rem, 2.8vw, 0.95rem) !important;
  }

  /* Footer mobile stack */
  body.is-simple-mode .simple-footer-final__upper {
    grid-template-columns: 1fr !important;
    gap: clamp(34px, 10vw, 58px) !important;
  }

  body.is-simple-mode .simple-footer-final__brand,
  body.is-simple-mode .simple-footer-final__nav,
  body.is-simple-mode .simple-footer-final__connect {
    grid-column: auto !important;
  }

  body.is-simple-mode .simple-footer-final__brand span {
    display: none !important;
  }

  body.is-simple-mode .simple-footer-final__brand p {
    max-width: 12em !important;
    font-size: clamp(2.35rem, 9.5vw, 4.6rem) !important;
    line-height: 1.08 !important;
  }

  body.is-simple-mode .simple-footer-final__nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: clamp(28px, 10vw, 64px) !important;
    row-gap: clamp(30px, 8vw, 48px) !important;
  }

  body.is-simple-mode .simple-footer-final__connect {
    justify-self: start !important;
    align-items: flex-start !important;
  }

  body.is-simple-mode .simple-footer-final__icons {
    justify-content: flex-start !important;
  }

  /* Mobile active-card focus. JS applies one active project at a time.
     Blur is only enabled after JS has successfully found an active card. */
  body.is-simple-mode.simple-mobile-focus-ready.simple-mobile-focus-has-active .simple-project-card {
    opacity: 0.48;
    filter: blur(2.4px);
    transform: translate3d(0, 0, 0) scale(0.975) !important;
    transition: opacity 360ms ease, filter 360ms ease, transform 820ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, filter, transform;
  }

  body.is-simple-mode.simple-mobile-focus-ready.simple-mobile-focus-has-active .simple-project-card.is-mobile-active {
    opacity: 1;
    filter: none;
    transform: translate3d(0, -6px, 0) scale(1) !important;
  }

  body.is-simple-mode.simple-mobile-focus-ready.simple-mobile-focus-has-active .simple-project-card.is-mobile-active img,
  body.is-simple-mode.simple-mobile-focus-ready.simple-mobile-focus-has-active .simple-project-card.is-mobile-active .simple-project-card__body {
    filter: none !important;
  }
}

@media (max-width: 480px) {
  body.is-simple-mode .simple-project-card figure,
  body.is-simple-mode .simple-project-card:nth-child(n) figure,
  body.is-simple-mode .simple-feature-link--archive figure {
    aspect-ratio: 1 / 1 !important;
  }

  body.is-simple-mode .simple-feature-link--about figure {
    aspect-ratio: 4 / 5 !important;
  }

  body.is-simple-mode .simple-index__section-head h2 {
    font-size: clamp(4.2rem, 18vw, 6.4rem) !important;
  }

  body.is-simple-mode .simple-project-card__body h3,
  body.is-simple-mode .simple-project-card:nth-child(n) .simple-project-card__body h3 {
    font-size: clamp(2.9rem, 11vw, 4.4rem) !important;
  }
}

@media (max-width: 768px) and (hover: hover) and (pointer: fine) {
  body.is-simple-mode .simple-project-card:hover img,
  body.is-simple-mode .simple-feature-link:hover figure img {
    transform: scale(1.035) !important;
    filter: blur(3px) !important;
  }
}

@media (max-width: 768px) and (hover: none) {
  body.is-simple-mode .simple-project-card:hover img,
  body.is-simple-mode .simple-feature-link:hover figure img {
    transform: none !important;
    filter: none !important;
  }
}

/* Mobile-only injected utilities. Hidden by default so desktop Simple and Whiteboard are untouched. */
.simple-mobile-desktop-note,
.simple-mobile-menu-toggle,
.simple-mobile-menu {
  display: none !important;
}

@media (min-width: 769px) {
  .simple-mobile-desktop-note,
  .simple-mobile-menu-toggle,
  .simple-mobile-menu {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 768px) {
  body.is-simple-mode .simple-mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-height: 36px !important;
    padding: 0.62rem 0.88rem !important;
    border: 1px solid currentColor !important;
    border-radius: 999px !important;
    background: rgba(245, 247, 248, 0.10) !important;
    color: inherit !important;
    font-family: var(--condensed-font, "Barlow Condensed", sans-serif) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }

  body.is-dark.is-simple-mode .simple-mobile-menu-toggle {
    background: rgba(17, 19, 18, 0.26) !important;
  }

  body.is-simple-mode .simple-mobile-menu {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 560ms ease, visibility 0s linear 560ms !important;
  }

  body.is-simple-mode .simple-mobile-menu::before {
    display: none !important;
    content: none !important;
  }


  body.is-simple-mode.simple-mobile-menu-open .simple-mobile-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity 560ms ease, visibility 0s linear 0s !important;
  }

  body.is-simple-mode.simple-mobile-menu-open {
    overflow: hidden !important;
  }

  body.is-simple-mode.simple-mobile-menu-open .simple-index__content {
    transform: none !important;
    filter: blur(4.8px) brightness(0.8) saturate(0.92) !important;
    transition:
      filter 860ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform-origin: center top !important;
  }

  body.is-simple-mode .simple-index__content {
    transition: filter 920ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  body.is-simple-mode .simple-mobile-menu__backdrop {
    position: absolute !important;
    inset: 0 !important;
    background:
      var(--simple-noise-texture, var(--noise-texture, var(--simple-mobile-noise-fallback))),
      linear-gradient(rgba(0, 0, 0, 0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 0, 0, 0.045) 1px, transparent 1px),
      rgba(245, 247, 248, 0.58) !important;
    background-size: 70px 70px, 34vw 34vw, 34vw 34vw, auto !important;
    background-blend-mode: multiply, normal, normal, normal !important;
    opacity: 0 !important;
    transition: opacity 1450ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  body.is-simple-mode .simple-mobile-menu__backdrop::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    background: rgba(245, 247, 248, 0.10) !important;
    backdrop-filter: blur(34px) saturate(1.08) brightness(1.02) !important;
    -webkit-backdrop-filter: blur(34px) saturate(1.08) brightness(1.02) !important;
    transition: opacity 1450ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  body.is-simple-mode.simple-mobile-menu-open .simple-mobile-menu__backdrop {
    opacity: 1 !important;
  }

  body.is-simple-mode.simple-mobile-menu-open .simple-mobile-menu__backdrop::before {
    opacity: 1 !important;
  }

  body.is-dark.is-simple-mode .simple-mobile-menu__backdrop {
    background:
      var(--simple-noise-texture, var(--noise-texture, var(--simple-mobile-noise-fallback))),
      linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
      rgba(17, 19, 18, 0.62) !important;
    background-size: 70px 70px, 34vw 34vw, 34vw 34vw, auto !important;
    background-blend-mode: screen, normal, normal, normal !important;
  }


  body.is-dark.is-simple-mode .simple-mobile-menu__backdrop::before {
    background: rgba(17, 19, 18, 0.14) !important;
    backdrop-filter: blur(34px) saturate(1.08) brightness(0.82) !important;
    -webkit-backdrop-filter: blur(34px) saturate(1.08) brightness(0.82) !important;
  }

  body.is-simple-mode .simple-mobile-menu__panel {
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    min-height: 100svh !important;
    padding: clamp(24px, 6.5vw, 40px) var(--mobile-page-pad) clamp(28px, 8vw, 48px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: clamp(28px, 8vw, 56px) !important;
    opacity: 0 !important;
    transform: translate3d(0, 26px, 0) scale(0.985) !important;
    filter: blur(8px) !important;
    transition:
      opacity 480ms ease,
      transform 620ms cubic-bezier(0.16, 1, 0.3, 1),
      filter 540ms ease !important;
  }

  body.is-simple-mode.simple-mobile-menu-open .simple-mobile-menu__panel {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    filter: none !important;
  }

  body.is-simple-mode .simple-mobile-menu__top,
  body.is-simple-mode .simple-mobile-menu__bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }

  body.is-simple-mode .simple-mobile-menu__top span,
  body.is-simple-mode .simple-mobile-menu__bottom p {
    margin: 0 !important;
    font-family: var(--condensed-font, "Barlow Condensed", sans-serif) !important;
    font-size: clamp(0.82rem, 3.5vw, 1.02rem) !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    line-height: 1.22 !important;
    text-transform: uppercase !important;
  }

  body.is-light.is-simple-mode .simple-mobile-menu__top span,
  body.is-light.is-simple-mode .simple-mobile-menu__bottom p,
  body.is-simple-mode:not(.is-dark) .simple-mobile-menu__top span,
  body.is-simple-mode:not(.is-dark) .simple-mobile-menu__bottom p {
    color: rgba(0, 0, 0, 0.58) !important;
  }

  body.is-dark.is-simple-mode .simple-mobile-menu__top span,
  body.is-dark.is-simple-mode .simple-mobile-menu__bottom p {
    color: rgba(255, 255, 255, 0.62) !important;
  }

  body.is-simple-mode .simple-mobile-menu__close,
  body.is-simple-mode .simple-mobile-menu__actions button {
    appearance: none !important;
    border: 1px solid currentColor !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: inherit !important;
    padding: 0.68rem 1rem !important;
    font-family: var(--condensed-font, "Barlow Condensed", sans-serif) !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
  }

  body.is-light.is-simple-mode .simple-mobile-menu__close,
  body.is-light.is-simple-mode .simple-mobile-menu__actions button,
  body.is-simple-mode:not(.is-dark) .simple-mobile-menu__close,
  body.is-simple-mode:not(.is-dark) .simple-mobile-menu__actions button {
    color: rgba(0, 0, 0, 0.68) !important;
  }

  body.is-dark.is-simple-mode .simple-mobile-menu__close,
  body.is-dark.is-simple-mode .simple-mobile-menu__actions button {
    color: rgba(255, 255, 255, 0.72) !important;
  }

  body.is-simple-mode .simple-mobile-menu__links {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: clamp(10px, 3vw, 22px) !important;
    margin: auto 0 !important;
  }

  body.is-simple-mode .simple-mobile-menu__links a {
    display: grid !important;
    grid-template-columns: clamp(46px, 12vw, 64px) 1fr !important;
    align-items: center !important;
    gap: clamp(16px, 4.6vw, 30px) !important;
    text-decoration: none !important;
    color: inherit !important;
    opacity: 0 !important;
    transform: translate3d(-18px, 20px, 0) !important;
    filter: blur(7px) !important;
    transition:
      opacity 420ms ease,
      transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
      filter 420ms ease !important;
  }

  body.is-simple-mode.simple-mobile-menu-open .simple-mobile-menu__links a {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    filter: none !important;
  }

  body.is-simple-mode.simple-mobile-menu-open .simple-mobile-menu__links a:nth-child(1) { transition-delay: 60ms !important; }
  body.is-simple-mode.simple-mobile-menu-open .simple-mobile-menu__links a:nth-child(2) { transition-delay: 115ms !important; }
  body.is-simple-mode.simple-mobile-menu-open .simple-mobile-menu__links a:nth-child(3) { transition-delay: 170ms !important; }
  body.is-simple-mode.simple-mobile-menu-open .simple-mobile-menu__links a:nth-child(4) { transition-delay: 225ms !important; }

  body.is-simple-mode .simple-mobile-menu__links a span {
    font-family: var(--condensed-font, "Barlow Condensed", sans-serif) !important;
    font-size: clamp(0.82rem, 3.3vw, 1rem) !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em !important;
  }

  body.is-simple-mode .simple-mobile-menu__links a strong {
    font-family: var(--display-font, "Big Shoulders Display", sans-serif) !important;
    font-size: clamp(5.8rem, 25vw, 11.5rem) !important;
    font-weight: 500 !important;
    letter-spacing: -0.055em !important;
    line-height: 0.78 !important;
    text-transform: uppercase !important;
  }

  body.is-light.is-simple-mode .simple-mobile-menu__links a,
  body.is-simple-mode:not(.is-dark) .simple-mobile-menu__links a {
    color: rgba(0, 0, 0, 0.76) !important;
  }

  body.is-dark.is-simple-mode .simple-mobile-menu__links a {
    color: rgba(255, 255, 255, 0.78) !important;
  }

  body.is-simple-mode .simple-mobile-menu__links a:active,
  body.is-simple-mode .simple-mobile-menu__links a:focus-visible {
    opacity: 1 !important;
    transform: translate3d(10px, 0, 0) !important;
    filter: none !important;
    outline: none !important;
  }

  body.is-simple-mode .simple-mobile-menu__bottom {
    align-items: flex-end !important;
  }

  body.is-simple-mode .simple-mobile-menu__bottom p {
    max-width: 13rem !important;
  }

  body.is-simple-mode .simple-mobile-menu__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    max-width: 16rem !important;
  }
}


@media (max-width: 768px) {
  body.is-simple-mode .simple-mobile-menu__top > span:empty,
  body.is-simple-mode .simple-mobile-menu__top > span[aria-hidden="true"] {
    display: none !important;
  }

  body.is-simple-mode .simple-mobile-menu__top {
    justify-content: flex-end !important;
  }

  body.is-simple-mode .simple-mobile-menu__links a {
    grid-template-columns: clamp(46px, 12vw, 64px) 1fr !important;
    align-items: center !important;
    gap: clamp(18px, 5vw, 34px) !important;
  }

  body.is-simple-mode .simple-mobile-menu__links a span {
    align-self: center !important;
    transform: translateY(0.02em) !important;
    opacity: 0.76 !important;
  }

  body.is-simple-mode .simple-mobile-menu__links a strong {
    line-height: 0.82 !important;
  }

  body.is-simple-mode .simple-mobile-menu__bottom p {
    max-width: 12rem !important;
  }

  body.is-simple-mode .simple-mobile-menu__backdrop::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: var(--simple-noise-texture, var(--noise-texture, var(--simple-mobile-noise-fallback))) !important;
    background-size: 72px 72px !important;
    opacity: 0 !important;
    mix-blend-mode: multiply !important;
    transition: opacity 1450ms ease !important;
  }

  body.is-simple-mode.simple-mobile-menu-open .simple-mobile-menu__backdrop::after {
    opacity: 0.56 !important;
  }

  body.is-dark.is-simple-mode .simple-mobile-menu__backdrop::after {
    mix-blend-mode: screen !important;
  }

  body.is-dark.is-simple-mode.simple-mobile-menu-open .simple-mobile-menu__backdrop::after {
    opacity: 0.62 !important;
  }
}