/* backdrop.css -- the field every page of the desk sits on.

   Linked last in every <head> so it wins over each page's own body wash. It
   paints three layers behind the content: the still field, the whale crossing
   it, and a veil that keeps text legible over both. The still field is vector
   and weighs about 5 KB, so a phone pays nothing for it and it stays sharp on a
   retina screen at any size.

   The whale is a real element, added by backdrop.js, because an SVG referenced
   as a background-image will not animate reliably. Everything it does is a
   transform, so the compositor carries it and the main thread is left alone.

   To swap a raster still in for the field, point --bd-art (and the portrait one
   below) at the file; nothing else needs to change. */

:root{
  --bd-art:url("/backdrop.svg");}

html{background-color:var(--bd-base,#040706)}

/* each page's own wash steps aside; the backdrop is the floor now */
body{background-color:transparent;background-image:none}

html::before{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background-color:var(--bd-base,#040706);
  background-image:var(--bd-art);
  background-repeat:no-repeat;
  background-position:50% 100%;
  background-size:cover;
}

/* the veil: dark where the nav sits, dark at the foot, quiet in between */
html::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(92% 58% at 6% -8%,rgb(var(--em-rgb, 63 191 133) / .10) 0%,transparent 60%),
    radial-gradient(80% 54% at 96% -4%,rgb(var(--gold-rgb, 197 179 88) / .085) 0%,transparent 62%),
    linear-gradient(180deg,rgb(var(--bg-rgb, 4 7 6) / .62) 0%,rgb(var(--bg-rgb, 4 7 6) / .38) 22%,rgb(var(--bg-rgb, 4 7 6) / .30) 58%,rgb(var(--bg-rgb, 4 7 6) / .56) 100%);
}

/* taller than wide: a phone, a tablet held upright, a narrow window */
@media (max-aspect-ratio:1/1){
  :root{--bd-art:url("/backdrop_tall.svg")}
}

/* the header band on the interior pages lets the field through */
.top{background:radial-gradient(130% 120% at 20% -20%,rgb(var(--em-rgb, 63 191 133) / .13) 0%,rgb(var(--bg-rgb, 4 7 6) / .40) 55%) transparent}

/* ---- the swimmer ---------------------------------------------------------
   Three movements, each on its own element so each is a plain transform: the
   crossing, the rise and fall of a body that is breathing, and the tail.

   The two animals move nothing alike. A humpback's flukes beat up and down
   once in seven seconds and the whole body rolls with it. A bluefin swims
   thunniform -- the body stays rigid, only the stock and tail work -- so it
   holds still and flicks about once a second, and covers ground twice as
   fast. Same rig, different numbers. */

.bd-swim{
  position:fixed;z-index:-2;left:0;top:56%;
  width:clamp(300px,46vw,780px);
  pointer-events:none;contain:layout style;
  animation:bdSwim 186s linear infinite;
}
.bd-swim__bob{animation:bdBob 26s ease-in-out infinite alternate}
.bd-swim__art{display:block;width:100%;height:auto;overflow:visible}
.bd-tail{transform-origin:846px 196px;animation:bdBeat 7s ease-in-out infinite alternate}
.bd-pec{transform-origin:296px 224px;animation:bdScull 11s ease-in-out infinite alternate}

@keyframes bdSwim{from{transform:translate3d(122vw,0,0)}to{transform:translate3d(-92vw,0,0)}}
@keyframes bdBob{from{transform:translate3d(0,-16px,0) rotate(1.6deg)}
                   to{transform:translate3d(0,15px,0) rotate(-1.6deg)}}
@keyframes bdBeat{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
@keyframes bdScull{from{transform:rotate(-4deg)}to{transform:rotate(5deg)}}

/* the bluefin: rigid, quick, and the tail turns about the keels */
.bd-swim--tuna{width:clamp(280px,40vw,700px);animation-duration:96s}
.bd-swim--tuna .bd-swim__bob{animation-name:bdHold;animation-duration:15s}
.bd-swim--tuna .bd-tail{transform-origin:800px 252px;animation-name:bdFlick;animation-duration:1.1s}
.bd-swim--tuna .bd-pec{transform-origin:222px 240px;animation-duration:17s}

@keyframes bdHold{from{transform:translate3d(0,-6px,0) rotate(.5deg)}
                    to{transform:translate3d(0,6px,0) rotate(-.5deg)}}
@keyframes bdFlick{from{transform:rotate(-11deg)}to{transform:rotate(11deg)}}

/* nobody is looking at this tab */
.bd-swim--held,.bd-swim--held *{animation-play-state:paused}

@media (max-width:820px){.bd-swim{width:78vw;top:60%}}

/* metered connections get the gradients and none of the still field */
@media (prefers-reduced-data:reduce){
  html::before{background-image:none}
}

@media (prefers-reduced-motion:reduce){
  .bd-swim{animation:none;transform:translate3d(12vw,0,0)}
  .bd-swim__bob,.bd-tail,.bd-pec{animation:none}
}

@media print{
  html::before,html::after,.bd-swim{display:none}
  html{background:#fff}
}

/* Skip to content: the first stop for keyboard and screen-reader users, out of
   sight until it has focus. It lands on the page's title (id="content"). */
.skip-link{position:absolute;left:12px;top:-64px;z-index:1000;padding:10px 16px;border-radius:10px;
  background:var(--em-300);color:var(--on-accent);font:600 14px/1.2 system-ui,-apple-system,Segoe UI,sans-serif;text-decoration:none;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.8);transition:top .15s ease}
.skip-link:focus{top:12px;outline:2px solid #fff;outline-offset:2px}
#content:focus{outline:none}

/* the masthead art band ================================ */
/* Markup, first child of .top (outside every piece lock, which starts at .head):
   <picture class="mast" aria-hidden="true">
     <img src="/art/board-1200.webp" srcset="/art/board-800.webp 800w, /art/board-1200.webp 1200w, /art/board-1920.webp 1920w"
          sizes="100vw" width="1920" height="823" alt="" fetchpriority="high" decoding="async">
   </picture>                                                                 */
.top{position:relative;isolation:isolate}
.mast{display:block;position:relative;z-index:0;overflow:hidden;pointer-events:none;
  --mast-h:clamp(168px,27vw,400px);--mast-overlap:clamp(40px,7vw,120px);
  height:var(--mast-h);margin-bottom:calc(-1 * var(--mast-overlap))}
.mast.slim{--mast-h:clamp(120px,14vw,210px);--mast-overlap:clamp(24px,3.4vw,56px)}
.mast img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--mast-x,64%) 50%;display:block}
/* the fade: the art dissolves into whatever field is under the header (a mask, so no
   seam where the band ends); the veil only darkens the left, where the headline rises */
.mast{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 100%)}
.mast::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgb(var(--bg-rgb) / .62) 0%,rgb(var(--bg-rgb) / .25) 34%,rgb(var(--bg-rgb) / 0) 52%),
  linear-gradient(180deg,rgb(var(--bg-rgb) / .18) 0%,rgb(var(--bg-rgb) / 0) 24%)}
/* one gold hairline where the band meets the bar */
.mast::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:1;background:var(--rule-gold);opacity:.7}
.mast + .wrap{position:relative;z-index:1}
@media (max-width:760px){.mast{--mast-x:68%}}
@media (prefers-reduced-motion:no-preference){
  .mast img{animation:mast-drift 48s ease-in-out infinite alternate;transform-origin:70% 50%;will-change:transform}
}
@keyframes mast-drift{from{transform:scale(1)}to{transform:scale(1.045) translateX(-.6%)}}