/* ============================================================
   MOBILE — stack, simplify, native cursor
   REPLACES the existing `@media (max-width: 768px)` block at the
   end of styles.css (currently lines 1371–1430). Paste this in
   its place; it must stay LAST in the file so it wins over the
   900px and 640px blocks above it.
   ============================================================ */

@media (max-width: 768px) {

  /* ---- Rhythm: one tighter scale for the whole page ---- */

  :root { --gutter: 20px; }

  .project,
  .p-design,
  .p-neo4ic,
  .p-wall {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .p-murals { padding: 72px 0 0; }
  .p-meta { margin-bottom: 32px; }

  /* ---- Nav: full-width bar, hides on scroll down ---- */

  .site-nav {
    top: 0;
    width: 100%;
    padding: 0 var(--gutter);
    gap: 10px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: none;
    transition: transform 0.4s var(--ease-out);
  }

  .site-nav.is-hidden { transform: translateY(-110%); }

  /* The logo was nbsp-joined and unshrinkable, so logo + three controls
     needed 377px of row and broke on any 375px phone. */
  .site-nav-logo {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    min-height: 48px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11px;
    letter-spacing: 0.1em;
  }

  .site-nav-links {
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
  }

  .site-nav-links a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 10px;
    font-size: 11px;
    letter-spacing: 0.14em;
  }

  /* CONTACT is already a full-width target in the footer. */
  .site-nav-links a[href="#contact"] { display: none; }

  /* ---- Hero ---- */

  .hero {
    padding: 96px var(--gutter) 28px;
    gap: 32px;
  }

  .hero-name { font-size: clamp(3.75rem, 17.5vw, 5.5rem); }

  .hero-sub {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 20px;
  }

  .hero-role { font-size: 19px; }

  .hero-motion { display: none; }

  .portrait {
    position: static;
    width: 88px;
    margin: 0;
  }

  .hero-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .hero-about {
    max-width: none;
    margin: 0;
    font-size: 11px;
  }

  .hero-scroll { font-size: 11px; }

  /* ---- 01 / Murals ---- */

  .mural-hero { height: min(62svh, 560px); }

  /* Full frame, not cropped — .mural-hero-video is object-fit:cover by
     default (fills the box, cropping the edges); contain shows the whole
     shot letterboxed instead, which reads as "zoomed out" on a phone. */
  .mural-hero-video { object-fit: contain; }

  /* No manual control on mobile: it just autoplays and loops, same as
     .hero-motion. main.js's IntersectionObserver still owns play/pause
     against scroll position, matching desktop. */
  .mural-hero-toggle { display: none; }

  /* Glass headline (clip-path + backdrop-filter) and bottom-left position
     are unchanged from desktop here — no mobile override. Note: this is
     the one effect in the original mobile patch that was deliberately
     disabled for iOS Safari, where clip-path: url() over backdrop-filter
     is known to drop out and leave the headline invisible. */

  .mural-intro {
    display: block;
    padding: 44px var(--gutter) 28px;
  }

  .mural-intro p { font-size: 14px; }

  .mural-intro-note {
    margin-top: 18px;
    text-align: left;
  }

  /* One wall per screen, snapped — proximity snapping on a 0.75-ratio
     frame leaves two half-walls showing at phone width. */
  .mural-track {
    gap: 12px;
    scroll-snap-type: x mandatory;
    cursor: auto;
  }

  .mural-frame { flex: 0 0 calc(100vw - 2 * var(--gutter)); }

  .mural-shot {
    width: 100%;
    height: min(58svh, 520px);
    aspect-ratio: auto;
  }

  .mural-track-tail { flex-basis: 8px; }

  .mural-bar { gap: 14px; }

  .mural-nav button {
    min-width: 48px;
    min-height: 48px;
    font-size: 14px;
  }

  .mural-marquee { margin-top: 56px; }

  /* ---- 02 / neo4ic ---- */

  /* The vertical wordmark was display:none, which left the section with no
     title at all. Unrotate it and lift it above the stack instead. */
  .p-neo4ic {
    display: flex;
    flex-direction: column;
  }

  .neo-vert-col {
    order: -1;
    position: static;
    margin: 0 var(--gutter) 28px;
    mix-blend-mode: normal;
    pointer-events: auto;
  }

  .p-vertical {
    position: static;
    writing-mode: horizontal-tb;
    transform: none;
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .neo-item { aspect-ratio: min(var(--ar, 3), 3); }

  /* ---- 03 / Selected Works ---- */

  .gallery-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .p-design .p-title {
    text-align: left;
    font-size: clamp(3rem, 15vw, 5rem);
  }

  /* Chips scroll instead of wrapping to three rows. */
  .filter-bar {
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 4px;
    scrollbar-width: none;
  }

  .filter-bar::-webkit-scrollbar { display: none; }

  .filter-btn {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 16px;
    white-space: nowrap;
  }

  /* Two-up: 40 cards in one column is a twenty-screen scroll. */
  .grid {
    columns: 2;
    column-gap: 10px;
  }

  .card { margin-bottom: 10px; }

  /* No hover on touch, so the caption is always on and sits below the
     image rather than over it. */
  .card img {
    filter: none;
    transition: none;
  }

  .card-border { display: none; }

  .card-overlay {
    position: static;
    opacity: 1;
    padding: 8px 0 0;
    background: none;
  }

  .card-num,
  .card-title {
    transform: none;
    transition: none;
  }

  .card-title {
    font-size: 11px;
    line-height: 1.4;
  }

  .load-more {
    display: block;
    width: 100%;
    min-height: 52px;
    margin-top: 28px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: transparent;
    color: var(--fg);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    cursor: pointer;
  }

  .load-more[hidden] { display: none; }

  #lb img {
    max-width: 92vw;
    max-height: 66vh;
  }

  #lb-close { min-height: 48px; }

  #lb-nav {
    width: calc(100% - 2 * var(--gutter));
    gap: 10px;
  }

  #lb-nav button {
    flex: 1;
    min-height: 52px;
  }

  /* ---- 04 / Archive ---- */

  .wall {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: none;
    height: 78svh;
    gap: 8px;
    padding: 0 var(--gutter);
  }

  .wall-title { font-size: clamp(3rem, 16vw, 5.5rem); }

  /* ---- Footer ---- */

  .footer { padding: 56px var(--gutter) 28px; }

  .footer-title { font-size: clamp(4rem, 19vw, 7rem); }

  .footer-links {
    gap: 10px;
    margin-top: 40px;
    align-self: stretch;
  }

  .footer-links a { border-bottom: 0; }

  .footer-mail {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 14px !important;
  }

  .footer-social {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .footer-social a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid var(--line);
  }

  /* The roll needs hover; on touch it only ever clips the label. */
  .roll { overflow: visible; }
  .roll-inner { transform: none !important; }
  .roll-inner span + span { display: none; }

  .colophon {
    margin-top: 48px;
    font-size: 10px;
  }
}