@media (max-width: 767px) {
  .mobile-about[hidden] { display: none; }
  .mobile-about {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background: #fff;
    color: #111;
    font-size: 14px;
    line-height: 1.5;
    --about-text-glow: 0 0 3px #fff, 0 0 12px #fff, 0 0 24px rgba(255,255,255,.7);
  }
  .mobile-about__wall {
    position: absolute;
    inset: -64px -32px;
    top: calc(-64px - env(safe-area-inset-top, 0px));
    right: calc(-32px - env(safe-area-inset-right, 0px));
    bottom: calc(-64px - env(safe-area-inset-bottom, 0px));
    left: calc(-32px - env(safe-area-inset-left, 0px));
    z-index: 0;
    overflow: hidden;
    opacity: .12;
    pointer-events: none;
    contain: paint;
  }
  .mobile-about[data-about-wall="loading"] .mobile-about__wall,
  .mobile-about[data-about-wall="decoding"] .mobile-about__wall { opacity: 0; }
  .mobile-about__wall-track {
    display: flex;
    width: calc(var(--mobile-about-period, 200vw) * 2);
    height: 100%;
    animation: mobile-about-drift 150s linear infinite;
    will-change: transform;
  }
  .mobile-about__wall-track > div {
    position: relative;
    flex: 0 0 var(--mobile-about-period, 200vw);
    width: var(--mobile-about-period, 200vw);
    height: 100%;
    contain: layout paint;
  }
  .mobile-about__wall img { position: absolute; display: block; max-width: none; object-fit: contain; filter: saturate(1.08); }
  .mobile-about__wall img[hidden] { display: none; }
  .mobile-about.is-paused .mobile-about__wall-track { animation-play-state: paused; will-change: auto; }
  .mobile-about__section {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(126px + env(safe-area-inset-top)) 18px 24px;
    box-sizing: border-box;
    text-shadow: var(--about-text-glow);
  }
  .mobile-about h2 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
  .mobile-about h2 > span { display: block; }
  .mobile-about h2 > [lang="en"] { margin-top: 3px; font-size: 14px; }
  .mobile-about__copy > .mobile-about__reveal:first-child { margin-bottom: 34px; }
  .mobile-about p { margin: 0; overflow-wrap: break-word; }
  .mobile-about strong { font-weight: 600; }
  .mobile-about__definition > .mobile-about__reveal + .mobile-about__reveal { margin-top: 24px; }
  .mobile-about__definition + .mobile-about__definition { margin-top: 42px; }
  .mobile-about__manifesto > .mobile-about__reveal + .mobile-about__reveal { margin-top: 24px; }
  .mobile-about__profile h2 { font-weight: 600; }
  .mobile-about__profile .mobile-about__copy { position: relative; top: -20px; }
  .mobile-about__profile .mobile-about__copy > .mobile-about__reveal + .mobile-about__reveal { margin-top: 40px; }
  .mobile-about h3 { margin: 0 0 10px; font-size: 12px; font-weight: 600; line-height: 1.3; }
  .mobile-about__social { margin-top: 20px !important; }
  .mobile-about__footer { display: flex; justify-content: center; margin-top: auto; padding-top: 40px; }
  .mobile-about__arrow {
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: transparent;
    color: inherit;
    font-size: 22px;
    font-weight: 300;
    cursor: pointer;
    touch-action: pan-y;
    opacity: .8;
    text-shadow: var(--about-text-glow);
    transition: color 160ms ease, opacity 160ms ease;
  }
  .mobile-about__arrow:active,
  .mobile-about__arrow.is-pressed { color: #000; opacity: 1; }
  .mobile-about__arrow:active > span,
  .mobile-about__arrow.is-pressed > span { text-shadow: 0 0 4px #fff, 0 0 12px rgba(255,255,255,.95); }
  .mobile-about__arrow:focus:not(:focus-visible) { outline: none; }
  .mobile-about__arrow:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
  .mobile-about__arrow > span { animation: mobile-about-arrow-down 2s cubic-bezier(.45,0,.25,1) infinite; }
  .mobile-about__profile .mobile-about__arrow > span { animation-name: mobile-about-arrow-up; }
  .mobile-about.is-paused .mobile-about__arrow > span { animation-play-state: paused; }
  .mobile-about__reveal { overflow: hidden; overflow: clip; padding: 3px; margin: -3px; }
  .mobile-about__arrival { opacity: 1; transform: none; }
  .mobile-about .is-arriving { will-change: transform, opacity; }
  .mobile-about__text { opacity: 1; transform: none; }
  .mobile-about[data-about-motion="native"] .mobile-about__reveal {
    view-timeline: --mobile-about-reveal block;
    view-timeline-inset: 6% 6%;
  }
  .mobile-about[data-about-motion="native"] .mobile-about__text {
    animation: mobile-about-text-reveal 1ms cubic-bezier(.16,1,.3,1) both;
    animation-timeline: --mobile-about-reveal;
    animation-range: 0% 42%;
  }
  #mobile-portfolio[data-mobile-view="about"] > .mobile-header::before { display: none; }
  #mobile-portfolio[data-mobile-view="about"] .mobile-menu { background: #fff; }
  #mobile-portfolio[data-mobile-view="about"] .mobile-brand {
    text-shadow: 0 0 3px #fff, 0 0 12px #fff, 0 0 24px rgba(255,255,255,.7);
  }
  html[data-mobile-header-experiment="blend"][data-mobile-experiment-menu-open="false"] #mobile-portfolio[data-mobile-view="about"] .mobile-brand {
    text-shadow: none;
  }
  @keyframes mobile-about-text-reveal {
    from { opacity: 0; transform: translate3d(0,28px,0); }
    to { opacity: 1; transform: translate3d(0,0,0); }
  }
  @keyframes mobile-about-drift { to { transform: translate3d(calc(-1 * var(--mobile-about-period, 200vw)),0,0); } }
  @keyframes mobile-about-arrow-down { 0%, 18%, 100% { transform: translateY(0); opacity: .65; } 46% { transform: translateY(8px); opacity: 1; } 72% { transform: translateY(2px); opacity: .85; } }
  @keyframes mobile-about-arrow-up { 0%, 18%, 100% { transform: translateY(0); opacity: .65; } 46% { transform: translateY(-8px); opacity: 1; } 72% { transform: translateY(-2px); opacity: .85; } }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .mobile-about__wall-track { animation: none; will-change: auto; }
  .mobile-about__arrow > span { animation: none; }
  .mobile-about .mobile-about__text { animation: none; opacity: 1 !important; transform: none !important; }
}