/* ── mobile project panel: full-screen only, no modal toggle ─── */
  @media (max-width: 720px) {
    /* always full-screen, drop the modal inset/border */
    .panel,
    .panel.expanded {
      inset: 0;
      border: 0;
      box-shadow: none;
    }
    /* hide the modal/presentation toggle button */
    .panel-seg { display: none; }

    /* tighter head */
    .panel-head,
    .panel.expanded .panel-head {
      padding: 18px 16px 14px 16px;
      gap: 12px;
    }
    .panel.scrolled .panel-head,
    .panel.expanded.scrolled .panel-head {
      padding: 12px 16px 10px 16px;
    }
    .panel-title,
    .panel.expanded .panel-title { font-size: 32px; }
    .panel.scrolled .panel-title,
    .panel.expanded.scrolled .panel-title { font-size: 18px; }
    .panel-sub { font-size: 13px; }

    .ibtn { width: 30px; height: 30px; }

    /* tighter body padding */
    .panel-body,
    .panel.expanded .panel-body {
      padding: 24px 16px 64px 16px;
    }

    /* keep media inside the viewport, drop the desktop breakout */
    .panel .main-media,
    .panel.expanded .main-media {
      width: 100%;
      max-width: 100%;
      margin: 8px 0 28px 0;
    }
    .panel .inline-figure,
    .panel.expanded .inline-figure {
      width: 100%;
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
    }
    .panel .inline-demo-wrap,
    .panel.expanded .inline-demo-wrap {
      width: 100%;
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
    }
    .demo-badge { width: 72px; height: 72px; top: -22px; left: -14px; }
    .demo-badge-logo svg { width: 18px; height: 18px; }
    .panel .preview,
    .panel .media-stack { max-width: 100%; }
    .panel .preview,
    .panel.expanded .preview { max-height: none; }
    .panel .media-stack .media-item,
    .panel.expanded .media-item { max-height: none; }

    .panel .pb-cols,
    .panel.expanded .pb-cols {
      max-width: 100%;
      margin: 0;
    }
    .panel .stat-row,
    .panel.expanded .stat-row,
    .panel .lede,
    .panel.expanded .lede {
      max-width: 100%;
    }

    /* readable typography on small screens */
    .lede { font-size: 18px; line-height: 1.45; margin-bottom: 22px; }
    .body-text { font-size: 16px; line-height: 1.55; margin-bottom: 20px; }
    .body-list { font-size: 16px; line-height: 1.55; }
    .body-heading { font-size: 22px; margin: 44px 0 12px 0; }
    .body-section { margin: 44px 0 14px 0; }

    .stat-row { gap: 16px; flex-wrap: wrap; padding: 14px 0; margin-bottom: 22px; }
    .stat .v { font-size: 14px; }

    /* ── intro hero: tighter mobile padding, centered content biased upward
           by giving more bottom padding than top so the flex-center point sits
           a bit higher than viewport center. ── */
    .intro-hero {
      padding: 60px 20px 22vh;
    }

    /* ── stack / story view: tighter padding & typography ── */
    #view-stack { padding: 80px 16px 110px 16px; }
    .stack-head { gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
    .stack-grid { gap: 36px; }
    .stack-card-title { font-size: 24px; }

    #view-folders { padding: 80px 16px 110px 16px; }

    #view-story { padding: 70px 16px 110px 16px; }
    .story-head { margin-bottom: 56px; padding-bottom: 24px; }
    .story-title { font-size: 36px; }
    .story-sub { font-size: 15px; }
    .story-para { font-size: 18px; line-height: 1.5; margin-bottom: 28px; }
    .story-para:first-of-type::first-letter { font-size: 48px; }
    .chapter { margin-bottom: 64px; }
    .chapter-intro { font-size: 17px; line-height: 1.5; margin-bottom: 28px; }
    .chapter:first-of-type .chapter-intro::first-letter { font-size: 48px; }
    .chapter-project { padding: 16px 0; gap: 16px; }
    .chapter-project-title { font-size: 18px; }
    .chapter-project-summary { font-size: 14px; }
    .story-end { font-size: 18px; }

    /* ── view switcher ── */
    .view-switcher {
      bottom: 18px;
      padding: 4px;
      max-width: min(360px, calc(100vw - 28px));
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      -ms-overflow-style: none;
      /* Fade both edges by default; .at-start / .at-end drop the matching side. */
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
              mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
      scroll-snap-type: x proximity;
      scroll-padding-inline: 16px;
      scroll-behavior: smooth;
    }
    .view-switcher.at-start {
      -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%);
              mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%);
    }
    .view-switcher.at-end {
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 100%);
              mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 100%);
    }
    .view-switcher.at-start.at-end {
      -webkit-mask-image: none;
              mask-image: none;
    }
    .view-switcher::-webkit-scrollbar { display: none; }
    .view-switcher button {
      padding: 10px 16px;
      font-size: 11px;
      letter-spacing: .12em;
      flex: 0 0 auto;
      scroll-snap-align: center;
    }
    .vs-more {
      padding: 10px 16px;
      flex: 0 0 auto;
      scroll-snap-align: center;
    }
    .vs-more-menu button {
      padding: 10px 16px;
      font-size: 11px;
      letter-spacing: .12em;
    }
    .view-switcher-sep { display: none; }
    .view-switcher button[data-view="about"],
    .view-switcher button[data-view="contact"] { display: none; }

    /* ── about/contact in header on mobile ── */
    .topbar-nav {
      display: inline-flex;
      gap: 2px;
      align-items: center;
      justify-self: end;
    }
    .topbar-nav button {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--ink-soft);
      background: transparent;
      border: 0;
      padding: 6px 8px;
      cursor: pointer;
      transition: color .2s;
    }
    .topbar-nav button:hover { color: var(--ink); }
    .topbar-nav button.on { color: var(--ink); font-weight: 600; }

  }