/* Ridge & Valley — mobile refinements, shared by every page.

   The markup styles itself with inline `style` attributes, so anything that has
   to override a page needs `!important`; that is the same trick the 860px block
   inside each page's <style> already uses. This file is linked *after* that
   block so equal-specificity rules here win.

   Two conventions worth knowing before editing:

   1. Rules that key off a padding value are written twice, against both
      `padding:40px` and `padding: 40px`. rvh.js assigns inline styles to every
      [data-reveal] element, and the moment it does, the browser rewrites that
      element's whole style attribute in normalised form — with a space after
      each colon. A selector written only against the authored spelling
      silently stops matching exactly the elements the reveal animation
      touches, which is a genuinely hard bug to see. Keep both spellings.

   2. Where one value is a substring of a longer one (`110px 40px` inside
      `110px 40px 60px`) the shorter selector is emitted first, so the longer
      and more specific value wins on document order.

   Four things were wrong below 860px, grouped in that order: the header bar
   overflowed the screen, horizontal flex rows clipped their last items, grid
   cards could not shrink, and section padding stayed at desktop scale. */

/* Referenced by the mobile menu panel in rvh.js so the two stay in step. */
:root{--nav-h:88px}

/* ------------------------------------------------------------------ header */
/* The desktop bar needs 474px to lay out: 182px of logo, a 176px CTA pill, a
   32px gap and the 44px menu button. On a 390px phone it asked for 439px, so
   the wordmark ran underneath the CTA and the menu button was pushed clean off
   the right edge — the button that is the *only* way to reach the other pages
   on a phone. Below 860px the bar is now just the logo and the menu button,
   and the CTA moves into the panel, where it is styled as the primary action. */
@media (max-width:860px){
  :root{--nav-h:72px}
  #rvh-nav{height:var(--nav-h)!important}
  #rvh-nav>div>a[data-cta]{display:none!important}
  #rvh-nav>a{min-width:0}
  #rvh-nav>a>span{font-size:18px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #rvh-nav>a>svg{flex:none}
}

/* ------------------------------------------------------- wrapping flex rows */
/* Hardly any of the inline flex rows set flex-wrap, so on a phone they ran off
   the side instead of reflowing: the footer dropped "Privacy" and "LinkedIn"
   past the right edge, and the two founder e-mail addresses on the home page
   were cut off at both ends.

   This is deliberately aimed at plain element selectors rather than at
   [style*="display:flex"] — flex-wrap is ignored on anything that is not a flex
   container, so casting wide costs nothing and avoids depending on how the
   style attribute happens to be spelled. Wrapping also only engages when a row
   genuinely overflows, so rows that already fit are untouched. */
@media (max-width:860px){
  main div,main ul,main ol,main dl,main label,
  footer,footer div,footer ul{flex-wrap:wrap}

  /* The scrolling trade list is one long track that must never wrap. The id
     outranks the rules above regardless of order. */
  #rvh-marq,#rvh-marq div{flex-wrap:nowrap}

  /* Footer links become a wrapped block, so give them room and a bigger tap
     area than the bare 18px line box. */
  footer>div{gap:4px 22px!important}
  footer a{padding:7px 0}
}

/* --------------------------------------------------------------- long words */
/* A `1fr` grid track is `minmax(auto,1fr)`, and `auto` refuses to go below the
   widest item's min-content. One unbreakable e-mail address inside a card was
   therefore setting the width of every card in the grid, pushing all of them
   ~36px past the right edge of a 360px screen. `minmax(0,1fr)` lets the track
   shrink; the wrapping rules give the long strings somewhere to go. */
