/* Mobile: compact controls, generous photography, comfortable touch targets. */
@media (max-width:760px) {
  body { font-size:16px; line-height:1.6; }
  .preview { padding:7px 5%; font-size:10px; letter-spacing:.8px; gap:2px; }
  .preview span { font-size:10px; }
  header { height:98px; gap:20px; }
  .brand img { width:78px; height:78px; }
  .menu { min-height:44px; padding:8px 14px; font-size:14px; border:1px solid #bdcdd7; background:transparent; color:var(--ink); border-radius:6px; }
  nav { padding:16px 5%; font-size:16px; gap:4px; }
  nav>a { padding:10px; }
  nav .nav-contact { padding:11px 16px; }
  .hero { min-height:0; }
  .hero-copy { padding:32px 5% 28px; }
  .hero h1 { font-size:clamp(44px,12vw,64px); letter-spacing:-2.5px; margin-bottom:24px; }
  .eyebrow,.section-heading .eyebrow { font-size:11px; letter-spacing:1.1px; margin-bottom:20px; }
  .hero-bottom { gap:12px; }
  .hero-bottom p,.section-heading p:last-child,.project>p,.inspiration-card p,.contact-bottom p,.about>div>p { font-size:16px; line-height:1.65; }
  .circle { width:44px; height:44px; font-size:22px; }
  .hero-art { aspect-ratio:1; }
  .art-caption { top:12px; left:12px; right:12px; font-size:10px; padding:7px 9px; gap:8px; }
  .art-title { left:20px; bottom:24px; font-size:24px; }
  .section { padding:44px 5%; }
  h2 { font-size:clamp(30px,8vw,40px); letter-spacing:-1.3px; line-height:1.2; }
  .section-heading { margin-bottom:22px; }
  .section-heading>p { margin-top:16px; margin-bottom:0; }
  .filters { gap:5px; flex-wrap:nowrap; overflow-x:auto; white-space:nowrap; padding:0 0 5px; }
  .filters button,.filters button.active { flex-shrink:0; min-height:44px; padding:8px 10px; font-size:13px; border-width:1px; border-radius:6px; }
  .filters sup { font-size:10px; }
  .portfolio-note,.scene-note,.stages .scene-note,.inspiration-source { font-size:13px; line-height:1.6; }
  .portfolio-note { margin:14px 0 24px; }
  .projects,.inspiration-grid { gap:28px; }
  .project-image b,.inspiration-card b { min-height:44px; height:auto; padding:8px 12px; font-size:13px; font-weight:600; border-radius:6px; right:12px; bottom:12px; }
  .project-image>span { left:12px; bottom:64px; font-size:9px; padding:5px 7px; max-width:calc(100% - 24px); }
  .project-label { margin:14px 0 7px; gap:5px; }
  h3,.inspiration-card h3 { font-size:22px; line-height:1.3; }
  .project-label span { font-size:11px; }
  .inspiration-card h3 { margin:14px 0 8px; }
  .inspiration-card>div>span { left:12px; bottom:66px; padding:4px 7px; font-size:10px; }
  .stage-view { aspect-ratio:auto; margin-bottom:0; }
  .stage-view figcaption { padding:11px 12px; gap:10px; flex-wrap:nowrap; }
  #stage-counter { font-size:12px; letter-spacing:1px; white-space:nowrap; }
  #stage-title { font-size:16px; line-height:1.35; }
  .stage-controls { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:14px; margin:18px 0; align-items:center; }
  .stage-controls button { min-width:44px; width:44px; height:44px; min-height:44px; padding:0; border-width:1px; border-radius:50%; font-size:20px; background:transparent; color:var(--ink); }
  .stage-controls button span { display:none; }
  .stage-controls label { grid-column:auto; grid-row:auto; text-align:center; font-size:12px; line-height:1.4; font-weight:500; }
  .stage-controls input { height:24px; margin:3px 0 0; }
  .stage-controls button:disabled { background:transparent; color:#8295a1; border-color:#bdccd5; }
  .stage-thumbs { grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
  .stage-thumbs button { min-height:44px; border-width:2px; border-radius:4px; position:relative; }
  .stage-thumbs span { display:none; }
  .stage-thumbs button::after { content:attr(data-stage); position:absolute; bottom:0; left:0; padding:0 5px; background:#163c56e8; color:#fff; font-size:11px; }
  .stage-thumbs button[aria-pressed=true] { box-shadow:0 0 0 1px #246185; }
  .stage-thumbs img { height:100%; min-height:44px; object-fit:cover; }
  .atmosphere .section-heading { gap:18px; }
  .mood-controls { border-width:1px; padding:3px; gap:3px; }
  .mood-controls button { min-height:44px; font-size:14px; padding:8px 18px; font-weight:500; }
  .mood-scene { aspect-ratio:4/3; }
  .mood-scene figcaption { padding:35px 14px 14px; }
  .mood-scene figcaption span { font-size:18px; line-height:1.35; margin-bottom:5px; }
  .mood-scene small { font-size:9px; }
  .inspiration-source { margin-top:24px; padding-top:16px; gap:8px; }
  .inspiration-source>span { font-size:10px; }
  .contact-button,.inspiration-cta,.close-text { min-height:46px; padding:11px 16px; font-size:15px; font-weight:600; border-radius:6px; }
  .inspiration-cta { gap:16px; margin-top:20px; }
  .about { gap:0; }
  .about h2 { margin-bottom:20px; }
  .about-note { margin-top:26px; padding-top:20px; gap:8px; }
  .about-note p { font-size:14px; }
  .about-note span { font-size:11px; }
  .contact h2 { font-size:clamp(36px,10vw,48px); letter-spacing:-1.8px; }
  .contact-bottom { margin-top:24px; gap:20px; }
  .instagram { font-size:14px; margin-top:20px; min-height:44px; padding:10px 0; }
  footer { padding:24px 5%; gap:16px; }
  footer .brand img { width:64px; height:64px; }
  footer>a:last-child { font-size:14px; padding:12px 0; }
  dialog { padding:64px 20px 24px; max-height:90dvh; overflow:auto; }
  dialog h2 { font-size:28px; }
  dialog p { font-size:15px; }
  dialog img { margin:18px 0; }
  .close,#inspiration-close { width:44px; height:44px; background:transparent; color:var(--ink); }
  #inspiration-dialog>a,#original-post { font-size:15px; }
}
