/* AXEL CRETTENAND — MOBILE LAYOUT
   Independent layer. Loaded AFTER styles.css and guidance.css.
   All rules are scoped to narrow viewports: desktop remains unchanged.
*/
@media screen and (max-width: 700px) {
  :root {
    --edge: 16px;
    --ui-size: 12.6px;
    --mobile-safe-top: env(safe-area-inset-top, 0px);
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-image-top: calc(var(--mobile-safe-top) + 116px);
    --mobile-image-bottom: calc(var(--mobile-safe-bottom) + 118px);
    --project-gap: 16px;
    --project-mini-chapter-gap: 58px;
    --project-image-height: calc(100dvh - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 174px);
  }

  html { -webkit-text-size-adjust: 100%; }
  body { background: #fff; }

  /* Header: name and utility links are kept on a single clean baseline. */
  .topbar {
    top: calc(var(--mobile-safe-top) + 9px);
    left: var(--edge);
    right: var(--edge);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
  }
  .brand {
    grid-column: 1;
    font-size: clamp(12px, 3.65vw, 15px);
    white-space: nowrap;
    align-self: center;
    line-height: 1.3;
  }
  .utility {
    grid-column: 2;
    align-self: center;
    gap: clamp(10px, 2.8vw, 18px);
    font-size: clamp(11px, 3.2vw, 13px);
    align-items: center;
  }
  .utility a, .utility button {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* Filters: horizontally scrollable, immediately accessible, no covering
     the photographs. Heading remains visible during horizontal scrolling. */
  #filters.filters {
    top: calc(var(--mobile-safe-top) + 53px);
    bottom: auto;
    left: var(--edge);
    right: var(--edge);
    width: auto;
    transform: none;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    height: 44px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 1px;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    text-align: left;
    font-size: var(--ui-size);
    white-space: nowrap;
  }
  #filters::-webkit-scrollbar { display: none; }
  #filters .filter-group { display: contents; }
  #filters .filter {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0;
    line-height: 1.3;
    font-size: inherit;
    white-space: nowrap;
  }
  #filters .guidance-filter-heading {
    position: sticky;
    top: auto;
    left: 0;
    right: auto;
    bottom: auto;
    z-index: 3;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 40px;
    padding-right: 6px;
    background: #fff;
    font: inherit;
    line-height: 1.3;
  }
  #filters .guidance-filter-heading::after {
    left: 0;
    right: auto;
    bottom: 4px;
    width: 34px;
    box-shadow: none;
  }
  #filters > .separator { display: none; }
  #filters .filter-all {
    margin-left: 2px;
    padding-left: 16px;
    border-left: 1px solid #111;
  }

  /* Mobile homepage: one full photograph per step. The underlying order,
     filters, counter, links and scroll logic remain the desktop ones.
     :has() hides older visible images without changing JS composition data. */
  #stream.stream { position: fixed; inset: 0; overflow: hidden; }
  #stream .item,
  #stream .item.is-fullframe {
    inset: auto;
    position: absolute;
    left: 0;
    top: var(--mobile-image-top);
    width: 100vw;
    height: max(100px, calc(100dvh - var(--mobile-image-top) - var(--mobile-image-bottom)));
    max-width: none;
    max-height: none;
    transform: none;
    padding: 4px var(--edge);
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    place-items: center;
  }
  #stream .item img,
  #stream .item video,
  #stream .item.is-fullframe img,
  #stream .item.is-fullframe video {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    min-width: 0;
    object-fit: contain;
    object-position: center;
  }
  #stream .item.is-visible:has(~ .item.is-visible) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  /* The image pixel boundaries, not the container, determine tap targets.
     Existing guidance.js performs the precise object-fit hit test. */

  /* Bottom captions on their own row, above the touch-friendly navigation. */
  .meta {
    left: var(--edge);
    right: var(--edge);
    bottom: calc(var(--mobile-safe-bottom) + 65px);
    max-width: none;
    width: calc(100vw - 2 * var(--edge));
    font-size: var(--ui-size);
    line-height: 1.26;
  }
  #metaTitle, #metaSub { overflow-wrap: anywhere; }
  #metaSub { margin-top: 4px; }
  .homepage-step-nav {
    left: auto;
    right: var(--edge);
    bottom: calc(var(--mobile-safe-bottom) + 10px);
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: var(--ui-size);
  }
  .homepage-step-nav .image-counter { position: static; }
  .homepage-step-nav button {
    min-width: 44px;
    min-height: 44px;
    font-size: 20px;
    line-height: 1;
    display: grid;
    place-items: center;
  }
  /* Graceful fallback if the counter isn't wrapped in the newer step nav. */
  body > .image-counter {
    right: var(--edge);
    bottom: calc(var(--mobile-safe-bottom) + 22px);
    font-size: var(--ui-size);
  }

  /* Intro retains the approved alternating chevrons and SCROLL DOWN.
     Keep its project hint clear of the bottom counter and safe-area. */
  #introIntroduction.intro-introduction {
    inset: 0;
    width: 100%;
    height: 100dvh;
  }
  .guidance-scroll-instruction { width: 120px; height: 135px; }
  .guidance-scroll-chevrons { width: 120px; height: 135px; }
  .guidance-scroll-words { font-size: clamp(22px, 5.8vw, 28px); }
  .guidance-scroll-chevrons > span {
    width: 50px;
    height: 50px;
    border-width: 4px;
  }
  #introIntroduction .guidance-intro-project-instruction {
    left: var(--edge);
    right: var(--edge);
    bottom: calc(var(--mobile-safe-bottom) + 68px);
    max-width: none;
    width: calc(100% - 2 * var(--edge));
    font-size: 12px;
    line-height: 1.35;
    gap: 9px;
  }
  #introIntroduction .guidance-intro-project-icon {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
  }

  /* About: truly scrollable on small displays, rather than clipped. */
  #about.about {
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: calc(var(--mobile-safe-top) + 90px) var(--edge)
             calc(var(--mobile-safe-bottom) + 32px);
    background: #fff;
  }
  #about .about-close {
    top: calc(var(--mobile-safe-top) + 18px);
    right: var(--edge);
    min-height: 44px;
  }
  #about .about-copy {
    width: 100%;
    max-width: 100%;
    font-size: clamp(19px, 5vw, 26px);
    line-height: 1.19;
    overflow-wrap: break-word;
  }

  /* Project view: swipe through full-width, non-cropped images. */
  .project-overlay {
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    background: #fff;
  }
  .project-ui-top {
    top: calc(var(--mobile-safe-top) + 10px);
    left: var(--edge);
    right: var(--edge);
    min-height: 48px;
    align-items: flex-start;
  }
  .project-title-block { max-width: calc(100vw - 110px); }
  .project-title {
    font-size: clamp(13px, 3.8vw, 16px);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .project-chapter-title { font-size: 11px; line-height: 1.25; }
  .project-back {
    display: flex;
    align-items: center;
    min-height: 44px;
    flex: 0 0 auto;
    font-size: 12px;
  }
  .project-track-shell {
    top: calc(var(--mobile-safe-top) + 87px) !important;
    bottom: calc(var(--mobile-safe-bottom) + 91px) !important;
    overflow: hidden;
  }
  .project-track {
    height: 100%;
    gap: var(--project-gap);
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }
  .project-image {
    flex: 0 0 calc(100vw - 2 * var(--edge));
    width: calc(100vw - 2 * var(--edge));
    height: 100%;
    max-height: 100%;
    aspect-ratio: auto;
    scroll-snap-align: center;
    display: grid;
    place-items: center;
  }
  .project-image img,
  .project-image video {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .project-image.is-mini-chapter-start {
    margin-left: var(--project-mini-chapter-gap);
  }
  .project-image.is-motion {
    margin-left: var(--project-mini-chapter-gap);
    margin-right: var(--project-mini-chapter-gap);
  }
  .project-image-name {
    left: var(--edge);
    bottom: calc(var(--mobile-safe-bottom) + 20px);
    max-width: 52vw;
    font-size: 11px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  .project-similar {
    right: var(--edge);
    bottom: calc(var(--mobile-safe-bottom) + 20px);
    max-width: 45vw;
    white-space: normal;
    text-align: right;
    line-height: 1.25;
    font-size: 11px;
  }
  /* Mobile projects are visual-only: no description control or panel. */
  .project-description-zone,
  .mobile-project-info-button,
  .mobile-project-info-panel { display: none !important; }

  /* Fullscreen closing note, centered below the mobile header/filter row. */
  .guidance-end-message {
    padding: calc(var(--mobile-safe-top) + 111px) var(--edge)
             calc(var(--mobile-safe-bottom) + 82px);
  }
  .guidance-end-message-text {
    width: 100%;
    max-width: 100%;
    font-size: clamp(19px, 5vw, 26px);
    line-height: 1.24;
  }
  .guidance-end-message {
    --guidance-end-text-max: calc(100vw - 2 * var(--edge)) !important;
  }
}

@media screen and (max-width: 700px) and (max-height: 590px) {
  :root {
    --mobile-image-top: calc(var(--mobile-safe-top) + 94px);
    --mobile-image-bottom: calc(var(--mobile-safe-bottom) + 90px);
  }
  .topbar { top: calc(var(--mobile-safe-top) + 4px); }
  #filters.filters { top: calc(var(--mobile-safe-top) + 43px); height: 37px; }
  .meta { bottom: calc(var(--mobile-safe-bottom) + 54px); }
  .homepage-step-nav { bottom: calc(var(--mobile-safe-bottom) + 2px); }
  .project-track-shell { top: calc(var(--mobile-safe-top) + 70px) !important; bottom: calc(var(--mobile-safe-bottom) + 61px) !important; }
  .project-image-name, .project-similar { bottom: calc(var(--mobile-safe-bottom) + 9px); }
}