/* Mobile scale pass: preserve the desktop art direction while making the phone layout easier to read and tap. */
@media (max-width: 680px) {
  :root { --gutter: 14px; }

  .site-header .header-inner { height: 66px; padding-inline: 13px; gap: 9px; }
  .site-header .brand-mark { width: 40px; height: 40px; }
  .site-header .language-switch { gap: 5px; font-size: 10px; }
  .site-header .theme-toggle { width: 38px; height: 38px; }
  .site-header .menu-toggle { min-height: 42px; padding: 8px 13px; font-size: 10px; }
  .site-header .menu-toggle span { font-size: 19px; }
  .site-header .desktop-nav { padding: 14px 17px 18px; }
  .site-header .desktop-nav a { min-height: 46px; font-size: 15px; }

  .hero-home .hero-project-scatter { height: clamp(166px, 51vw, 214px); }
  .hero-home .hero-title { font-size: clamp(48px, 13.4vw, 72px); }
  #view-home .hero-home .hero-title .hero-title-name { font-size: clamp(42px, 12vw, 54px) !important; line-height: .96; }
  .hero-home .hero-title .hero-title-greeting { font-size: clamp(22px, 6.3vw, 30px); }
  .hero-home .hero-title-lead { font-size: clamp(19px, 5.2vw, 23px); }
  .hero-home .hero-title-service { font-size: clamp(18px, 5vw, 22px); }
  .hero-home .hero-lower > p { font-size: 15px; line-height: 1.65; }
  .hero-home .hero-actions .button-dark,
  .hero-home .hero-actions .text-link { min-height: 56px; font-size: 14px; }
  .hero-home .hero-actions .button-dark > span:last-child,
  .hero-home .hero-actions .text-link > span:last-child { width: 40px; height: 40px; flex-basis: 40px; }

  .view#view-home .home-work,
  .view#view-home .personal-work,
  .view#view-home .client-voices { padding: 42px 18px 48px; }
  .view#view-home .home-work .section-head h2,
  .view#view-home .personal-heading h2,
  .view#view-home .client-voices-head h2 { font-size: clamp(37px, 10.2vw, 49px); }
  .view#view-home .project-grid,
  .view#view-home .personal-grid,
  #view-projects .project-grid,
  #view-projects .all-grid { gap: 30px; }
  .view#view-home .project-meta .project-title,
  #view-projects .project-meta .project-title { font-size: 19px; }
  .view#view-home .project-meta .project-description,
  #view-projects .project-meta .project-description { font-size: 13px; line-height: 1.55; }
  .view#view-home .shuffle-button { min-height: 48px; padding-left: 15px; font-size: 13px; }
  .view#view-home .shuffle-button svg { width: 34px; height: 34px; }

  .view#view-home .home-services-head > p,
  .view#view-home .home-service-detail p { font-size: 15px; }
  .view#view-home .home-service-visual { aspect-ratio: 1.32 / 1; }
  .view#view-home .home-service-index { font-size: 10px; }
  .view#view-home .home-service-toggle { width: 38px; height: 38px; font-size: 22px; }
  .view#view-home .home-services-link { min-height: 52px; font-size: 14px; }

  #view-projects .projects-archive-heading .page-title,
  #view-services .services-hero .page-title { font-size: clamp(52px, 13.5vw, 74px); }
  #view-projects .projects-archive-heading .subhero-text,
  #view-services .services-hero-aside .services-page-intro { font-size: 15px; line-height: 1.7; }
  #view-projects .projects-archive-topline .mono,
  #view-projects .projects-archive-foot .mono { font-size: 10px; }
  #view-projects .tag-chip { min-height: 42px; padding: 9px 13px; font-size: 12px; }
  #view-projects .results-label { font-size: 12px; }

  #view-services .service-summary {
    grid-template-columns: 28px minmax(0, 1fr) 92px 40px;
    gap: 9px;
    min-height: 126px;
    padding: 17px 0;
  }
  #view-services .service-summary-title { font-size: clamp(23px, 6.8vw, 29px); line-height: 1.02; }
  #view-services .service-summary-teaser { margin-top: 8px; font-size: 11px; line-height: 1.45; }
  #view-services .service-summary-image { height: 88px; border-radius: 5px; }
  #view-services .service-summary-toggle { width: 38px; height: 38px; font-size: 22px; }
  #view-services .service-group-main { gap: 16px; margin-left: 37px; padding-bottom: 23px; }
  #view-services .service-group-main > p,
  #view-services .services-method-copy p,
  #view-services .services-end p { font-size: 15px; line-height: 1.7; }
  #view-services .service-group-main li { font-size: 14px; line-height: 1.5; }
  #view-services .service-group-main .text-link { min-height: 44px; font-size: 13px; }

  #view-about .about-name { font-size: clamp(54px, 14vw, 76px); }
  #view-about .about-portrait figcaption { font-size: 11px; }
  #view-about .about-portrait figcaption .mono { font-size: 10px; }
  #view-about .about-intro > .mono,
  #view-about .founder-label .mono { font-size: 10px; }
  #view-about .about-intro p,
  #view-about .founder-copy p { font-size: 15px; line-height: 1.75; }
  #view-about .about-intro p:first-of-type { font-size: 18px; line-height: 1.45; }
  #view-about .founder-copy h2,
  #view-about .about-cta h2 { font-size: clamp(36px, 9.4vw, 48px); }
  .about-resume > summary { min-height: 82px; }
  .about-resume > summary > .mono,
  .about-resume-column > .mono { font-size: 10px; }
  .about-resume > summary > strong { font-size: 19px; }
  .about-resume-column > article { grid-template-columns: 108px minmax(0, 1fr); gap: 12px; padding: 19px 0; }
  .about-resume-column > article time { font-size: 10px; }
  .about-resume-column > article h3 { font-size: 16px; }
  .about-resume-column > article p,
  .about-resume-column > article small { font-size: 13px; line-height: 1.6; }

  #view-contact .contact-title { font-size: clamp(53px, 14vw, 74px); }
  #view-contact .contact-intro { font-size: 15px; line-height: 1.7; }
  #view-contact .contact-field > span { font-size: 13px; }
  #view-contact .contact-field input,
  #view-contact .contact-field select,
  #view-contact .contact-field textarea { min-height: 54px; padding: 13px 14px; font-size: 16px; }
  #view-contact .contact-field textarea { min-height: 132px; }
  #view-contact .contact-panel-cta { min-height: 54px; font-size: 14px; }
  #view-contact .contact-panel-top,
  #view-contact .contact-panel-foot { font-size: 10px; }
  #view-contact .contact-direct { font-size: 10px; }
  #view-contact .contact-socials a { min-height: 40px; font-size: 13px; }

  #view-home .review-card blockquote { font-size: 19px; line-height: 1.55; }
  #view-home .review-credit strong { font-size: 15px; }
  #view-home .review-credit span { font-size: 10px; }
  #view-home .review-index,
  #view-home .review-count { font-size: 10px; }
  #view-home .review-arrows button { width: 44px; height: 44px; }

  .site-footer { padding: 27px 18px 0; }
  .site-footer .footer-connect > p { font-size: clamp(26px, 7.2vw, 34px); }
  .site-footer .footer-socials,
  .site-footer .footer-pages { gap: 12px; }
  .site-footer .footer-socials a,
  .site-footer .footer-pages a { min-height: 38px; font-size: 13px; }
  .site-footer .footer-cta { min-height: 46px; font-size: 13px; }
  .site-footer .footer-base { font-size: 11px; }
  .site-footer .footer-print { width: clamp(84px, 27vw, 122px); }

  #view-tools .tools-hero { padding: 25px 18px 20px; }
  #view-tools .tools-hero-top .mono,
  #view-tools .tools-hero-foot .mono { font-size: 9px; }
  #view-tools .tools-status { min-height: 34px; padding: 7px 10px; font-size: 10px; }
  #view-tools .tools-hero-grid { margin-top: 64px; }
  #view-tools .tools-title { width: 100%; max-width: 100%; min-width: 0; font-size: clamp(24px, 7.4vw, 34px) !important; line-height: 1.45; letter-spacing: -.065em; }
  #view-tools .tools-title-line { display: block; width: 100%; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  #view-tools .tools-title-line--second { display: flex; align-items: baseline; gap: .12em; }
  #view-tools .tools-title-line--second em { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  #view-tools .tools-hero-copy p { font-size: 15px; line-height: 1.7; }
  #view-tools .tools-scroll-cue { min-height: 42px; font-size: 13px; }
  #view-tools .tools-lab { padding: 34px 18px 38px; }
  #view-tools .tools-section-head h2 { font-size: clamp(30px, 8vw, 42px); }
  #view-tools .tool-card-copy { min-height: 172px; padding: 18px 18px 22px; }
  #view-tools .tool-card-meta .mono { font-size: 9px; }
  #view-tools .tool-coming { padding: 7px 10px; font-size: 10px; }
  #view-tools .tool-card h3 { font-size: 25px; }
  #view-tools .tool-card p { font-size: 14px; line-height: 1.65; }
  #view-tools .tool-card-action { width: 40px; height: 40px; }
  #view-tools .tools-page-end { font-size: 9px; }

  .project-modal .modal-panel { padding-inline: 18px; }
  .project-modal .modal-title { font-size: clamp(44px, 12vw, 68px); }
  .project-modal .modal-description { font-size: 15px; line-height: 1.7; }
  .project-modal .case-fact { padding-block: 15px; }
  .project-modal .case-fact > * { font-size: 13px; }
  .project-modal .case-piece > .case-image-zoom { min-height: 220px; }
  .project-modal .case-piece > .case-image-zoom img { min-height: 220px; }
  .project-modal .case-footer a { min-height: 46px; font-size: 13px; }

  .intro-topline, .intro-bottomline { font-size: 8px; }
  .intro-art { height: clamp(140px, 22svh, 190px); }
  .intro-mascot { width: clamp(128px, 36vw, 164px); }
  .intro-overline { font-size: 9px; }
  .intro-title { font-size: clamp(44px, 12vw, 60px); line-height: .96; }
  .intro-description { max-width: 320px; font-size: 15px; line-height: 1.55; }
  .intro-enter { min-width: 178px; min-height: 54px; font-size: 14px; }
}

