/* =====================================================================
   MOBILE  ·  ≤ 450px
   Production breakpoint. This block is SELF-SUFFICIENT: applied on top of
   the desktop base it fully produces the mobile layout (it does not rely on
   the 900/560 prototype breakpoints). It is a pure restyle of the same DOM.
===================================================================== */
@media(max-width:450px){
  :root{--nav-h:88px;}
  body{font-size:17px;}

  /* --- top nav: two centered rows (wordmark over links) --- */
  .topnav__inner{flex-direction:column;justify-content:center;gap:8px;padding:0 16px;}
  .wordmark{align-items:center;}
  .wordmark__name{font-size:19px;white-space:nowrap;}
  .wordmark__role{display:none;}
  .navlinks{gap:18px;}
  .navlink{font-size:10px;letter-spacing:.1em;padding:2px 0;}

  /* --- buttons --- */
  .btn{padding:13px 20px;font-size:10.5px;letter-spacing:.12em;}

  /* --- HOME A hero --- */
  .heroA{min-height:560px;}
  .heroA__scrim{background:linear-gradient(to top,rgba(20,16,12,.85) 0%,rgba(20,16,12,.4) 44%,rgba(20,16,12,.14) 68%,rgba(20,16,12,.45) 100%);}
  .heroA__copy{bottom:12vh;top:auto;transform:none;padding:0 22px;}
  .heroA__eyebrow{font-size:11px;letter-spacing:.18em;margin-bottom:1em;}
  .heroA__name{font-size:46px;line-height:.97;margin:.04em 0 .28em;}
  .heroA__lede{font-size:17px;line-height:1.5;max-width:34ch;margin-bottom:1.5em;}
  .heroA__actions{flex-direction:column;align-items:stretch;gap:10px;}
  .heroA__actions .btn{width:100%;justify-content:center;}
  .heroA__caption{display:none;}
  .heroA__controls{bottom:30px;}

  /* --- recent-work strip --- */
  .strip{padding:60px 22px 22px;}
  .strip__head{margin-bottom:20px;}
  .strip__row{grid-template-columns:repeat(2,1fr);gap:16px;}
  .strip__cap{font-size:14px;margin-top:9px;}

  /* --- generic page chrome --- */
  .page{padding:calc(var(--nav-h) + 36px) 22px 28px;}
  .pagehead{margin-bottom:32px;}
  .pagehead__title{font-size:40px;}
  .pagehead__lede{font-size:17px;}
  .filterbar{flex-wrap:wrap;gap:7px;margin-top:22px;}

  /* --- paintings gallery: single column --- */
  .gallery{column-count:1;column-gap:0;}
  .tile{margin-bottom:34px;}
  .tile__view{display:none;}      /* no hover on touch; tap opens lightbox */
  .wallcard__title{font-size:21px;}

  /* --- shows & news --- */
  .shows-group{margin-bottom:44px;}
  .show{grid-template-columns:1fr;gap:11px;padding:24px 0;}
  .show__end{display:none;}
  .show__dates{font-size:19px;}
  .show__title{font-size:24px;}
  .show__venue{margin-bottom:.8em;}
  .show__note{font-size:16px;}
  .repline{padding-top:38px;}
  .repline__grid{grid-template-columns:1fr;gap:14px;}
  .repcard{padding:22px;}
  .repcard__name{font-size:22px;}

  /* --- about --- */
  .about-hero{grid-template-columns:1fr;gap:26px;padding:calc(var(--nav-h) + 36px) 22px 0;}
  .about-hero__title{font-size:33px;}
  .statement,.statement--rev{grid-template-columns:1fr;gap:26px;padding:46px 22px 0;}
  .statement__plate{position:static;}
  .statement--rev .statement__col:first-child{order:2;}
  .statement__p{font-size:18px;line-height:1.64;}
  .contact{margin-top:52px;}
  .contact__inner{grid-template-columns:1fr;gap:38px;padding:52px 22px;}
  .contact__gallery-name{font-size:22px;}

  /* --- lightbox: stacked, arrows pinned to bottom-centre --- */
  .lightbox{flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:0;padding:50px 16px 86px;overflow-y:auto;}
  .lightbox__stage{grid-template-columns:1fr;gap:18px;align-items:start;width:100%;}
  .lightbox__art{justify-content:center;}
  .lightbox__art .frame{max-width:100%;}
  .lightbox__title{font-size:28px;}
  .lightbox__placeholder{position:static;display:block;margin-top:10px;}
  .lightbox__close{top:14px;right:14px;}
  .lightbox__count{margin-top:18px;}
  .lightbox__nav{position:fixed;top:auto;bottom:18px;width:48px;height:48px;}
  .lightbox__nav--prev{left:calc(50% - 58px);}
  .lightbox__nav--next{right:calc(50% - 58px);}

  /* --- footer --- */
  .site-footer__inner{grid-template-columns:1fr;gap:28px;padding:48px 22px 28px;}
  .site-footer .wordmark__name{font-size:26px;}
  .site-footer__legal{flex-direction:column;gap:8px;padding:18px 22px;}
}