/* ============================================================
   Nicole Belton — shared MOBILE styles (phone ≤ 768px)
   Matches the mobile app: app-style top bar + grey slide-in menu,
   single "Elevating art" hero, clean stacked content.
   Desktop (≥ 769px) is completely untouched.
   ============================================================ */

/* hidden by default (desktop) */
.m-topbar, .m-menu, .m-hero, .m-title, .m-pagehead { display: none; }

@media (max-width: 1000px) {
  /* ---- dedicated mobile section header (Design / Fine Art) ---- */
  .m-pagehead { display: block; padding: 26px 22px 0; }
  .m-pagehead h1 { font-family: var(--font-display); font-weight: 100; font-size: 46px; line-height: 1; color: var(--nb-grey); letter-spacing: 0; }
  .m-pagehead .m-lead { font-family: var(--font-text); font-weight: 300; font-size: 15px; line-height: 1.45; color: var(--nb-grey); margin-top: 14px; max-width: 32ch; }
  .m-pagehead .m-lead.it { font-style: italic; }
  .ap:has(.m-pagehead) .ap-head { display: none !important; }

  /* ---- home: app-style single "Elevating art" hero (crossfade) ---- */
  .home-hero { display: none !important; }
  .m-hero { display: block; position: relative; width: 100%; height: min(470px, 122vw); overflow: hidden; }
  .m-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .m-hero-a { object-position: 10% center; }
  .m-hero-b { object-position: center 80%; animation: mHeroFade2 12s ease-in-out infinite; }
  .m-hero-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,18,18,0.55), rgba(20,18,18,0) 32%); }
  .m-hero-cap { position: absolute; left: 22px; right: 22px; bottom: 22px; font-family: var(--font-display); font-weight: 100; font-size: 42px; line-height: 1.02; color: #fff; }
  @keyframes mHeroFade2 { 0%,42% { opacity: 0; } 50%,92% { opacity: 1; } 100% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .m-hero-b { animation: none; opacity: 0; } }

  /* ---- app-style sticky top bar ---- */
  .m-topbar {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 200;
    padding: 12px 22px 14px;
    background: rgba(255,255,255,0.9);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--nb-line);
  }
  .m-mark { font-family: var(--font-display); font-weight: 100; font-size: 25px; letter-spacing: 0.08em; color: var(--nb-grey); }
  .m-burger { display: flex; flex-direction: column; gap: 5px; width: 26px; background: none; border: none; padding: 0; cursor: pointer; }
  .m-burger span { height: 2px; background: var(--nb-grey); width: 100%; display: block; }

  /* ---- hide every desktop nav variant ---- */
  .nav-second { display: none !important; }
  .frame > .sidebar { display: none !important; }
  .ap-head .ap-nav { display: none !important; }
  .wordmark-bl { display: none !important; }
  nav.nb { display: none !important; }

  /* ---- grey slide-in menu (from the right) ---- */
  .m-menu {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 300;
    background: var(--nb-grey);
    transform: translateX(100%);
    transition: transform 0.42s cubic-bezier(0.22,0.61,0.36,1);
  }
  .m-menu.open { transform: translateX(0); }
  .m-menu-top { display: flex; justify-content: flex-end; padding: 16px 22px 8px; }
  .m-close { background: none; border: none; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; padding: 0; }
  .m-menu-nav { flex: 1 1 auto; padding: 30px 0 0 56px; display: flex; flex-direction: column; }
  .m-grp { display: flex; flex-direction: column; }
  .m-grp2 { margin-top: 26px; }
  .m-navlink { font-family: var(--font-text); font-weight: 400; font-size: 23px; line-height: 1.18; letter-spacing: -0.005em; color: rgba(255,255,255,0.84); padding: 3px 0; }
  .m-navlink.is-on { color: #fff; }
  .m-social { display: flex; flex-direction: column; gap: 5px; margin-top: 22px; margin-left: -32px; }
  .m-social a { font-family: var(--font-text); font-weight: 700; font-size: 15px; color: #fff; text-decoration: none; }
  .m-menu-addr { padding: 30px 0 30px 56px; display: flex; flex-direction: column; gap: 5px; }
  .m-menu-addr span { font-family: var(--font-text); font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.55); }
  html.m-menu-lock, html.m-menu-lock body { overflow: hidden; }

  /* ---- generic page padding to match the app's 22px gutters ---- */
  .ap { padding: 0; }
  .ap-head { display: block !important; margin-bottom: 0 !important; }
  .ap-name { text-align: left !important; white-space: normal !important; font-size: 40px !important; line-height: 1 !important; padding: 26px 22px 0; }
  .content { padding: 0 !important; }
  .frame { display: block; }
  .frame.tight { display: block; }

  /* ---- project pages ---- */
  .pj-wrap { padding: 0 22px !important; max-width: none !important; }
  .pj-top { margin-top: 18px !important; padding-bottom: 14px !important; }
  .pj-next { width: auto !important; margin-left: 0 !important; padding: 24px 22px !important; }

  /* ---- about ---- */
  .ap-body { grid-template-columns: 1fr !important; gap: 20px !important; padding: 20px 22px 0 !important; }
  .ap-portrait { width: 100% !important; margin-top: 0 !important; }
  .ap-text { padding: 0 !important; }
  .ap-text h2 { margin-left: 0 !important; font-size: 30px !important; }
  .ap-text p { margin-left: 0 !important; }

  /* ---- contact ---- */
  .contact { grid-template-columns: 1fr !important; gap: 28px !important; max-width: none !important; margin-left: 0 !important; padding: 24px 22px 0; }
  .contact-name { white-space: normal; }
  .contact + .home-statement-piece, .home-statement-piece { margin-left: 0 !important; width: auto !important; }
  .home-statement-piece .sp-text { padding-left: 0 !important; }
  .home-statement-piece .sp-text .label { margin-left: 0 !important; }

  /* ---- cv ---- */
  .cv { padding: 0 22px !important; max-width: none !important; }
  .cv-head { min-height: 0 !important; margin-bottom: 4px !important; padding-top: 8px; }
  .cv-meta { grid-template-columns: 1fr !important; gap: 22px !important; }
  .cv-row { grid-template-columns: 54px 1fr !important; gap: 14px !important; }

  /* ---- press: index rows with the logo on the left (matches the app) ---- */
  .press-intro, .press-list { margin-left: 0 !important; }
  .press-intro { padding: 26px 22px 4px; }
  .press-list { padding: 8px 22px 0; }
  .press-row { grid-template-columns: 84px 1fr !important; gap: 18px !important; align-items: center !important; padding: 24px 0 !important; }
  .press-row:hover { padding-left: 0 !important; }
  .press-logo { height: 40px; }
  .press-logo img { max-height: 40px; }
  .press-logo.flower { height: auto; }
  .press-logo.flower img { max-height: 60px; }
  .press-row .go { grid-column: 2; justify-self: start; margin-top: 8px; }
  .press-kit { margin-left: 0 !important; }

  /* ---- fine art: hide dates on mobile only ---- */
  .grid .work .cap .yr { display: none; }



  footer.nb { padding: 30px 22px 32px !important; }
  .frame .content footer.nb, body > footer.nb { width: auto; margin-left: 0; padding: 30px 22px 32px; }
  footer.nb .foot-row { flex-direction: column; align-items: flex-start; gap: 6px; border-top: none; padding-top: 0; }
  footer.nb .foot-links { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
  footer.nb .foot-links > a { flex-basis: 100%; }
  footer.nb .foot-cta { display: none; }
  footer.nb .foot-fine { font-size: 11px; }
  /* mobile footer: drop the hint (no hover on touch) and the static butterfly;
     keep only the animated butterfly, inline right before "Studio by Appointment" */
  footer.nb .foot-hint { display: none; }
  footer.nb .foot-bfly[src*="footer-bfly1"] { display: none; }

  /* newsletter band — app gutters */
  .nl-band { padding: 34px 22px; }
  .nl-title { font-size: 22px; }
}