@media (max-width:1080px){
  [data-cols="4"],[data-cols="5"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:860px){
  [data-cols]{grid-template-columns:minmax(0,1fr)!important}
  main,footer{overflow-wrap:break-word}
  a[href^="mailto:"]{overflow-wrap:anywhere}

  /* Pill buttons set white-space:nowrap for a wide canvas; on a narrow one the
     longest of them ran off the side, so let their labels wrap instead. */
  main a[style*="white-space:nowrap"],main a[style*="white-space: nowrap"]{white-space:normal!important}
}

/* --------------------------------------------------------- vertical rhythm */
/* The 860px block only ever reset horizontal padding, so sections kept their
   desktop 90–150px top and bottom padding on a 390px screen. That is what left
   the long empty bands between sections and made the home page 10,888px tall. */
@media (max-width:860px){
  /* the nav is 72px tall here, so 118px leaves a comfortable 46px below it */
  header{padding-top:118px!important}
  header[style*="padding:190px 40px 90px"],
  header[style*="padding: 190px 40px 90px"]{padding-bottom:60px!important}
  header[style*="padding:190px 40px 80px"],
  header[style*="padding: 190px 40px 80px"]{padding-bottom:56px!important}
  header[style*="padding:180px 40px 50px"],
  header[style*="padding: 180px 40px 50px"]{padding-bottom:40px!important}
  header[style*="padding:180px 40px 40px"],
  header[style*="padding: 180px 40px 40px"]{padding-bottom:36px!important}
  header[style*="padding:170px 40px 60px"],
  header[style*="padding: 170px 40px 60px"]{padding-bottom:44px!important}

  section[style*="padding:40px 40px"],
  section[style*="padding: 40px 40px"]{padding-top:36px!important;padding-bottom:36px!important}

  section[style*="padding:60px 40px"],
  section[style*="padding: 60px 40px"]{padding-top:48px!important;padding-bottom:48px!important}

  section[style*="padding:90px 40px"],
  section[style*="padding: 90px 40px"]{padding-top:56px!important;padding-bottom:56px!important}

  section[style*="padding:110px 40px"],
  section[style*="padding: 110px 40px"]{padding-top:64px!important;padding-bottom:64px!important}

  section[style*="padding:0 40px 60px"],
  section[style*="padding: 0 40px 60px"]{padding-bottom:44px!important}

  section[style*="padding:0 40px 110px"],
  section[style*="padding: 0 40px 110px"]{padding-bottom:64px!important}

  section[style*="padding:20px 40px 60px"],
  section[style*="padding: 20px 40px 60px"]{padding-top:20px!important;padding-bottom:44px!important}

  section[style*="padding:20px 40px 80px"],
  section[style*="padding: 20px 40px 80px"]{padding-top:20px!important;padding-bottom:56px!important}

  section[style*="padding:40px 40px 60px"],
  section[style*="padding: 40px 40px 60px"]{padding-top:36px!important;padding-bottom:44px!important}

  section[style*="padding:60px 40px 40px"],
  section[style*="padding: 60px 40px 40px"]{padding-top:48px!important;padding-bottom:36px!important}

  section[style*="padding:100px 40px 60px"],
  section[style*="padding: 100px 40px 60px"]{padding-top:60px!important;padding-bottom:44px!important}

  section[style*="padding:110px 40px 60px"],
  section[style*="padding: 110px 40px 60px"]{padding-top:64px!important;padding-bottom:44px!important}

  section[style*="padding:110px 40px 130px"],
  section[style*="padding: 110px 40px 130px"]{padding-top:64px!important;padding-bottom:72px!important}

  section[style*="padding:130px 40px 140px"],
  section[style*="padding: 130px 40px 140px"]{padding-top:72px!important;padding-bottom:76px!important}

  section[style*="padding:150px 40px 60px"],
  section[style*="padding: 150px 40px 60px"]{padding-top:78px!important;padding-bottom:44px!important}
}

/* ------------------------------------------------------------ card interiors */
/* Card padding is set for a 1360px canvas. Left at 40–56px a side it ate a
   third of a phone screen, so the boxes are brought in to a common 26px.
   Buttons and pills (vertical padding under 26px) are deliberately untouched. */
@media (max-width:860px){
  div[style*="padding:80px"],
  div[style*="padding: 80px"],
  form[style*="padding:80px"],
  form[style*="padding: 80px"]{padding:40px 26px!important}

  div[style*="padding:52px"],
  div[style*="padding: 52px"],
  form[style*="padding:52px"],
  form[style*="padding: 52px"],
  div[style*="padding:50px 56px"],
  div[style*="padding: 50px 56px"],
  form[style*="padding:50px 56px"],
  form[style*="padding: 50px 56px"],
  div[style*="padding:54px 48px"],
  div[style*="padding: 54px 48px"],
  form[style*="padding:54px 48px"],
  form[style*="padding: 54px 48px"],
  div[style*="padding:50px 46px"],
  div[style*="padding: 50px 46px"],
  form[style*="padding:50px 46px"],
  form[style*="padding: 50px 46px"],
  div[style*="padding:46px 44px"],
  div[style*="padding: 46px 44px"],
  form[style*="padding:46px 44px"],
  form[style*="padding: 46px 44px"],
  div[style*="padding:44px 52px"],
  div[style*="padding: 44px 52px"],
  form[style*="padding:44px 52px"],
  form[style*="padding: 44px 52px"],
  div[style*="padding:44px 40px"],
  div[style*="padding: 44px 40px"],
  form[style*="padding:44px 40px"],
  form[style*="padding: 44px 40px"],
  div[style*="padding:48px 42px"],
  div[style*="padding: 48px 42px"],
  form[style*="padding:48px 42px"],
  form[style*="padding: 48px 42px"],
  div[style*="padding:40px 48px"],
  div[style*="padding: 40px 48px"],
  form[style*="padding:40px 48px"],
  form[style*="padding: 40px 48px"],
  div[style*="padding:40px 42px"],
  div[style*="padding: 40px 42px"],
  form[style*="padding:40px 42px"],
  form[style*="padding: 40px 42px"]{padding:32px 26px!important}

  div[style*="padding:38px 36px"],
  div[style*="padding: 38px 36px"],
  form[style*="padding:38px 36px"],
  form[style*="padding: 38px 36px"],
  div[style*="padding:36px 40px"],
  div[style*="padding: 36px 40px"],
  form[style*="padding:36px 40px"],
  form[style*="padding: 36px 40px"]{padding:30px 26px!important}

  div[style*="padding:32px 36px"],
  div[style*="padding: 32px 36px"],
  form[style*="padding:32px 36px"],
  form[style*="padding: 32px 36px"],
  div[style*="padding:30px 36px"],
  div[style*="padding: 30px 36px"],
  form[style*="padding:30px 36px"],
  form[style*="padding: 30px 36px"]{padding:28px 26px!important}

  div[style*="padding:26px 40px"],
  div[style*="padding: 26px 40px"],
  form[style*="padding:26px 40px"],
  form[style*="padding: 26px 40px"]{padding:26px!important}
}

/* --------------------------------------------------------- scrolled nav bar */
/* rvh.js used to write background, backdrop-filter and box-shadow as inline
   styles from the scroll handler, on every scroll event. Backdrop blur is one
   of the most expensive things a phone GPU can be asked for, and re-declaring
   it sixty times a second while the user is trying to tap something is exactly
   the kind of main-thread work that shows up as a slow Interaction to Next
   Paint. The handler now just toggles [data-scrolled] once, when the state
   actually changes, and the appearance lives here. */
#rvh-nav[data-scrolled]{
  background:rgba(244,239,227,.9);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:0 10px 30px -18px rgba(21,56,44,.3);
}

