/*
 * SOY YO — Matthias Krause
 * Mobile landing v1.0: loader, intro and home navigation.
 */

.mobile-intro-background,
.mobile-intro-copy { display: none; }
.mobile-scroll-pages,
.mobile-entry-cue { display: none; }
.chef-career__mobile-close { display: none; }

@media (max-width: 47.999rem) {
  @keyframes mobile-chef-section-enter {
    from {
      opacity: 0;
      transform: translateY(1rem);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes mobile-recipe-detail-enter {
    from {
      opacity: 0;
      transform: translateY(0.7rem);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes mobile-recipe-index-return {
    from {
      opacity: 0;
      transform: translateY(-0.45rem);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  html {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    overscroll-behavior-y: none;
  }

  body {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    overflow: visible;
  }

  body::after {
    display: none;
    content: none;
  }

  .soyyo {
    --mobile-edge: clamp(1.25rem, 6vw, 1.75rem);
    --clock-size: clamp(3.5rem, 16vw, 4rem);
    display: block;
    width: 100%;
    min-width: 0;
    position: relative;
    height: auto;
    min-height: 200dvh;
  }

  .mobile-scroll-pages {
    position: relative;
    z-index: -1;
    display: block;
    width: 1px;
    pointer-events: none;
  }

  .mobile-scroll-page {
    width: 1px;
    height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .mobile-intro-background {
    position: absolute;
    inset: 0 0 auto;
    z-index: 0;
    display: block;
    height: 100dvh;
    overflow: hidden;
    background-image: url("../assets/images/intro/soyyo-intro-road-v1.png");
    background-position: center center;
    background-size: cover;
  }

  .mobile-intro-background::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
      linear-gradient(180deg, rgb(240 238 232 / 6%) 0%, transparent 42%),
      linear-gradient(0deg, rgb(0 0 0 / 30%) 0%, transparent 32%);
  }

  .identity {
    top: max(1.35rem, env(safe-area-inset-top));
    left: max(var(--mobile-edge), env(safe-area-inset-left));
  }

  .identity__title { width: clamp(8.5rem, 39vw, 10rem); }

  .identity__name {
    margin-top: 0.625rem;
    margin-left: 0.1875rem;
    font-size: 0.5rem;
    letter-spacing: 0.3em;
  }

  .clock {
    top: max(1.25rem, env(safe-area-inset-top));
    right: max(var(--mobile-edge), env(safe-area-inset-right));
  }

  .clock__inner { inset: 0.3125rem; }
  .clock__mark {
    top: 0.125rem;
    height: 0.25rem;
    transform-origin: 0.03125rem calc((var(--clock-size) / 2) - 0.125rem);
  }
  .clock__hand--hour { height: 0.875rem; }
  .clock__hand--minute { height: 1.25rem; }
  .clock__hand--second { height: 1.4375rem; }

  .time-reveal { display: none; }

  .mobile-intro-copy {
    position: absolute;
    top: 24vh;
    right: var(--mobile-edge);
    left: var(--mobile-edge);
    z-index: calc(var(--z-menu) - 1);
    display: block;
    margin: 0;
    opacity: 0;
    text-align: center;
    transition: opacity 700ms var(--ease-standard);
  }

  .mobile-intro-copy__title,
  .mobile-intro-copy__description {
    margin: 0;
    font-family: var(--font-mono);
    color: rgb(25 25 23 / 86%);
  }

  .mobile-intro-copy__title {
    font-size: clamp(0.9rem, 4.5vw, 1.05rem);
    font-weight: var(--font-weight-regular);
    line-height: 1.35;
    letter-spacing: 0.12em;
  }

  .mobile-intro-copy__description {
    max-width: none;
    margin: 1rem auto 0;
    font-size: clamp(0.34rem, 1.7vw, 0.4rem);
    line-height: 1.4;
    letter-spacing: 0.14em;
    white-space: nowrap;
  }

  .soyyo.is-intro-complete:not(.is-mobile-home-active) .mobile-intro-copy {
    opacity: 1;
  }

  .mobile-entry-cue {
    position: absolute;
    top: calc(100dvh - 5.25rem);
    left: 50%;
    z-index: var(--z-menu);
    display: grid;
    justify-items: center;
    gap: 0.65rem;
    width: max-content;
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 600ms var(--ease-standard);
    pointer-events: none;
  }

  .mobile-entry-cue__label {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.26em;
    color: rgb(240 238 232 / 88%);
  }

  .mobile-entry-cue__line {
    position: relative;
    display: block;
    width: 1px;
    height: 1.75rem;
    background: rgb(240 238 232 / 34%);
    overflow: hidden;
  }

  .mobile-entry-cue__line::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 0.65rem;
    background: rgb(240 238 232 / 90%);
    content: "";
    animation: mobile-entry-line 1800ms var(--ease-standard) infinite;
  }

  .soyyo.is-intro-complete:not(.is-mobile-home-active) .mobile-entry-cue {
    opacity: 0.52;
  }

  @keyframes mobile-entry-line {
    0% { transform: translateY(-0.75rem); opacity: 0; }
    25% { opacity: 1; }
    75% { opacity: 1; }
    100% { transform: translateY(1.9rem); opacity: 0; }
  }

  .theme-menu {
    position: absolute;
    top: calc(100dvh + 42vh);
    right: var(--mobile-edge);
    bottom: calc(4.5rem + env(safe-area-inset-bottom));
    left: var(--mobile-edge);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(var(--theme-count, 6), minmax(0, 1fr));
    align-items: stretch;
    padding: 0;
  }

  .theme-menu__item,
  .theme-menu__item:disabled {
    display: grid;
    grid-template-columns: 3rem 1fr;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    align-items: center;
    border-top: var(--border-thin);
    border-right: 0;
    border-left: 0;
    color: var(--color-foreground);
    opacity: 1;
    overflow: visible;
    cursor: default;
  }

  .theme-menu__item:last-child {
    border-right: 0;
    border-bottom: var(--border-thin);
  }
  .theme-menu__item::before,
  .theme-menu__item::after { display: none; }
  .theme-menu__index {
    position: static;
    padding-left: 0.15rem;
    opacity: 0.56;
    transform: none;
    font-size: 0.5rem;
  }
  .theme-menu__label {
    font-size: clamp(0.8rem, 4vw, 1rem);
    letter-spacing: 0.16em;
    transform: none;
  }
  .theme-menu__item:hover .theme-menu__index,
  .theme-menu__item:focus-visible .theme-menu__index,
  .theme-menu__item.is-active .theme-menu__index,
  .theme-menu__item:hover .theme-menu__label,
  .theme-menu__item:focus-visible .theme-menu__label,
  .theme-menu__item.is-active .theme-menu__label { transform: none; }
  .theme-menu:has(.theme-menu__item:hover) .theme-menu__item:not(:hover),
  .theme-menu:has(.theme-menu__item:focus-visible) .theme-menu__item:not(:focus-visible) { opacity: 1; }

  .language-switcher {
    position: static;
    gap: 1rem;
  }

  @media (prefers-reduced-motion: reduce) {
    .mobile-entry-cue__line::after { animation: none; }
  }
  .language-switcher button {
    min-width: 1.4rem;
    min-height: 1.4rem;
    font-size: 0.55rem;
  }

  .bottom-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(3.25rem + env(safe-area-inset-bottom));
    box-sizing: border-box;
    background: rgb(240 238 232 / 95%);
  }

  .bottom-bar .language-switcher {
    top: 1.625rem;
    left: max(var(--mobile-edge), env(safe-area-inset-left));
  }

  .bottom-bar__close {
    top: 1.625rem;
    width: 2.75rem;
    height: 2.75rem;
  }

  .bottom-bar__close span,
  .bottom-bar__close span::before {
    width: 1.8rem;
  }

  .bottom-bar__copyright {
    top: 1.625rem;
    right: max(var(--mobile-edge), env(safe-area-inset-right));
    font-size: 0.4rem;
    letter-spacing: 0.1em;
  }

  .theme-stage,
  .world-view__reveal,
  .artist-view__navigation-button[data-artist-target="2"] {
    display: none !important;
  }

  html[data-active-theme="life"] .theme-stage,
  html.is-theme-closing[data-closing-theme="life"] .theme-stage,
  html[data-active-theme="chef"] .theme-stage,
  html.is-theme-closing[data-closing-theme="chef"] .theme-stage,
  html[data-active-theme="world"] .theme-stage,
  html.is-theme-closing[data-closing-theme="world"] .theme-stage,
  html[data-active-theme="artist"] .theme-stage,
  html.is-theme-closing[data-closing-theme="artist"] .theme-stage,
  html[data-active-theme="projects"] .theme-stage,
  html.is-theme-closing[data-closing-theme="projects"] .theme-stage,
  html[data-active-theme="contact"] .theme-stage,
  html.is-theme-closing[data-closing-theme="contact"] .theme-stage {
    display: block !important;
  }

  .theme-stage__content,
  .theme-view,
  .chef-view {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .chef-view__portrait-reveal {
    position: absolute;
    top: auto;
    right: -20vw;
    bottom: 0;
    left: auto;
    z-index: 0;
    display: block;
    width: 105vw;
    height: auto;
    aspect-ratio: 1122 / 1402;
    opacity: 0;
    pointer-events: none;
    transform: translateX(1.5rem);
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgb(0 0 0 / 28%) 8%,
      #000 24%,
      #000 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgb(0 0 0 / 28%) 8%,
      #000 24%,
      #000 100%
    );
    transition:
      opacity 900ms var(--ease-standard) 160ms,
      transform 1000ms var(--ease-expressive) 160ms;
  }

  .chef-view__portrait-reveal::after { display: none; }

  .chef-view__portrait {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
    filter: grayscale(1) contrast(1.13) brightness(0.98);
    opacity: 0.82;
  }

  .theme-stage.is-theme-visible .chef-view__portrait-reveal,
  .theme-stage.is-theme-visible .chef-view__portrait-reveal[data-reveal-state="static"] {
    opacity: 1;
    transform: translateX(0);
  }

  .theme-stage.is-theme-visible
    .chef-view__portrait-reveal[data-reveal-state="static"] {
    -webkit-mask-image:
      linear-gradient(
        to right,
        transparent 0%,
        rgb(0 0 0 / 35%) 10%,
        #000 28%,
        #000 100%
      ),
      linear-gradient(
        to bottom,
        transparent 0%,
        rgb(0 0 0 / 55%) 4%,
        #000 12%,
        #000 100%
      );
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(
        to right,
        transparent 0%,
        rgb(0 0 0 / 35%) 10%,
        #000 28%,
        #000 100%
      ),
      linear-gradient(
        to bottom,
        transparent 0%,
        rgb(0 0 0 / 55%) 4%,
        #000 12%,
        #000 100%
      );
    mask-composite: intersect;
  }

  .chef-view__introduction {
    top: 20vh;
    right: var(--mobile-edge);
    left: var(--mobile-edge);
    gap: 0.7rem;
    align-items: baseline;
  }

  .chef-view__kicker {
    font-size: 0.5rem;
    letter-spacing: 0.18em;
  }

  .chef-view__title {
    font-size: clamp(1.45rem, 8vw, 2rem);
    letter-spacing: 0.08em;
  }

  .chef-view__navigation {
    top: 31vh;
    left: var(--mobile-edge);
    width: clamp(10.5rem, 48vw, 13rem);
  }

  .chef-view__navigation-button {
    grid-template-columns: 2.65rem 1fr;
    min-height: 3.2rem;
    padding: 0;
    pointer-events: none;
  }

  .chef-view__navigation-item:first-child .chef-view__navigation-button {
    pointer-events: auto;
  }

  .chef-view__navigation-item:nth-child(2) .chef-view__navigation-button {
    pointer-events: auto;
  }

  .chef-view__navigation-item:nth-child(3) .chef-view__navigation-button {
    pointer-events: auto;
  }

  .chef-view__navigation-item:nth-child(4) .chef-view__navigation-button {
    pointer-events: auto;
  }

  .chef-view__navigation-number { font-size: 0.48rem; }
  .chef-view__navigation-label {
    font-size: clamp(0.66rem, 3vw, 0.78rem);
    letter-spacing: 0.13em;
  }

  .chef-view:not([data-active-section])
    .chef-view__navigation-item {
    max-height: 3.2rem;
    overflow: hidden;
    opacity: 1;
    transition:
      max-height 520ms var(--ease-expressive),
      opacity 260ms var(--ease-standard),
      border-color 260ms var(--ease-standard);
  }

  .chef-view[data-active-section="0"] .chef-view__portrait-reveal,
  .chef-view[data-active-section="0"] .chef-view__introduction,
  .chef-view[data-active-section="0"] .chef-view__navigation {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-1.5rem);
    transition-delay: 0s;
  }

  .chef-view[data-active-section="1"] .chef-view__portrait-reveal,
  .chef-view[data-active-section="1"] .chef-view__introduction,
  .chef-view[data-active-section="1"] .chef-view__navigation {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-1.5rem);
    transition-delay: 0s;
  }

  .chef-view[data-active-section="2"] .chef-view__portrait-reveal,
  .chef-view[data-active-section="2"] .chef-view__introduction {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-1.5rem);
    transition-delay: 0s;
  }

  .chef-career {
    top: 18vh;
    right: var(--mobile-edge);
    bottom: calc(4.8rem + env(safe-area-inset-bottom));
    left: var(--mobile-edge);
    padding-right: 3.75rem;
    overflow: hidden;
  }

  .chef-career.is-visible {
    display: block;
  }

  .chef-career__eyebrow {
    margin-bottom: 0.65rem;
    font-size: 0.48rem;
    letter-spacing: 0.16em;
  }

  .chef-career__heading {
    max-width: 11ch;
    font-size: clamp(1.65rem, 8.5vw, 2.2rem);
    line-height: 0.94;
  }

  .chef-career__period {
    margin-top: clamp(1.35rem, 4vh, 2rem);
    font-size: 0.5rem;
  }

  .chef-career__chapter {
    margin-top: 0.45rem;
    font-size: clamp(0.9rem, 4.5vw, 1.15rem);
  }

  .chef-career__text {
    max-width: none;
    max-height: 18vh;
    margin-top: 0.75rem;
    padding-right: 0.35rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    font-size: clamp(0.67rem, 3.2vw, 0.8rem);
    line-height: 1.55;
    scrollbar-width: none;
  }

  .chef-career__text::-webkit-scrollbar { display: none; }

  .chef-career__places-label {
    margin-top: 1rem;
    font-size: 0.45rem;
  }

  .chef-career__places {
    display: block;
    max-height: 19vh;
    margin-top: 0.5rem;
    padding-right: 0.35rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .chef-career__places::-webkit-scrollbar { display: none; }

  .chef-career__places li {
    padding: 0.22rem 0;
    border-bottom: 1px solid rgb(27 27 25 / 12%);
    font-size: clamp(0.56rem, 2.75vw, 0.68rem);
    line-height: 1.35;
  }

  .chef-career__timeline {
    top: 10.5rem;
    right: 0;
    bottom: 1rem;
    left: auto;
    display: grid;
    grid-template-rows: repeat(5, minmax(0, 1fr));
    grid-template-columns: 3.15rem;
    width: 3.15rem;
  }

  .chef-career__timeline::before {
    top: 0;
    right: 0.2rem;
    bottom: 0;
    left: auto;
    width: 1px;
    height: auto;
  }

  .chef-career__timeline-button {
    height: 100%;
    padding: 0 0.95rem 0 0;
    text-align: right;
  }

  .chef-career__timeline-year {
    position: absolute;
    top: 50%;
    right: 0.95rem;
    font-size: 0.43rem;
    transform: translateY(-50%);
  }

  .chef-career__timeline-marker {
    top: calc(50% - 0.22rem);
    right: 0;
    bottom: auto;
    left: auto;
    width: 0.45rem;
    height: 0.45rem;
  }

  .chef-career__timeline-button:hover .chef-career__timeline-year,
  .chef-career__timeline-button:focus-visible .chef-career__timeline-year,
  .chef-career__timeline li.is-active .chef-career__timeline-year {
    transform: translate(-0.15rem, -50%);
  }

  .chef-career__mobile-close {
    display: none;
  }

  .chef-career__mobile-close span,
  .chef-career__mobile-close span::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.45rem;
    height: 1px;
    background: currentColor;
  }

  .chef-career__mobile-close span {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .chef-career__mobile-close span::before {
    content: "";
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .chef-philosophy {
    top: 18vh;
    right: var(--mobile-edge);
    bottom: calc(4.8rem + env(safe-area-inset-bottom));
    left: var(--mobile-edge);
    padding-right: 0.2rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .chef-philosophy::-webkit-scrollbar { display: none; }

  .chef-philosophy.is-visible { display: block; }

  .chef-philosophy__eyebrow {
    margin-bottom: 0.65rem;
    font-size: 0.48rem;
    letter-spacing: 0.16em;
  }

  .chef-philosophy__heading {
    font-size: clamp(1.65rem, 8.5vw, 2.2rem);
    line-height: 0.94;
  }

  .chef-philosophy__intro {
    position: static;
    max-width: none;
    margin-top: 1.1rem;
    font-size: clamp(0.65rem, 3.1vw, 0.78rem);
    line-height: 1.55;
  }

  .chef-philosophy__intro span + span { margin-top: 0.12rem; }

  .chef-philosophy__principles {
    margin-top: 1.4rem;
    border-bottom: var(--border-thin);
  }

  .chef-philosophy__principle {
    grid-template-columns: 1.15rem 1fr;
    gap: 0 0.65rem;
    min-height: 0;
    padding: 0.9rem 0;
    align-items: start;
  }

  .chef-philosophy__principle:hover { padding-left: 0; }

  .chef-philosophy__marker {
    grid-row: 1 / span 2;
    width: 0.45rem;
    height: 0.45rem;
    margin-top: 0.12rem;
  }

  .chef-philosophy__title {
    font-size: clamp(0.7rem, 3.25vw, 0.82rem);
    line-height: 1.2;
    letter-spacing: 0.14em;
  }

  .chef-philosophy__text {
    grid-column: 2;
    margin-top: 0.48rem;
    font-size: clamp(0.62rem, 2.9vw, 0.74rem);
    line-height: 1.5;
  }

  .chef-philosophy__principles:has(.chef-philosophy__principle:hover)
    .chef-philosophy__principle:not(:hover) {
    opacity: 1;
  }

  /* CHEF / PHOTOS — vertical mobile contact sheet */
  .theme-stage.is-theme-visible
    .chef-view[data-active-section="3"]
    .chef-view__navigation {
    top: 16.5vh;
    right: var(--mobile-edge);
    left: var(--mobile-edge);
    width: auto;
    visibility: visible;
    opacity: 1;
    pointer-events: none;
    transform: none;
  }

  .chef-view[data-active-section="3"] .chef-view__navigation-item {
    display: none;
  }

  .chef-view[data-active-section="3"]
    .chef-view__navigation-item:nth-child(4) {
    display: block;
    border: 0;
    animation: mobile-chef-section-enter 850ms var(--ease-expressive) both;
  }

  .chef-view[data-active-section="3"]
    .chef-view__navigation-item:nth-child(4)
    > .chef-view__navigation-button {
    grid-template-columns: 2.65rem minmax(0, 1fr);
    min-height: 2rem;
    border: 0;
    pointer-events: none;
  }

  .chef-view[data-active-section="3"]
    .chef-view__navigation-item:nth-child(4)
    .chef-view__navigation-label {
    font-size: clamp(1.65rem, 8.5vw, 2.2rem);
    line-height: 0.94;
    letter-spacing: 0.08em;
  }

  .chef-photos {
    display: block;
    transform: translateY(1rem);
    transition:
      visibility 0s linear 700ms,
      opacity 600ms var(--ease-standard),
      transform 850ms var(--ease-expressive);
  }

  .chef-photos.is-visible {
    transform: translateY(0);
    transition-delay: 0s, 80ms, 80ms;
  }

  .chef-photos__years,
  .chef-photos__timeline {
    display: none;
  }

  .chef-photos__viewport {
    top: 25vh;
    right: var(--mobile-edge);
    bottom: max(4rem, calc(env(safe-area-inset-bottom) + 3.2rem));
    left: var(--mobile-edge);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .chef-photos__viewport::-webkit-scrollbar {
    display: none;
  }

  .chef-photos__track {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    width: 100%;
    height: auto;
    padding-bottom: 1rem;
    transform: none !important;
    contain: none;
    will-change: auto;
  }

  .chef-photos__year-group,
  .chef-photos__year-grid,
  .chef-photos__year-grid.is-mosaic {
    display: contents;
  }

  .chef-photos__tile,
  .chef-photos__empty-tile {
    grid-row: auto !important;
    grid-column: auto !important;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .chef-photos__image {
    filter: grayscale(1) contrast(1.08);
    transform: scale(1.01);
  }

  .chef-photos__tile:hover .chef-photos__image,
  .chef-photos__tile:focus-visible .chef-photos__image {
    filter: grayscale(1) contrast(1.08);
    transform: scale(1.01);
  }

  .chef-photos > .chef-photos__close,
  .chef-photos__viewer-close {
    position: fixed;
    bottom: max(0.65rem, calc(env(safe-area-inset-bottom) + 0.15rem));
    width: 2rem;
    height: 2rem;
  }

  .chef-photos__viewer {
    position: fixed;
    inset: 0;
    touch-action: pan-y;
  }

  .chef-photos__viewer-frame {
    top: max(7.4rem, calc(env(safe-area-inset-top) + 5.8rem));
    right: var(--mobile-edge);
    bottom: max(4rem, calc(env(safe-area-inset-bottom) + 3.2rem));
    left: var(--mobile-edge);
  }

  .chef-photos__viewer-image {
    max-width: 100%;
    max-height: 100%;
  }

  .chef-photos__viewer-metadata {
    top: auto;
    right: var(--mobile-edge);
    bottom: max(4.2rem, calc(env(safe-area-inset-bottom) + 3.2rem));
    left: var(--mobile-edge);
    width: auto;
    padding: 0.75rem;
    background: rgb(240 238 232 / 76%);
    border-top: var(--border-thin);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transform: none;
  }

  .chef-photos__viewer-title {
    margin-top: 0.45rem;
    font-size: clamp(0.9rem, 4.5vw, 1.1rem);
  }

  .chef-photos__viewer-description {
    max-width: none;
    margin-top: 0.55rem;
    font-size: 0.64rem;
    line-height: 1.45;
  }

  .chef-view[data-active-section="2"] .chef-view__navigation {
    top: 16.5vh;
    right: var(--mobile-edge);
    left: var(--mobile-edge);
    width: auto;
    opacity: 1;
    transform: none;
  }

  .chef-view[data-active-section="2"] .chef-view__navigation-item {
    display: none;
  }

  .chef-view[data-active-section="2"]
    .chef-view__navigation-item:nth-child(3) {
    display: block;
    border: 0;
    animation: mobile-chef-section-enter 850ms var(--ease-expressive) both;
  }

  .chef-view[data-active-section="2"]
    .chef-view__navigation-item:nth-child(3)
    > .chef-view__navigation-button {
    grid-template-columns: 2.65rem minmax(0, 1fr);
    min-height: 2rem;
    border: 0;
    pointer-events: none;
  }

  .chef-view[data-active-section="2"]
    .chef-view__navigation-item:nth-child(3)
    .chef-view__navigation-label {
    font-size: clamp(1.65rem, 8.5vw, 2.2rem);
    line-height: 0.94;
    letter-spacing: 0.08em;
  }

  .chef-view[data-active-section="2"] .chef-view__recipe-categories {
    display: flex;
    gap: 0.45rem;
    width: calc(100% + var(--mobile-edge));
    max-height: none;
    margin: 0.8rem 0 0;
    padding: 0 0.9rem 0.55rem 0;
    overflow-x: auto;
    overflow-y: hidden;
    visibility: visible;
    opacity: 1;
    transform: none;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 0;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .chef-view[data-active-section="2"]
    .chef-view__recipe-categories::-webkit-scrollbar {
    display: none;
  }

  .chef-view[data-active-section="2"]
    .chef-view__recipe-categories li {
    flex: 0 0 clamp(8.5rem, 42vw, 10.5rem);
    min-width: 0;
    scroll-snap-align: start;
  }

  .chef-view[data-active-section="2"] .chef-view__recipe-category {
    grid-template-columns: 1.65rem minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    min-height: 3rem;
    padding: 0.55rem 0.65rem 0.55rem 0;
    border-top: var(--border-thin);
    border-bottom: var(--border-thin);
    opacity: 0.35;
  }

  .chef-view[data-active-section="2"]
    .chef-view__recipe-category-number {
    font-size: 0.46rem;
  }

  .chef-view[data-active-section="2"]
    .chef-view__recipe-category-label {
    overflow: hidden;
    font-size: clamp(0.62rem, 3vw, 0.75rem);
    line-height: 1.15;
    letter-spacing: 0.1em;
    text-overflow: clip;
    white-space: normal;
  }

  .chef-view[data-active-section="2"]
    .chef-view__recipe-category[aria-current="true"] {
    opacity: 1;
    transform: none;
  }

  .chef-recipes {
    top: 32vh;
    right: var(--mobile-edge);
    bottom: calc(4.8rem + env(safe-area-inset-bottom));
    left: var(--mobile-edge);
    display: block;
    transform: translateY(1rem);
    transition:
      visibility 0s linear 600ms,
      opacity 600ms var(--ease-standard),
      transform 850ms var(--ease-expressive);
    text-transform: uppercase;
  }

  .chef-recipes.is-visible {
    display: block;
    transform: translateY(0);
    transition-delay: 0s, 80ms, 80ms;
  }
  .chef-recipes__detail { width: 100%; height: 100%; }
  .chef-recipes__index,
  .chef-recipes__recipe-detail {
    transition:
      visibility 0s linear 240ms,
      opacity 240ms var(--ease-standard),
      transform 420ms var(--ease-expressive);
  }
  .chef-recipes.is-visible[data-recipe-mode="index"]
    .chef-recipes__index,
  .chef-recipes.is-visible[data-recipe-mode="detail"].is-canvas-ready
    .chef-recipes__recipe-detail {
    transition-delay: 0s, 0s, 0s;
  }
  .chef-recipes.is-loading-index .chef-recipes__index,
  .chef-recipes.is-loading-recipe .chef-recipes__index {
    opacity: 0.28;
    transform: translateY(0.3rem);
    pointer-events: none;
  }
  .chef-recipes.is-returning-index .chef-recipes__index {
    animation: mobile-recipe-index-return 520ms var(--ease-expressive) both;
  }
  .chef-recipes.is-opening-detail .chef-recipes__index,
  .chef-recipes.is-returning-index .chef-recipes__recipe-detail {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: none;
  }
  .chef-recipes[data-recipe-mode="index"] {
    bottom: calc(3.8rem + env(safe-area-inset-bottom));
  }
  .chef-recipes__index-eyebrow,
  .chef-recipes__index-title {
    display: none;
  }
  .chef-recipes__index-title {
    margin-top: 0.45rem;
    font-size: clamp(1.05rem, 5.2vw, 1.35rem);
    line-height: 1;
  }
  .chef-recipes__index-count {
    margin-top: 0.8rem;
    padding: 0.55rem 0;
  }
  .chef-recipes__index-search {
    margin-top: 0.45rem;
    min-height: 2.5rem;
    padding: 0.55rem 0;
    font-size: 0.5rem;
  }
  .chef-recipes__index-browser {
    height: calc(100% - 6.15rem);
    margin-top: 0.65rem;
  }
  .chef-recipes__index-viewport {
    padding-right: 0.25rem;
    scrollbar-width: none;
  }
  .chef-recipes__index-viewport::-webkit-scrollbar { display: none; }
  .chef-recipes__index-button {
    grid-template-columns: 2.35rem minmax(0, 1fr);
    gap: 0.15rem 0.55rem;
    min-height: 3.65rem;
    padding: 0.65rem 0;
  }
  .chef-recipes__index-thumb { display: none; }
  .chef-recipes__index-number {
    grid-row: 1 / span 2;
    font-size: 0.46rem;
  }
  .chef-recipes__index-recipe-title {
    font-size: clamp(0.68rem, 3.2vw, 0.8rem);
    line-height: 1.25;
  }
  .chef-recipes__index-meta {
    grid-column: 2;
    font-size: 0.42rem;
    line-height: 1.35;
  }
  .chef-recipes__index-button:hover,
  .chef-recipes__index-button:focus-visible { padding-left: 0; }

  .chef-recipes[data-recipe-mode="detail"] {
    position: fixed;
    top: max(15.75vh, calc(env(safe-area-inset-top) + 7.35rem));
    right: 0;
    bottom: max(4rem, calc(env(safe-area-inset-bottom) + 3.2rem));
    left: 0;
    z-index: 4;
    display: block;
    padding: 0 var(--mobile-edge) 1rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    animation: none;
    transform: none;
    transition: none;
  }
  .chef-recipes[data-recipe-mode="detail"].is-opening-detail
    .chef-recipes__recipe-detail {
    animation: mobile-recipe-detail-enter 560ms var(--ease-expressive) both;
  }
  .chef-recipes[data-recipe-mode="detail"]::-webkit-scrollbar {
    display: none;
  }
  .chef-recipes[data-recipe-mode="detail"] .chef-recipes__visual {
    position: absolute;
    top: 0;
    right: var(--mobile-edge);
    z-index: 5;
    display: block;
    width: clamp(3.8rem, 18vw, 4.6rem);
    height: auto;
    min-height: 0;
    aspect-ratio: 1;
  }
  .chef-recipes[data-recipe-mode="detail"] .chef-recipes__visual::after {
    inset: 0.3rem;
  }
  .chef-recipes[data-recipe-mode="detail"] .chef-recipes__visual-image {
    filter: grayscale(0) contrast(1);
  }
  .chef-recipes[data-recipe-mode="detail"] .chef-recipes__image-label,
  .chef-recipes[data-recipe-mode="detail"] .chef-recipes__visual-number {
    display: none;
  }
  .chef-recipes[data-recipe-mode="detail"] .chef-recipes__detail {
    width: 100%;
    height: auto;
    min-height: 0;
    position: static;
  }
  .chef-recipes__recipe-detail {
    position: relative;
    inset: auto;
    padding-right: 0.15rem;
    overflow: visible;
  }
  .chef-recipes__back { display: none; }
  .chef-recipes__title {
    max-width: calc(100% - 5rem);
    min-height: clamp(3.8rem, 18vw, 4.6rem);
    margin-top: 0.4rem;
    font-size: clamp(1.5rem, 7.6vw, 2rem);
    line-height: 0.94;
  }
  .chef-recipes__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 1rem;
    margin-top: 1rem;
    padding: 0.65rem 0;
  }
  .chef-recipes__meta dt,
  .chef-recipes__meta dd { grid-row: auto; }
  .chef-recipes__meta dd { margin-top: 0; }
  .chef-recipes__tabs {
    gap: 1.15rem;
    margin-top: 1rem;
    overflow-x: auto;
  }
  .chef-recipes__tab {
    flex: 0 0 auto;
    font-size: 0.46rem;
  }
  .chef-recipes__content { margin-top: 1rem; padding-bottom: 1rem; }
  .chef-recipes__ingredients,
  .chef-recipes__method {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .chef-recipes__ingredients li {
    grid-template-columns: 4.25rem 1fr;
    padding: 0.5rem 0;
  }
  .chef-recipes__method li {
    padding: 0.55rem 0;
    border-bottom: var(--border-thin);
  }
  .chef-recipes__ingredients span:last-child,
  .chef-recipes__method p,
  .chef-recipes__note {
    font-size: 0.68rem;
  }

  .chef-view:has(.chef-recipes[data-recipe-mode="detail"])
    .chef-view__navigation {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  html[data-active-theme="chef"]:has(
    .chef-recipes[data-recipe-mode="detail"].is-visible
  ) .theme-stage__close {
    visibility: visible;
    opacity: 0.62;
    pointer-events: auto;
  }

  html[data-active-theme] .mobile-intro-copy { opacity: 0; }

  html[data-active-theme="chef"] .theme-stage__close,
  html.is-theme-closing[data-closing-theme="chef"] .theme-stage__close {
    top: auto;
    right: auto;
    bottom: max(0.65rem, calc(env(safe-area-inset-bottom) + 0.15rem));
    left: calc(50% - 1rem);
    width: 2rem;
    height: 2rem;
  }

  /* PROJECTS — compact mobile register */

  .projects-view {
    overflow: hidden;
  }

  .projects-view__kicker {
    top: max(8.35rem, 18vh);
    left: var(--mobile-edge);
    font-size: 0.5rem;
    letter-spacing: 0.18em;
  }

  .projects-view__register {
    top: max(10.7rem, 23vh);
    right: var(--mobile-edge);
    bottom: calc(7.9rem + env(safe-area-inset-bottom));
    left: var(--mobile-edge);
    width: auto;
    height: auto;
  }

  .projects-view__active {
    display: block;
    width: 100%;
    min-height: 0;
    height: 100%;
  }

  .projects-view__dash {
    display: none;
  }

  .projects-view__active-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0;
    border-left: 0;
  }

  .projects-view__number {
    margin-bottom: 0.45rem;
    font-size: 0.55rem;
    opacity: 0.58;
  }

  .projects-view__active h2,
  .projects-view[data-active-project="yam-yam-sushi"] .projects-view__active h2,
  .projects-view[data-active-project="yamu-maru-crew"] .projects-view__active h2 {
    max-width: 100%;
    font-size: clamp(1.65rem, 9vw, 2.2rem);
    line-height: 0.96;
    letter-spacing: -0.025em;
    white-space: normal;
  }

  .projects-view__external-link {
    align-self: flex-start;
    min-height: 2.35rem;
    gap: 0.6rem;
    margin-top: 0.5rem;
    font-size: 0.5rem;
  }

  .projects-view__external-link svg {
    width: 1.15rem;
    height: 1.15rem;
  }

  .projects-view__metadata {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    margin-top: 1.15rem;
  }

  .projects-view__status,
  .projects-view__category {
    font-size: 0.48rem;
    line-height: 1.65;
  }

  .projects-view__metadata > span {
    margin: 0.75rem 0 0.85rem;
  }

  .projects-view__description {
    max-width: none;
    padding-right: 0.35rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    font-size: clamp(0.58rem, 2.8vw, 0.7rem);
    line-height: 1.6;
    scrollbar-width: none;
  }

  .projects-view__description::-webkit-scrollbar {
    display: none;
  }

  .projects-view__preview {
    display: none;
  }

  .projects-view__rail {
    top: auto;
    right: var(--mobile-edge);
    bottom: calc(4.35rem + env(safe-area-inset-bottom));
    left: var(--mobile-edge);
    width: auto;
    height: 2.5rem;
  }

  .projects-view__rail-line {
    top: 0.35rem;
    right: 0;
    bottom: auto;
    left: 0;
    border-top: var(--border-thin);
    border-left: 0;
  }

  .projects-view__rail ol {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    width: min(86%, 30rem);
    margin-inline: auto;
  }

  .projects-view__rail button {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.45rem;
    width: 100%;
    min-height: 2.4rem;
    text-align: center;
    touch-action: manipulation;
  }

  .projects-view__rail-marker {
    width: 0.55rem;
    height: 0.55rem;
  }

  .projects-view__rail-label {
    font-size: 0.43rem;
    opacity: 0.5;
  }

  .projects-view__rail button.is-active .projects-view__rail-label {
    opacity: 1;
  }

  .theme-stage.is-theme-visible .projects-view__active,
  .theme-stage.is-theme-visible .projects-view__rail {
    animation: mobile-chef-section-enter 760ms var(--ease-expressive) both;
  }

  html[data-active-theme="projects"] .theme-stage__close,
  html.is-theme-closing[data-closing-theme="projects"] .theme-stage__close {
    top: auto;
    right: auto;
    bottom: max(0.65rem, calc(env(safe-area-inset-bottom) + 0.15rem));
    left: calc(50% - 1rem);
    width: 2rem;
    height: 2rem;
  }

  /* CONTACT — quiet direct connection */

  .contact-view {
    overflow: hidden;
  }

  .contact-view__kicker {
    top: max(8.35rem, 18vh);
    left: var(--mobile-edge);
    font-size: 0.5rem;
    letter-spacing: 0.18em;
  }

  .contact-view__statement {
    top: max(10.65rem, 23vh);
    right: var(--mobile-edge);
    left: var(--mobile-edge);
    width: auto;
  }

  .contact-view__statement h2,
  html[data-locale="de"] .contact-view__statement h2,
  html[data-locale="vi"] .contact-view__statement h2 {
    max-width: 100%;
    font-size: clamp(1.7rem, 9vw, 2.25rem);
    line-height: 0.95;
    letter-spacing: -0.025em;
  }

  .contact-view__lines {
    gap: 0.18rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    font-size: clamp(0.48rem, 2.35vw, 0.58rem);
    line-height: 1.5;
    letter-spacing: 0.13em;
  }

  .contact-view__intro {
    margin-top: 0.75rem;
    font-size: 0.43rem;
    line-height: 1.5;
    letter-spacing: 0.14em;
  }

  .contact-view__channels {
    top: max(20.2rem, 47vh);
    right: var(--mobile-edge);
    bottom: calc(4.3rem + env(safe-area-inset-bottom));
    left: var(--mobile-edge);
    width: auto;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .contact-view__channels::-webkit-scrollbar {
    display: none;
  }

  .contact-view__channels > div {
    grid-template-columns: 4.6rem minmax(0, 1fr);
    gap: 0.6rem;
    min-height: 44px;
    padding: 0.55rem 0;
    align-items: center;
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: 0.12em;
  }

  .contact-view__channels a,
  .contact-view__channels button,
  .contact-view__channels > div > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
    letter-spacing: 0.1em;
  }

  .contact-view__channels a:hover,
  .contact-view__channels a:focus-visible,
  .contact-view__channels button:hover,
  .contact-view__channels button:focus-visible {
    letter-spacing: 0.1em;
    opacity: 0.58;
  }

  .contact-view__axis {
    display: none;
  }

  .contact-view__qr {
    position: fixed;
    padding: var(--mobile-edge);
    background: color-mix(in srgb, var(--color-background) 96%, transparent);
  }

  .contact-view__qr-panel {
    width: 100%;
    max-width: 22rem;
    padding: 1.35rem 1.25rem 1rem;
  }

  .contact-view__qr-eyebrow,
  .contact-view__qr-hint {
    font-size: 0.48rem;
    line-height: 1.5;
  }

  .contact-view__qr-panel h3 {
    margin-top: 0.55rem;
    font-size: clamp(1.1rem, 5.7vw, 1.4rem);
    line-height: 1.05;
  }

  .contact-view__qr-panel img {
    width: min(11.5rem, 28vh);
    margin: 1rem auto;
  }

  .contact-view__qr-close {
    width: 2rem;
    height: 2rem;
    margin-top: 0.75rem;
  }

  .theme-stage.is-theme-visible .contact-view__statement,
  .theme-stage.is-theme-visible .contact-view__channels {
    animation: mobile-chef-section-enter 760ms var(--ease-expressive) both;
  }

  html[data-active-theme="contact"] .theme-stage__close,
  html.is-theme-closing[data-closing-theme="contact"] .theme-stage__close {
    top: auto;
    right: auto;
    bottom: max(0.65rem, calc(env(safe-area-inset-bottom) + 0.15rem));
    left: calc(50% - 1rem);
    width: 2rem;
    height: 2rem;
  }

  html:has(.contact-view__qr.is-visible) .theme-stage__close {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  /* ARTIST — mobile chapter and three touch-first archives */

  .artist-view {
    overflow: hidden;
  }

  .artist-view__ink {
    opacity: 1;
    pointer-events: none;
  }

  .artist-view__introduction {
    top: 20vh;
    right: var(--mobile-edge);
    left: var(--mobile-edge);
    gap: 0.7rem;
  }

  .artist-view__kicker {
    font-size: 0.5rem;
    letter-spacing: 0.18em;
  }

  .artist-view__title {
    font-size: clamp(1.45rem, 8vw, 2rem);
    letter-spacing: 0.08em;
  }

  .artist-view__navigation {
    top: 31vh;
    right: var(--mobile-edge);
    left: var(--mobile-edge);
    width: auto;
  }

  .artist-view__navigation-item:nth-child(3) {
    display: none;
  }

  .artist-view__navigation-button {
    grid-template-columns: 3rem 1fr;
    min-height: 4rem;
    padding: 0;
    background: transparent;
    touch-action: manipulation;
  }

  .artist-view__navigation-number {
    font-size: 0.48rem;
  }

  .artist-view__navigation-label {
    font-size: clamp(0.7rem, 3.4vw, 0.84rem);
    letter-spacing: 0.14em;
  }

  .artist-view__navigation-button:hover .artist-view__navigation-label,
  .artist-view__navigation-button:focus-visible .artist-view__navigation-label,
  .artist-view__navigation-item.is-active .artist-view__navigation-label {
    transform: none;
  }

  .artist-view__navigation-button:hover,
  .artist-view__navigation-button:active,
  .artist-view__navigation-button:focus-visible,
  .artist-view__navigation-item.is-active .artist-view__navigation-button {
    background: transparent;
  }

  .artist-view__board-version,
  .artist-board {
    display: none !important;
  }

  html[data-active-theme="artist"] .theme-stage__close,
  html.is-theme-closing[data-closing-theme="artist"] .theme-stage__close {
    top: auto;
    right: auto;
    bottom: max(0.65rem, calc(env(safe-area-inset-bottom) + 0.15rem));
    left: calc(50% - 1rem);
    width: 2rem;
    height: 2rem;
  }

  /* WORLD — touch-first continent and place archive */

  .world-view {
    overflow: hidden;
    background: var(--color-background);
  }

  .world-view__introduction {
    top: max(8.35rem, 18vh);
    right: var(--mobile-edge);
    left: var(--mobile-edge);
    display: flex;
    gap: 0.7rem;
    align-items: baseline;
  }

  .world-view__kicker {
    font-size: 0.5rem;
  }

  .world-view__title {
    font-size: clamp(1.75rem, 10vw, 2.5rem);
  }

  .world-view__viewport {
    top: max(14.2rem, 32vh);
    right: var(--mobile-edge);
    bottom: calc(4.15rem + env(safe-area-inset-bottom));
    left: var(--mobile-edge);
    overflow: hidden;
    touch-action: pan-y;
  }

  .world-view__viewport::after {
    display: none;
  }

  .world-view__chapter-menu {
    position: absolute;
    top: max(11.25rem, 25.5vh);
    right: 0;
    left: var(--mobile-edge);
    z-index: 8;
    display: flex;
    gap: 0.45rem;
    padding-right: var(--mobile-edge);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    transition:
      opacity var(--duration-normal) var(--ease-standard),
      visibility 0s linear 0s;
  }

  .world-view[data-country-state="open"] .world-view__chapter-menu {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
      opacity var(--duration-fast) var(--ease-standard),
      visibility 0s linear var(--duration-fast);
  }

  .world-view__chapter-menu::-webkit-scrollbar {
    display: none;
  }

  .world-view__chapter-menu-button {
    position: relative;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: center;
    flex: 0 0 clamp(8.5rem, 42vw, 10.5rem);
    min-height: 3.15rem;
    padding: 0.5rem 0.65rem 0.5rem 0;
    border-top: var(--border-thin);
    border-bottom: var(--border-thin);
    color: var(--color-foreground);
    opacity: 0.35;
    scroll-snap-align: start;
    touch-action: manipulation;
    transition: opacity var(--duration-normal) var(--ease-standard);
  }

  .world-view__chapter-menu-button.is-active {
    opacity: 1;
  }

  .world-view__chapter-menu-button.is-active::before {
    position: absolute;
    left: 0.1rem;
    width: 0.42rem;
    height: 0.42rem;
    content: "";
    background: currentColor;
  }

  .world-view__chapter-menu-number,
  .world-view__chapter-menu-label {
    font-family: var(--font-mono);
    font-weight: var(--font-weight-light);
    line-height: 1.15;
    letter-spacing: 0.1em;
  }

  .world-view__chapter-menu-number {
    padding-left: 0.9rem;
    font-size: 0.46rem;
  }

  .world-view__chapter-menu-label {
    overflow: hidden;
    font-size: clamp(0.58rem, 2.8vw, 0.7rem);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .world-view .world-view__chapter-menu-button
    .world-view__chapter-menu-status {
    display: block;
    grid-column: 2;
    min-width: 0;
    max-width: 100%;
    margin-top: 0.2rem;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: clamp(0.32rem, 1.65vw, 0.4rem);
    font-weight: var(--font-weight-light);
    line-height: 1;
    letter-spacing: 0.13em;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
  }

  .world-view .world-view__chapter-menu-button.is-in-progress
    .world-view__chapter-menu-status {
    opacity: 0.58;
  }

  .world-view__track {
    top: 0;
    left: 0;
    grid-template-columns: repeat(5, calc(100vw - (2 * var(--mobile-edge))));
    width: max-content;
    padding: 0;
    transform: translate3d(var(--world-offset), 0, 0);
    transition: transform 150ms linear;
  }

  .world-view__track::before {
    display: none;
  }

  .world-view__chapter,
  .world-view__chapter:first-child {
    width: calc(100vw - (2 * var(--mobile-edge)));
    transform: none;
  }

  .world-view__chapter-heading {
    display: none;
  }

  .world-view__chapter.is-active .world-view__chapter-heading {
    opacity: 1;
  }

  .world-view__chapter-label {
    order: 2;
    align-self: auto;
    max-width: 100%;
    font-size: clamp(0.82rem, 4.5vw, 1.05rem);
    text-align: left;
  }

  .world-view__chapter-marker {
    display: none;
  }

  .world-view__chapter-number {
    order: 1;
    align-self: auto;
    padding: 0;
    font-size: 0.46rem;
  }

  .world-view__chapter-number::after {
    margin-left: 0.45rem;
    content: "/";
  }

  .world-view__chapter-status {
    display: none;
  }

  .world-view__locations {
    top: 0;
    right: 0;
    left: 0;
    gap: 0;
    min-width: 0;
    padding: 0;
    border: 0;
    border-top: var(--border-thin);
    border-bottom: var(--border-thin);
    background: var(--color-background);
    transform: translateY(0.6rem);
  }

  .world-view__chapter.is-active .world-view__locations {
    transform: none;
  }

  .world-view__location {
    min-height: 2.7rem;
    gap: 0.75rem;
    padding: 0 0.2rem;
    border-bottom: var(--border-thin);
    font-size: clamp(0.55rem, 2.8vw, 0.68rem);
    touch-action: manipulation;
  }

  .world-view__location:last-child {
    border-bottom: 0;
  }

  .world-view__location-marker {
    width: 0.52rem;
    height: 0.52rem;
  }

  .world-view__location-label {
    opacity: 0.5;
  }

  .world-view__location.has-country-study .world-view__location-label {
    opacity: 0.9;
  }

  .world-view__statement {
    display: none;
  }

  .world-view__timeline {
    display: none;
  }

  .world-view::after {
    position: absolute;
    right: var(--mobile-edge);
    bottom: calc(3.65rem + env(safe-area-inset-bottom));
    left: var(--mobile-edge);
    z-index: 18;
    height: 1px;
    content: "";
    background: var(--color-line);
    pointer-events: none;
  }

  html[data-active-theme="world"] .theme-stage__close,
  html.is-theme-closing[data-closing-theme="world"] .theme-stage__close {
    top: auto;
    right: auto;
    bottom: max(0.65rem, calc(env(safe-area-inset-bottom) + 0.15rem));
    left: calc(50% - 1rem);
    width: 2rem;
    height: 2rem;
  }

  /* WORLD / COUNTRY — horizontal place register, vertical reading */

  .world-country {
    top: max(7.85rem, 16.5vh);
    right: var(--mobile-edge);
    bottom: calc(3.75rem + env(safe-area-inset-bottom));
    left: var(--mobile-edge);
    overflow: hidden;
    background: var(--color-background);
    transform: translateX(1rem);
  }

  .world-country.is-visible {
    transform: translateX(0);
  }

  .world-country__header {
    top: 0;
    right: 0;
    left: 0;
  }

  .world-country__hierarchy {
    font-size: 0.43rem;
  }

  .world-country__title {
    margin-top: 0.55rem;
    font-size: clamp(1.55rem, 9vw, 2.2rem);
  }

  .world-country__back {
    min-height: 2.6rem;
    margin-top: 0.25rem;
    padding-right: 1rem;
    font-size: 0.55rem;
    touch-action: manipulation;
  }

  .world-country__places {
    top: 6.55rem;
    right: 0;
    bottom: auto;
    left: 0;
    display: flex;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-top: var(--border-thin);
    border-bottom: var(--border-thin);
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .world-country__places::-webkit-scrollbar {
    display: none;
  }

  .world-country__places::before {
    display: none;
  }

  .world-country__places li {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .world-country__place-button {
    width: auto;
    min-width: 7rem;
    min-height: 2.65rem;
    gap: 0.55rem;
    padding: 0 0.75rem;
    border-right: var(--border-thin);
    touch-action: manipulation;
  }

  .world-country__place-label {
    font-size: 0.57rem;
    white-space: nowrap;
  }

  .world-country__content {
    top: 9.55rem;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.7rem 0 1.25rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .world-country__period {
    font-size: 0.43rem;
  }

  .world-country__place-title {
    max-width: calc(100% - 3rem);
    margin-top: 0.45rem;
    font-size: clamp(1.15rem, 7vw, 1.65rem);
    line-height: 1.05;
  }

  .world-country__external-link {
    top: 0.75rem;
    right: 0;
    width: 2.15rem;
    height: 2.15rem;
  }

  .world-country__content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
    height: auto;
    margin-top: 1.1rem;
    overflow: visible;
  }

  .world-country__content-item,
  .world-country__content-item:first-child,
  .world-country__content-item:nth-child(2),
  .world-country__content-item:nth-child(3) {
    width: 100%;
    padding: 1rem 0 1.15rem;
    border-top: var(--border-thin);
  }

  .world-country__content-label {
    font-size: 0.45rem;
  }

  .world-country__content-text {
    margin-top: 0.65rem;
    font-size: clamp(0.68rem, 3.5vw, 0.82rem);
    line-height: 1.65;
  }

  .world-country__timeline {
    display: none;
  }

  .world-view[data-country-state="open"] .world-view__introduction,
  .world-view[data-country-state="open"] .world-view__statement {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .world-view[data-country-state="open"] .world-view__viewport::after {
    opacity: 0;
  }

  /* SPECIAL THANKS */

  .artist-thanks {
    background: var(--color-background);
  }

  .artist-thanks::before {
    opacity: 0.12;
    background: linear-gradient(
      90deg,
      transparent 0 var(--mobile-edge),
      currentColor var(--mobile-edge) calc(var(--mobile-edge) + 1px),
      transparent calc(var(--mobile-edge) + 1px)
    );
  }

  .artist-thanks__header {
    top: 18vh;
    right: var(--mobile-edge);
    left: var(--mobile-edge);
    gap: 0.65rem;
  }

  .artist-thanks__kicker {
    font-size: 0.48rem;
  }

  .artist-thanks__header h2 {
    font-size: clamp(1.25rem, 6.8vw, 1.7rem);
  }

  .artist-thanks__names {
    top: 25vh;
    right: var(--mobile-edge);
    left: var(--mobile-edge);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: auto;
    border-top: var(--border-thin);
    border-bottom: var(--border-thin);
  }

  .artist-thanks__names li,
  .artist-thanks__names li:last-child {
    border: 0;
  }

  .artist-thanks__names button {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    min-height: 3.5rem;
    padding: 0.55rem 0.35rem;
    text-align: center;
    touch-action: manipulation;
  }

  .artist-thanks__names li + li button {
    border-left: var(--border-thin);
  }

  .artist-thanks__names button span {
    font-size: 0.43rem;
  }

  .artist-thanks__names button strong {
    overflow: hidden;
    font-size: clamp(0.48rem, 2.45vw, 0.59rem);
    letter-spacing: 0.09em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .artist-thanks__names li.is-active button strong,
  .artist-thanks__names button:hover strong,
  .artist-thanks__names button:focus-visible strong {
    transform: none;
  }

  .artist-thanks__tribute {
    top: 36vh;
    right: var(--mobile-edge);
    bottom: calc(4.5rem + env(safe-area-inset-bottom));
    left: var(--mobile-edge);
    width: auto;
    min-height: 0;
    padding: 0.3rem 0.15rem 1rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: color-mix(in srgb, var(--color-background) 94%, transparent);
    scrollbar-width: none;
  }

  .artist-thanks__tribute::-webkit-scrollbar {
    display: none;
  }

  .artist-thanks__role {
    margin-bottom: 0.5rem;
    font-size: 0.45rem;
  }

  .artist-thanks__tribute h3 {
    font-size: clamp(1.3rem, 7vw, 1.75rem);
  }

  .artist-thanks__line,
  .artist-thanks.is-mentor .artist-thanks__line {
    width: 2rem;
    margin: 0.9rem 0;
  }

  .artist-thanks__text {
    max-width: none;
    font-size: clamp(0.53rem, 2.7vw, 0.64rem);
    line-height: 1.65;
  }

  .artist-thanks__personal-thanks {
    margin-top: 0.85rem;
    font-size: 0.52rem;
  }

  .artist-thanks__socials {
    margin-top: 0.9rem;
  }

  .artist-thanks__social {
    width: 1.5rem;
    height: 1.5rem;
  }

  .artist-thanks__close,
  .artwork-gallery__close,
  .user-art-archive__close {
    bottom: max(0.65rem, calc(env(safe-area-inset-bottom) + 0.15rem));
    width: 2rem;
    height: 2rem;
  }

  /* ARTWORK — a vertical two-column salon wall */

  .artwork-gallery__viewport {
    top: max(8rem, 16vh);
    right: var(--mobile-edge);
    bottom: calc(4.4rem + env(safe-area-inset-bottom));
    left: var(--mobile-edge);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    cursor: default;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .artwork-gallery__viewport::-webkit-scrollbar {
    display: none;
  }

  .artwork-gallery__wall {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem 0.65rem;
    width: 100%;
    height: auto;
    padding: 1rem 0 2rem;
    transform: none !important;
  }

  .artwork-gallery__item {
    position: relative;
    top: auto;
    left: auto;
    align-self: start;
    width: 100%;
    padding: 0.3rem;
    border-width: 1px;
    box-shadow: 0 7px 13px rgb(27 27 25 / 12%);
    transform: none !important;
    touch-action: manipulation;
  }

  .artwork-gallery__item:nth-child(3n + 2) {
    margin-top: 1.75rem;
  }

  .artwork-gallery__item:nth-child(4n) {
    width: 84%;
    justify-self: end;
  }

  .artwork-gallery.has-selection .artwork-gallery__item:not(.is-active) {
    opacity: 1;
  }

  .artwork-gallery__item.is-active {
    border-color: var(--color-foreground);
    box-shadow: 0 7px 13px rgb(27 27 25 / 12%);
  }

  .artwork-gallery.has-selection .artwork-gallery__viewport {
    visibility: hidden;
  }

  .artwork-gallery__lightbox {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: block;
    background: var(--color-background);
    opacity: 0;
    transition: opacity 380ms var(--ease-standard);
  }

  .artwork-gallery__lightbox[hidden] {
    display: none;
  }

  .artwork-gallery__lightbox.is-visible {
    opacity: 1;
  }

  .artwork-gallery__lightbox::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    height: calc(3.6rem + env(safe-area-inset-bottom));
    border-top: var(--border-thin);
    content: "";
    background: color-mix(in srgb, var(--color-background) 96%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
  }

  .artwork-gallery__lightbox-media {
    position: absolute;
    top: max(6.5rem, 13dvh);
    right: 0.5rem;
    bottom: calc(9.25rem + env(safe-area-inset-bottom));
    left: 0.5rem;
    display: grid;
    margin: 0;
    place-items: center;
  }

  .artwork-gallery__lightbox-media img,
  .artwork-gallery__lightbox-media video {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .artwork-gallery__lightbox-close {
    position: absolute;
    bottom: max(0.65rem, calc(env(safe-area-inset-bottom) + 0.15rem));
    left: 50%;
    z-index: 11;
    width: 2rem;
    height: 2rem;
    transform: translateX(-50%);
  }

  .artwork-gallery__lightbox-close span,
  .artwork-gallery__lightbox-close span::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.5rem;
    height: 1px;
    content: "";
    background: currentColor;
  }

  .artwork-gallery__lightbox-close span {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .artwork-gallery__lightbox-close span::before {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .artwork-gallery__details {
    top: auto;
    right: var(--mobile-edge);
    bottom: calc(3.75rem + env(safe-area-inset-bottom));
    left: var(--mobile-edge);
    z-index: 9;
    width: auto;
    min-height: 0;
    max-height: 4.75rem;
    padding: 0.65rem 0.8rem;
    overflow: hidden;
    background: color-mix(in srgb, var(--color-background) 86%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .artwork-gallery__details-number {
    margin-bottom: 0.25rem;
    font-size: 0.43rem;
  }

  .artwork-gallery__details h3 {
    font-size: 0.8rem;
  }

  .artwork-gallery__meta {
    margin-top: 0.35rem;
    font-size: 0.46rem;
  }

  .artwork-gallery__rule {
    margin: 0.45rem 0;
  }

  .artwork-gallery__description {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.46rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .artwork-gallery__drag-label,
  .artwork-gallery__map {
    display: none;
  }

  .artwork-gallery.has-selection > .artwork-gallery__close {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .artwork-gallery__loader {
    font-size: 0.48rem;
  }

  /* USER ART — living archive, compressed without losing the stack */

  .user-art-archive__header {
    top: 17vh;
    right: var(--mobile-edge);
    left: var(--mobile-edge);
  }

  .user-art-archive__header p {
    margin-bottom: 0.5rem;
    font-size: 0.46rem;
  }

  .user-art-archive__header h2 {
    font-size: clamp(1.25rem, 6.8vw, 1.7rem);
  }

  .user-art-archive__viewport {
    top: 28%;
    right: var(--mobile-edge);
    bottom: 31%;
    left: var(--mobile-edge);
  }

  .user-art-archive__sheet {
    left: 45%;
    width: min(66vw, 18rem);
    max-height: 100%;
  }

  .user-art-archive__details {
    top: auto;
    right: var(--mobile-edge);
    bottom: calc(8.25rem + env(safe-area-inset-bottom));
    left: var(--mobile-edge);
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    transform: none;
  }

  .user-art-archive__details h3 {
    overflow: hidden;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .user-art-archive__details span {
    display: none;
  }

  .user-art-archive__details p {
    font-size: 0.45rem;
    white-space: nowrap;
  }

  .user-art-archive__navigation {
    right: var(--mobile-edge);
    bottom: calc(4.2rem + env(safe-area-inset-bottom));
    left: var(--mobile-edge);
    grid-template-columns: 3.7rem minmax(0, 1fr) 3.7rem;
    gap: 0.35rem;
    font-size: 0.43rem;
  }

  .user-art-archive__previous,
  .user-art-archive__next {
    min-width: 0;
    min-height: 2.75rem;
  }

  .user-art-archive__index {
    min-width: 0;
  }

  .user-art-archive__instruction {
    top: 3rem;
    font-size: 0.4rem;
  }

  .user-art-archive__status {
    width: calc(100% - (2 * var(--mobile-edge)));
    font-size: 0.5rem;
  }

}