/* ── what every page shares ──────────────────────────────────────────────────
   A phone is a screen under 760px, or a touch screen on its side under 500px tall (a landscape iPhone
   is 750–930px wide). Every stylesheet's phone rules use this same pair, and site.js's PHONE is the
   same test for the scripts. */

/* the text keeps the size it was set at when a phone turns on its side; left alone, Safari enlarges it */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* the phone menu: a button at the left of either header, where the pages' links have no room, and the
   menu it drops from the top: the pages, then Sign in. The page's own stylesheet colours the button
   for its header and hides the link the button stands in for. */
.mn-btn,.mn,.mn-scrim{display:none}
@media(max-width:760px),(max-width:960px) and (max-height:500px) and (pointer:coarse){
  .mn-btn{all:unset;box-sizing:border-box;position:absolute;left:10px;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;
    display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding-left:12px;cursor:pointer;color:#F7F5F0}
  .mn-btn i{display:block;width:20px;height:1.5px;border-radius:1px;background:currentColor}
  .mn-btn i + i{width:14px}
  .mn-btn:focus-visible{outline:2px solid currentColor;outline-offset:-4px;border-radius:8px}
  .hb .mn-btn{top:32px;color:var(--ink)}
  .hb.is-ondark .mn-btn{color:#F7F5F0}
  /* the menu drops from the top: the pages, then Sign in */
  .mn{display:block;position:fixed;left:0;right:0;top:0;z-index:80;padding:0 22px 26px;color:#F7F5F0;
    background:radial-gradient(90% 70% at 0% 0%,rgba(110,74,99,.42),transparent 72%),#17131A;box-shadow:0 30px 60px -30px rgba(0,0,0,.75);
    transform:translateY(-100%);visibility:hidden;transition:transform .38s cubic-bezier(.22,.61,.36,1),visibility 0s linear .38s}
  .mn.is-on{transform:none;visibility:visible;transition:transform .38s cubic-bezier(.22,.61,.36,1)}
  .mn-top{position:relative;height:91px;display:flex;align-items:center;justify-content:center}
  .mn-mark img{display:block;height:23.4px;width:auto}
  .mn-x{all:unset;box-sizing:border-box;position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:44px;height:44px;
    display:grid;place-items:center;font-size:28px;line-height:1;cursor:pointer;color:rgba(247,245,240,.85)}
  .mn-x:focus-visible{outline:2px solid #F7F5F0;outline-offset:-4px;border-radius:8px}
  .mn-links{display:flex;flex-direction:column;border-top:1px solid rgba(247,245,240,.12)}
  .mn-links a{display:flex;align-items:center;justify-content:space-between;padding:18px 2px;border-bottom:1px solid rgba(247,245,240,.12);
    font-family:var(--serif);font-size:28px;letter-spacing:-.016em;color:#F7F5F0;text-decoration:none}
  .mn-links a span{font-family:var(--sans);font-size:17px;opacity:.55}
  .mn-links a[aria-current=page]{color:#D8B9CD}
  .mn-signin{display:flex;align-items:center;justify-content:center;margin-top:24px;padding:12px 18px;border:1.25px solid rgba(247,245,240,.6);
    border-radius:8px;font:500 15px/20px var(--sans);color:#F7F5F0;text-decoration:none}
  .mn-signin:active{background:#F7F5F0;color:#1F1D1A}
  .mn-scrim{display:block;position:fixed;inset:0;z-index:79;background:rgba(14,9,17,.55);opacity:0;pointer-events:none;transition:opacity .3s ease}
  .mn-scrim.is-on{opacity:1;pointer-events:auto}
  body.mn-open{overflow:hidden}
  /* on its side the screen may be shorter than the menu */
  .mn{max-height:100dvh;overflow-y:auto;overscroll-behavior:contain}
}

/* the footer's ways on: the site's pages and the platform, in a row under the address */
.foot-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 30px;margin-top:30px;
  font-family:var(--sans);font-size:13.5px}
.foot-nav a{color:rgba(247,245,240,.66);text-decoration:none;transition:color .2s ease}
.foot-nav a:hover,.foot-nav a[aria-current]{color:#F7F5F0}