/* ------------------------------------------------------------- form controls */
/* Safari on iOS zooms the whole page in whenever a focused field's text is
   under 16px, and then leaves the reader zoomed and scrolled sideways. The
   contact form's inputs were set to 15px in the page's own <style> block, so
   the inline-style rules further down never saw them. 48px of height goes with
   it, so the fields are as easy to hit as they are to read. */
@media (max-width:860px){
  input,select,textarea{font-size:16px!important;min-height:48px}
  textarea{min-height:120px}
  button,input[type="submit"]{min-height:48px}
}

/* ------------------------------------------------------------- reading size */
/* The page is typeset for a desktop canvas, where 13-15px labels and captions
   are comfortable. On a phone they are below the 16px that mobile-friendliness
   checks (and most people's eyes) ask for, so every inline size under 16px is
   raised one step here. Sizes are matched against both spellings of the style
   attribute for the reason given at the top of this file. */
@media (max-width:860px){
  [style*="font-size:12.5px"],[style*="font-size: 12.5px"]{font-size:14px!important}
  [style*="font-size:13px"],[style*="font-size: 13px"],
  [style*="font-size:13.5px"],[style*="font-size: 13.5px"]{font-size:15px!important}
  [style*="font-size:14px"],[style*="font-size: 14px"],
  [style*="font-size:14.5px"],[style*="font-size: 14.5px"],
  [style*="font-size:15px"],[style*="font-size: 15px"],
  [style*="font-size:15.5px"],[style*="font-size: 15.5px"]{font-size:16px!important}

  /* Body copy set at 17-18px for a wide measure reads small once the column is
     360px across; a little more leading comes with it. */
  main p[style*="font-size:17px"],main p[style*="font-size: 17px"],
  main p[style*="font-size:18px"],main p[style*="font-size: 18px"]{font-size:18px!important;line-height:1.65!important}
}

/* -------------------------------------------------------------- tap targets */
/* Anything a thumb is meant to hit gets at least 44px of height. Pills already
   carry enough vertical padding at desktop sizes; the ones that do not are the
   small ones, plus every bare text link in the header, the footer and the
   article bylines, which were only ever as tall as their line box. */
@media (max-width:860px){
  main a[style*="border-radius:999px"],main a[style*="border-radius: 999px"],
  main button,footer button,nav button{
    min-height:44px;
    box-sizing:border-box;
  }

  /* Bare links need the height as well as somewhere to put it, and inline
     elements ignore min-height — so they are made inline-flex first. Only the
     rvh-h1 hover style is a bare text link; every other data-hv value is a card
     or a pill that already declares its own display inline. None of them sit
     inside running text, so nothing here disturbs a line box. */
  nav a,footer a,a[data-hv="rvh-h1"]{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }

  /* Rows of links need space between the targets too, not just size, or two
     44px boxes sit edge to edge and the wrong one gets hit. */
  footer>div{gap:6px 24px!important}
  #rvh-nav>div{gap:14px!important}
}