/* ============================================================
   phone.css  —  the site on a phone
   ------------------------------------------------------------
   stage.css keeps the 800x555 canvas and scales it to the window,
   so on a phone everything shrinks together and the copy ends up
   around 6px tall. Below 760px these rules stop the scaling:

     - the canvas becomes the page, and the copy (the resume, the
       contact lines) flows at a readable size
     - the nav is one centred row of the four links at 17px on 44px
       tap targets, the ghost home icon at its left
     - the home page lays its photograph out as the gallery does (the
       same markup and script), so the way into the gallery is the
       same slide as on a desktop
     - the gallery and process pages lay the work out in the window
       at 1:1: the thumbnails at their own 100x65, the carets as they
       are, the piece kept below the taller nav row and closer to the
       sides than on a desktop (--nav-row, --caret-zone, --border,
       read by js/work.js)
     - the contact page keeps its photograph at 1:1 behind the
       address, which is set in larger type

   Above 760px nothing here applies and the pages are as stage.css
   makes them. Every page has
     <meta name="viewport" content="width=device-width, initial-scale=1">
   without which a phone lays a page out 980px wide and zooms out.
   Loaded after stage.css by every top-level page.
   ============================================================ */

@media (max-width: 760px) {
  /* ---- the canvas becomes the page ----------------------------- */
  html,
  body {
    height: auto;
    min-height: 100%;
  }
  body {
    display: block;
  }
  .stage-frame {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow: visible;
  }
  .stage {
    width: auto;
    height: auto;
    transform: none;
    overflow: visible;
  }
  .stage--page {
    padding: 0 18px 32px;
  }
  /* the empty row that holds the nav's place on the canvas: as tall
     as the phone nav row                                           */
  .stage--page > table:first-of-type img[height="23"] {
    height: 64px;
  }

  /* ---- the nav: one row, larger, the home icon at its left ------- */
  .site-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    padding: 10px 10px 0 52px;
    transform: none;
  }
  .site-nav table {
    width: 100%;
  }
  .site-nav td {
    text-align: center;
    white-space: normal;
  }
  .site-nav img {
    display: none;
  }
  .nav-btn {
    width: auto;
    height: 44px;
    line-height: 44px;
    font-size: 17px;
    letter-spacing: .5px;
    padding: 0 7px;
  }
  .nav-btn--resume {
    width: auto;
  }
  .site-nav--home {
    left: 8px;
    right: auto;
    z-index: 2;                /* above the nav's row, which spans the width here */
    padding: 10px 0 0;
    width: 44px;
  }
  .site-nav--home td {
    text-align: left;
  }
  .nav-btn--home {
    width: 44px;
    margin: 0;
    padding: 0;
    opacity: .35;              /* no hover on a phone, so a shade stronger */
  }
  .nav-btn--home svg {
    width: 20px;
    height: 19px;
    margin: 12px auto 0;
  }
  .is-full[data-ground-top="dark"] .nav-btn--home {
    opacity: .45;
  }
  /* the fade behind the nav: as tall as the row needs */
  .nav-fade,
  .backdrop::after {
    height: 150px;
  }

  /* ---- resume ---------------------------------------------------- */
  .resume-copy {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.5;
  }
  .resume-copy h2 {
    font-size: 19px;
    margin-bottom: .8em;
  }
  .resume-copy p {
    margin-bottom: .9em;
  }
  /* the tab row: no 420px spacer cell, the tabs wrap at a readable size */
  .stage--page table[width="750"] {
    width: 100% !important;
  }
  .stage--page td[width="420"] {
    display: none;
  }
  .stage--page table[width="750"] td {
    text-align: center;        /* the row centred on the screen */
  }
  /* the tab row on one line down to a 320px screen: the four names with
     their dots, no arrow glyphs (the names say where they go)          */
  .resume-tabs {
    font-size: 15px;
    line-height: 2.2;
    white-space: nowrap;
  }
  .resume-tabs .tab-sep {
    width: 16px;
  }
  .resume-tabs .tab-arrow {
    display: none;
  }

  /* ---- home ---------------------------------------------------------
     The photograph is laid out by js/work.js as the gallery lays it out
     (stage.css, "Home"); here the .home-work block takes the phone's
     allowances, the gallery's own, and the taller fade behind the nav. */
  html.home-page,
  body.home {
    height: 100%;
  }
  body.home {
    background: #1a1a1a;
  }
  .home .stage-frame,
  .home .stage {
    width: 100%;
    height: 100%;
  }
  .home .home-work {
    --nav-row: 64px;
    --caret-zone: 24px;
    --border: 8px;
  }
  .home .home-work::after {
    height: 150px;
  }
  .home .tagline,
  .gallery-tagline {
    left: auto;
    top: auto;
    right: 18px;
    bottom: 26px;
    width: auto;
    height: 19px;
    z-index: 1;
    font-size: 15px;
    letter-spacing: 1px;
    transform: none;
  }

  /* ---- gallery and process -----------------------------------------
     The work fills the window less the strip, at 1:1. The nav row is
     64px tall here; js/work.js keeps the piece below --nav-row.       */
  .browse,
  .browse body {
    height: 100%;
  }
  .browse body {
    display: flex;
  }
  .browse .stage-frame {
    width: 100%;
    height: 100%;
  }
  .browse .stage {
    width: 100%;
    height: 100%;
    transform: none;
    --nav-row: 64px;           /* js/work.js keeps the piece below the nav row ... */
    --caret-zone: 24px;        /* ... and this far from each side: the carets may overlap a photograph's edge here */
    --border: 8px;             /* a photograph shown whole: this much white around it, beyond the above */
  }
  .browse .browse-strip {
    -webkit-overflow-scrolling: touch;
  }
  .browse .work-caption,
  .browse .work-credit,
  .browse .process-credit {
    font-size: 12px;
    line-height: 15px;
  }
  .browse .work-caption {
    right: 18px;
  }
  .browse .work-credit {
    left: 18px;
  }

  /* ---- contact --------------------------------------------------------
     The photograph stays at 1:1, its canvas centred on the window, the
     bands carrying its edges beyond; the address in larger type, one
     line each, below the canvas.                                        */
  .contact,
  .contact body {
    height: 100%;
  }
  .contact .backdrop-canvas {
    margin: -167.5px 0 0 -400px;   /* the canvas 110px below centre: the bowl lower, the backdrop above the nav */
    transform: none;
  }
  /* the address low on the page, over the table surface at the foot of
     the photograph (the canvas's bottom edge is 387.5px under the
     window's middle; the 64px nav row above this table is taken off);
     on a short screen, no lower than 110px above the bottom edge     */
  .contact .stage--page td[height="445"] {
    height: min(calc(50vh + 226px), calc(100vh - 174px));
  }
  .contact .contact-line {
    display: block;
    width: auto !important;
    height: auto;
    font-size: 16px;
    line-height: 1.7;
  }
}

/* narrower phones: the nav row would wrap, and the 64px row the gallery
   keeps clear would be two rows; a size down keeps it one               */
@media (max-width: 380px) {
  .nav-btn {
    font-size: 15px;
    letter-spacing: .3px;
    padding: 0 5px;
  }
}
@media (max-width: 340px) {
  .site-nav {
    padding-left: 46px;
  }
  .nav-btn {
    font-size: 14px;
    letter-spacing: .2px;
    padding: 0 4px;
  }
}