@media (max-width: 420px) {
  #view-services .service-summary { grid-template-columns: 24px minmax(0, 1fr) 82px 38px; gap: 7px; }
  #view-services .service-summary-image { height: 82px; }
  .about-resume-column > article { grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
}

/* The editing tools keep the canvas prominent and give touch controls readable hit areas. */
@media (max-width: 760px) {
  .bitmap-dialog .bitmap-topbar { height: auto; min-height: 96px; flex: 0 0 96px; flex-wrap: wrap; align-content: center; justify-content: space-between; column-gap: 10px; row-gap: 8px; padding: 8px 14px; }
  .bitmap-dialog .bitmap-brand { order: 1; min-width: 0; flex: 1 1 calc(100% - 54px); gap: 8px; white-space: normal; line-height: 1.25; }
  .bitmap-dialog .bitmap-topbar > .bitmap-close { order: 2; }
  .bitmap-dialog .bitmap-app-switch { order: 3; width: 100%; max-width: none; flex: 0 0 100%; justify-content: space-between; gap: 4px; }
  .bitmap-dialog .bitmap-brand-label { font-size: 9px; }
  .bitmap-dialog .bitmap-topbar > .bitmap-close { width: 42px; height: 42px; flex-basis: 42px; }
  .bitmap-dialog .bitmap-app-switch button { min-width: 0; min-height: 40px; flex: 1 1 25%; padding-inline: 4px; font-size: 10px; }
  .bitmap-dialog .bitmap-heading { min-height: 88px; flex-basis: 88px; }
  .bitmap-dialog .bitmap-heading h2 { font-size: clamp(29px, 8vw, 35px); }
  .bitmap-dialog .bitmap-heading p { font-size: 13px; line-height: 1.45; }
  .bitmap-dialog .bitmap-kicker { font-size: 9px; }
  .bitmap-dialog .bitmap-quick-presets { min-height: 54px; height: 54px; flex-basis: 54px; }
  .bitmap-dialog .bitmap-quick-label strong { font-size: 12px; }
  .bitmap-dialog .bitmap-preset-strip button { min-height: 40px; font-size: 11px; }
  .bitmap-dialog .bitmap-stage { height: clamp(285px, 42dvh, 380px); min-height: 285px; flex-basis: clamp(285px, 42dvh, 380px); }
  .bitmap-dialog .bitmap-preview-label { font-size: 12px; }
  .bitmap-dialog .bitmap-compare { min-height: 42px; font-size: 12px; }
  .bitmap-dialog .bitmap-export > button,
  .bitmap-dialog .bitmap-export label { min-height: 42px; font-size: 10px; }
  .bitmap-dialog .bitmap-export select { min-height: 32px; font-size: 11px; }
  .bitmap-dialog .bitmap-group-heading h3 { font-size: 19px; }
  .bitmap-dialog .bitmap-group-heading > span,
  .bitmap-dialog .bitmap-range > span,
  .bitmap-dialog .bitmap-range output { font-size: 14px; }
  .bitmap-dialog .bitmap-field > span,
  .bitmap-dialog .bitmap-favorites,
  .bitmap-dialog .bitmap-check { font-size: 15px; }
  .bitmap-dialog .bitmap-field select,
  .bitmap-dialog .bitmap-favorites select { min-height: 54px; font-size: 16px; }
  .bitmap-dialog .bitmap-color-field { min-height: 58px; font-size: 14px; }
  .bitmap-dialog .bitmap-range { padding: 16px; }
  .bitmap-dialog .bitmap-range input[type=range] { height: 52px; }
  .bitmap-dialog .bitmap-presets button,
  .bitmap-dialog .bitmap-control-actions button,
  .bitmap-dialog .bitmap-save { min-height: 50px; font-size: 13px; }
  .bitmap-dialog .bitmap-zoom-dock .bitmap-zoom-fit { min-height: 40px; font-size: 11px; }

  .experimental-lab-dialog .lab-topbar { height: auto; min-height: 96px; flex: 0 0 96px; flex-wrap: wrap; align-content: center; justify-content: space-between; column-gap: 10px; row-gap: 8px; padding: 8px 14px; }
  .experimental-lab-dialog .lab-brand { order: 1; min-width: 0; flex: 1 1 calc(100% - 54px); gap: 8px; white-space: normal; line-height: 1.25; }
  .experimental-lab-dialog .lab-topbar > .bitmap-close { order: 2; }
  .experimental-lab-dialog .lab-app-switch { order: 3; width: 100%; max-width: none; flex: 0 0 100%; justify-content: space-between; gap: 4px; }
  .experimental-lab-dialog .lab-brand { font-size: 10px; }
  .experimental-lab-dialog .lab-brand > span:nth-child(2) { font-size: 9px; }
  .experimental-lab-dialog .lab-topbar > .bitmap-close { width: 42px; height: 42px; flex-basis: 42px; }
  .experimental-lab-dialog .lab-app-switch button { min-width: 0; min-height: 40px; flex: 1 1 25%; padding-inline: 4px; font-size: 10px; }
  .experimental-lab-dialog .lab-heading { min-height: 88px; flex-basis: 88px; }
  .experimental-lab-dialog .lab-heading h2 { font-size: clamp(29px, 8vw, 35px); }
  .experimental-lab-dialog .lab-heading p { font-size: 13px; line-height: 1.45; }
  .experimental-lab-dialog .lab-heading .bitmap-kicker { font-size: 9px; }
  .experimental-lab-dialog .lab-stage { height: clamp(285px, 42dvh, 380px); min-height: 285px; flex-basis: clamp(285px, 42dvh, 380px); }
  .experimental-lab-dialog .lab-stage-top { font-size: 12px; }
  .experimental-lab-dialog .lab-stage-bottom button { min-height: 44px; font-size: 11px; }
  .experimental-lab-dialog .lab-group h3 { font-size: 19px; }
  .experimental-lab-dialog .lab-field,
  .experimental-lab-dialog .lab-check { font-size: 15px; }
  .experimental-lab-dialog .lab-field select,
  .experimental-lab-dialog .lab-field input[type=number],
  .experimental-lab-dialog .lab-saved-row select { min-height: 54px; font-size: 16px; }
  .experimental-lab-dialog .lab-controls textarea { min-height: 130px; font-size: 16px; }
  .experimental-lab-dialog .lab-slider { padding: 16px; }
  .experimental-lab-dialog .lab-slider > span,
  .experimental-lab-dialog .lab-slider output { font-size: 14px; }
  .experimental-lab-dialog .lab-slider input[type=range] { height: 52px; }
}

/* A brief red-to-blue signal marks the experimental section as a new space. */
html.tools-route-entering::after {
  position: fixed;
  z-index: 99999;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(142, 170, 255, .36) 5px 7px, transparent 7px 13px),
    linear-gradient(112deg, rgba(200, 73, 56, .92), rgba(106, 95, 183, .82) 52%, rgba(92, 132, 226, .9));
  animation: tools-route-glitch .72s steps(1, end) both;
}
@keyframes tools-route-glitch {
  0% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateX(-2.5%); }
  12% { opacity: .96; clip-path: inset(14% 0 68% 0); transform: translateX(1.8%); }
  20% { opacity: .82; clip-path: inset(42% 0 40% 0); transform: translateX(-1.2%); }
  31% { opacity: .9; clip-path: inset(67% 0 18% 0); transform: translateX(1.4%); }
  43% { opacity: .72; clip-path: inset(0); transform: translateX(-.4%); }
  60% { opacity: .46; clip-path: inset(0); transform: none; }
  100% { opacity: 0; clip-path: inset(0); transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.tools-route-entering::after { animation-duration: .18s; }
}

/* Keep navigation arrows as text glyphs on mobile browsers. */
@supports (font-variant-emoji: text) { .button-arrow, .project-number, .tools-hero-foot, .hero-project-open, .tools-snake-controls, .case-back, .case-image-hint, .tool-card-action, .bitmap-dialog button, .experimental-lab-dialog button { font-variant-emoji: text; } }