/* Phones only. Loaded last; larger screens never see it.

   Each section is a poster drawn 530 units wide, so on a 390px phone its
   small text comes out at 7 to 9px. Here every text group is enlarged as a
   whole: its type, its leading, its boxes and the gaps inside it all grow by
   the same factor (--k), so the proportions the design was drawn with are
   kept. Whatever sits below a group moves down by exactly what the group
   grew, and the section shows that much further. Nothing is squeezed. */
@media (max-width:860px){
  :root{--k:1.3}

  /* ---- menu ---- */
  nav.menu a{font-size:max(18px, calc(19 * var(--u)));padding:10px 0}
  nav.menu .cta{display:inline-flex;align-items:center;gap:10px}
  nav.menu .cta svg{width:16px;height:16px;flex:none}

  /* ---- hero: the four dial entries. Lines 30% larger; the second row and the rule drop to match ---- */
  #hero .roles{font-size:calc(12.6 * var(--u));letter-spacing:.06em;white-space:nowrap}
  #hero .stat p{font-size:calc(10.3 * var(--u) * var(--k));margin-top:calc(1.742 * var(--u) * var(--k))}
  #hero .stat u{font-size:calc(13.01 * var(--u) * 1.12)}
  #hero .sg-r{top:calc(805 * var(--u))}
  #hero .sg-l::after{top:calc(104 * var(--u))}
  #hero .stat + .stat::before{height:calc(96 * var(--u))}

  /* ---- about: left exactly as designed. Its paragraph is hemmed in by the thread and the prints;
     any larger and it gains lines and runs into the handwriting below it. ---- */

  /* ---- work ---- */
  #work .btn{min-width:max-content;white-space:nowrap}

  /* ---- services: the card's text grows 30%, the card grows 69 units with it, and the shelf and notes move down 69 ---- */
  #services .card{height:calc(367 * var(--u))}
  #services .body{font-size:calc(11.4 * var(--u) * var(--k));line-height:calc(17.5 * var(--u) * var(--k))}
  #services .list{top:calc(243 * var(--u));font-size:calc(10.6 * var(--u) * var(--k));line-height:calc(18 * var(--u) * var(--k))}
  #services .next{top:calc(343 * var(--u))}
  #services .stage > :not(.eyebrow):not(.card){margin-top:calc(69 * var(--u))}
  #services{--cb:1}

  /* ---- process: description and points grow 30%; the rack moves down 45 ---- */
  #process .step{height:calc(385 * var(--u))}
  #process .b{font-size:calc(11.4 * var(--u) * var(--k));line-height:calc(17.5 * var(--u) * var(--k))}
  #process .l{top:calc(272 * var(--u));font-size:calc(11.6 * var(--u) * 1.2)}
  #process .l li{height:calc(22 * var(--u) * var(--k));line-height:calc(22 * var(--u) * var(--k))}
  #process .stage > canvas{margin-top:calc(45 * var(--u))}
  #process{--cb:-37}

  /* ---- contact: the form is one group (rows, gaps, button all x1.3); the telephone and details move down 99 ---- */
  #contact .intro{font-size:calc(11.4 * var(--u) * var(--k));line-height:calc(18 * var(--u) * var(--k))}
  #contact .form{top:calc(219 * var(--u));height:calc(260 * var(--u) * var(--k))}
  #contact .f-name,#contact .f-mail{height:calc(41 * var(--u) * var(--k))}
  #contact .f-subj{top:calc(49 * var(--u) * var(--k));height:calc(41 * var(--u) * var(--k))}
  #contact .f-msg{top:calc(98 * var(--u) * var(--k));height:calc(74 * var(--u) * var(--k))}
  /* the fields are typed in at 16px (below that, iPhones zoom the whole page on focus) and drawn at three quarters, so they read as 12px */
  #contact .f input,#contact .f textarea{font-size:16px;width:133.34%;height:133.34%;transform:scale(.75);transform-origin:0 0;
    border-radius:calc(8 * var(--u) * 1.733);padding:0 calc(17 * var(--u) * 1.733)}
  #contact .f textarea{padding-top:calc(13 * var(--u) * 1.733)}
  #contact .send{top:calc(185 * var(--u) * var(--k));width:calc(207 * var(--u) * 1.2);height:calc(40 * var(--u) * var(--k));font-size:calc(12.5 * var(--u) * var(--k))}
  #contact .reply{top:calc(234 * var(--u) * var(--k));font-size:calc(10.4 * var(--u) * var(--k))}
  #contact .status{left:calc(262 * var(--u));top:calc(186 * var(--u) * var(--k))}
  #contact .stage > :not(.eyebrow):not(.toprule):not(.intro):not(.form){margin-top:calc(99 * var(--u))}
  /* details: larger, and the location takes its own line because the email no longer fits beside it */
  #contact .info b{font-size:calc(9 * var(--u) * 1.4)}
  #contact .i-mail,#contact .i-loc{font-size:calc(9.4 * var(--u) * 1.45);gap:calc(12 * var(--u) * 1.2)}
  #contact .i-mail svg{width:calc(21 * var(--u) * 1.3);height:calc(16 * var(--u) * 1.3)}
  #contact .i-loc svg{width:calc(17 * var(--u) * 1.3);height:calc(22 * var(--u) * 1.3)}
  #contact .s1{display:none}
  #contact .i-loc{left:calc(48 * var(--u));top:calc(865 * var(--u))}
  #contact .i-soc{top:calc(924 * var(--u))}
  #contact .i-soc ul{gap:calc(10 * var(--u) * 1.6);margin-top:calc(10 * var(--u) * 1.4)}
  #contact .i-soc a{position:relative;width:calc(30 * var(--u) * 1.6);height:calc(30 * var(--u) * 1.6)}
  #contact{--cb:-165}

  /* ---- footer: paragraph x1.3, the rest follows 20 lower; the copyright takes its own line under the button ---- */
  #thanks,#thanks .stage{height:calc(868 * var(--u))}
  #thanks .para{font-size:calc(11.4 * var(--u) * var(--k));line-height:calc(17.5 * var(--u) * var(--k))}
  #thanks .stage > :not(.eyebrow):not(.title):not(.rule):not(.para){margin-top:calc(20 * var(--u))}
  #thanks .copy{top:calc(792 * var(--u));font-size:calc(9.8 * var(--u) * var(--k))}
  #thanks .top{font-size:calc(11 * var(--u) * 1.2)}
  #thanks .top i{width:calc(34 * var(--u) * 1.3);height:calc(34 * var(--u) * 1.3)}

  /* a thumb-sized touch area around the small controls, without changing how they look */
  #contact .i-soc a::after,#thanks .top::after,#work .btn::after{content:"";position:absolute;inset:-8px}
}