/* ============================================================
   stage.css  —  "final" version ("fuller", with every work full screen)
   ------------------------------------------------------------
   The site was designed for a fixed 800x555 popup window. That
   canvas is kept exactly as it was (the "stage") and scaled up as
   one unit, centred in whatever browser window the visitor has.

   Width and height both come from the same scale factor, so the
   800:555 proportions can never be distorted by the window.

   --stage-scale is set by js/stage.js:
       the smallest of  1.5,  window width / 800,  window height / 555
   Without JavaScript it stays at 1.5 and the page scrolls if the
   window is smaller than 1200x833.

   What makes this the "full" version (the "card" version keeps
   everything on the stage):
     - the main nav is pinned to the window's top-right corner on
       every page
     - on the home page the photograph fills the whole window
     - gallery and process use the whole window: thumbnails run
       edge to edge along the bottom, the artwork stays centred
     - every work in the gallery and every process photograph is
       shown in the window less the thumbnails (see "Full-screen
       works"): gallery.html and process.html start with is-full

   Only the top-level pages use this file. The gallery/process body
   pages and thumbnail strips sit inside the stage in iframes, so
   they are enlarged with it and keep their original pixel values.
   ============================================================ */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
}
body {
  display: flex;
}

/* ---- outer box: the footprint of the scaled stage ---------------
   margin:auto centres it both ways, and keeps every part reachable
   by scrolling when the window is smaller than the stage.          */
.stage-frame {
  flex: none;
  margin: auto;
  width: calc(800px * var(--stage-scale, 1.5));
  height: calc(555px * var(--stage-scale, 1.5));
  overflow: hidden;
}

/* ---- the original 800x555 canvas -------------------------------- */
.stage {
  position: relative;
  box-sizing: border-box;
  width: 800px;
  height: 555px;
  overflow: hidden;            /* the popup had scrollbars=no */
  transform: scale(var(--stage-scale, 1.5));
  transform-origin: 0 0;
}

/* pages whose content sat directly in <BODY>: the 8px padding
   reproduces the default body margin the layout was built around   */
.stage--page {
  padding: 8px;
}

/* ============================================================
   Window nav
   Pinned to the window's top-right corner, 8px in from the top and
   right edges (times the scale), on every page. It sits outside the
   stage, so it does not move with the canvas. Each page keeps an
   empty 23px row at the top of its canvas, where the nav used to
   be, so nothing below it has shifted.

   The nav is laid out at its full width whatever the window size,
   and the scale is what keeps it on screen. (The pages have no
   doctype, and in that mode a table ignores white-space set on its
   parent, so nowrap is set on the cell itself.)
   ============================================================ */
.site-nav {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: max-content;
  padding: 8px;
  transform: scale(var(--stage-scale, 1.5));
  transform-origin: 100% 0;
}
.site-nav td {
  white-space: nowrap;
}

/* ---- a ghost of a home icon, top left ------------------------------
   On every page but the home page: the way back to index.html. It is
   the nav's counterpart, so it reads as part of the nav and follows
   its ink on every ground: the same table as the nav, so the same
   row; and, being a .nav-btn inside a .site-nav, every colour rule
   the nav has. (The nav's row is 23px, four more than a button,
   because its spacer images sit on the baseline of the cell's 16px
   Times, whose descent the spaces between the items bring in; a line
   of images and inline-blocks alone would not get it, the pages
   having no doctype. So the cell here holds a spacer of no width and
   a zero-width space, which give the same row without moving the
   icon.)
   It is drawn at a sixth of the ink's strength, so it is only found
   by looking, and at full strength under the pointer or on focus.

   Across, it sits on the line of the previous caret in the gallery
   and process pages: 30px in from the window's edge in the caret's
   scale (--content-scale). The icon's own box is scaled with the nav
   (--stage-scale) and centred 30px into it (8px padding + half of
   44px); the left offset makes up the difference between the two
   scales, which is nothing in a window 1200px or wider.             */
.site-nav--home {
  right: auto;
  left: calc(30px * (var(--content-scale, 1.5) - var(--stage-scale, 1.5)));
  transform-origin: 0 0;
}
.nav-btn--home {
  width: 44px;
  opacity: .15;
}
.nav-btn--home:hover,
.nav-btn--home:focus-visible { opacity: 1; }
.nav-btn--home:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 1px;
}
/* over a dark photograph the nav's ink is light, and light on dark at
   a sixth reads fainter than dark on white does; a third keeps the
   ghost findable there (gallery.html sets the ground from the work)  */
.is-full[data-ground-top="dark"] .nav-btn--home { opacity: .3; }
.is-full[data-ground-top="dark"] .nav-btn--home:hover,
.is-full[data-ground-top="dark"] .nav-btn--home:focus-visible { opacity: 1; }
.nav-btn--home svg {
  display: block;
  width: 14px;
  height: 13px;
  margin: 1.5px auto 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   Gallery / process   (was <frameset rows="*,81"> / "*,82")
   One page: the work on show sits in .browse-body, the thumbnail
   strip in .browse-strip, no frames (js/browse.js). The strip is as
   tall as its thumbnails (65 / 66), plus a scrollbar only where the
   system draws one that takes room.

   No card here: the stage takes the window's shape instead of
   800x555. From the top of the window down it holds four rows:

       gap below the nav        grows with the window
       artwork                  centred
       gap above the thumbnails grows with the window, more slowly
       thumbnails               edge to edge, on the bottom edge

   Any height beyond what the artwork and thumbnails need is shared
   between the two gaps in the ratio

       --nav-gap : --thumb-gap

   so 3fr : 1fr means that of every 4px of spare height, 3 go
   between the nav and the artwork and 1 between the artwork and
   the thumbnails. TO ADJUST THE BALANCE, CHANGE THESE TWO VALUES.
   ============================================================ */
.browse {
  --nav-gap: 3fr;
  --thumb-gap: 1fr;
}

/* ---- per section ------------------------------------------------
   --frame-width   width of the artwork frame. It is what the window
                   has to fit, so it decides when the page starts to
                   shrink: 150% holds until the window is narrower
                   than 1.5 x this. It is the widest row of content
                   plus the frame's two 8px margins and 10px to spare
                   (an exact fit risks the row wrapping when the
                   visitor zooms the browser).
                     gallery  117 + 480 + 117 = 714   -> 740
                     process   40 + 672 +  40 = 752   -> 778
   --caret-offset  how far each caret sits from the centre line:
                   just outside the widest photograph in the section.
                   Fixed, so the carets stay under the pointer while
                   stepping through works of different widths.
   --photo-middle  height of the carets. js/browse.js sets it from
                   the photograph on show; this is the value until
                   it has.                                           */
.browse--gallery {
  --frame-width: 740px;
  --caret-offset: 264px;
  --photo-middle: 222px;
}
.browse--process {
  --frame-width: 778px;
  --caret-offset: 356px;
  --photo-middle: 205px;
}

/* ---- the work on show: layers, so one can fade in over another --
   js/browse.js builds the next work in a layer of its own, loads its
   photograph, then adds is-shown: the layer fades in over the one
   before, which is taken away when the fade is done. Each layer is
   white under its work, so it covers the one below as it comes in:
   a work shown whole has white around its photograph, and without
   this the old photograph would show through it until the old layer
   went. The carets sit above the layers.                            */
.work-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  opacity: 0;
  transition: opacity 350ms ease;
}
.work-layer.is-shown {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .work-layer {
    transition: none;
  }
}

/* the min- sizes only matter without JavaScript, where the scale
   stays at 1.5: a small window then scrolls instead of clipping    */
.browse .stage-frame {
  width: 100%;
  height: 100%;
  min-width: calc(var(--frame-width) * var(--content-scale, 1.5));
  min-height: calc(555px * var(--content-scale, 1.5));
}
.browse .stage {
  display: grid;
  grid-template-rows: var(--nav-gap) auto var(--thumb-gap) auto;
  grid-template-columns: 100%;
  justify-items: center;
  width: calc(100% / var(--content-scale, 1.5));
  height: calc(100% / var(--content-scale, 1.5));
  transform: scale(var(--content-scale, 1.5));
}
.browse-body {
  position: relative;
  grid-row: 2;
  width: var(--frame-width);
  overflow: hidden;
}
/* the strip: its table at full width scrolls sideways within it, and
   is centred when it all fits (the table's align=center)            */
.browse .browse-strip {
  grid-row: 4;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.browse .browse-strip table {
  margin: 0 auto;
}

/* ---- previous / next carets --------------------------------------
   One each side of the artwork, level with the middle of the
   photograph. js/browse.js shows each caret only when there is a
   work to go to. The left and right arrow keys do the same.
   Same greys as the nav: idle #666 -> hover #333.
   The 40x80 box is the area that takes the click; the caret drawn
   in it is 11x22.                                                   */
.caret {
  position: absolute;
  z-index: 2;
  top: var(--photo-middle);
  width: 40px;
  height: 80px;
  margin: -40px 0 0 -20px;
  color: #666;
  cursor: pointer;
}
.caret[hidden] { display: none; }
.caret:hover { color: #333; }
.caret:focus-visible {
  outline: 1px solid #666;
  outline-offset: -8px;
}
.caret--prev { left: calc(50% - var(--caret-offset)); }
.caret--next { left: calc(50% + var(--caret-offset)); }
.caret svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 22px;
  margin: -11px 0 0 -5.5px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
}

/* ============================================================
   Full-screen works
   In the "final" version this is every work and every process
   photograph: the frame is the window less the thumbnail strip
   (their own layout is work.css). is-full is on <html>, and
   js/work.js writes the ground the photograph gives the nav and the
   carets (data-ground-*), so they can be set light on a dark ground.
   Where the page is white under them (a process photograph, a work
   shown whole) the ground is left empty and they keep their ordinary
   greys.
   ============================================================ */
.browse.is-full .stage {
  grid-template-rows: 0 minmax(0, 1fr) 0 auto;
}
.browse.is-full .browse-body {
  width: 100%;
  height: 100%;
}

/* carets at the window's edges, level with the middle of the frame */
.browse.is-full .caret {
  top: 50%;
}
.browse.is-full .caret--prev { left: 30px; }
.browse.is-full .caret--next { left: calc(100% - 30px); }

/* light on a dark ground, as on the home page */
.is-full[data-ground-top="dark"] .site-nav .nav-btn { color: #bbb; }
.is-full[data-ground-top="dark"] .site-nav .nav-btn:hover,
.is-full[data-ground-top="dark"] .site-nav .nav-btn--current { color: #fff; }
.is-full[data-ground-top="light"] .site-nav .nav-btn { color: #222; }
.is-full[data-ground-top="light"] .site-nav .nav-btn:hover,
.is-full[data-ground-top="light"] .site-nav .nav-btn--current { color: #000; }
.is-full[data-ground-sides="dark"] .caret { color: #ddd; }
.is-full[data-ground-sides="dark"] .caret:hover { color: #fff; }
.is-full[data-ground-sides="light"] .caret { color: #222; }
.is-full[data-ground-sides="light"] .caret:hover { color: #000; }

/* a soft fade behind the nav, the same as the home page's, dark or
   light to suit the ground: the backdrops shade across, and the nav
   is wide                                                           */
.nav-fade {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: calc(110px * var(--stage-scale, 1.5));
  pointer-events: none;
}
.is-full[data-ground-top="dark"] .nav-fade {
  display: block;
  background: linear-gradient(
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.4) 30%,
    rgba(0, 0, 0, 0.15) 70%,
    rgba(0, 0, 0, 0) 100%
  );
}
.is-full[data-ground-top="light"] .nav-fade {
  display: block;
  background: linear-gradient(
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.4) 30%,
    rgba(255, 255, 255, 0.15) 70%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* ============================================================
   Home   (photograph fills the window)
   The photo covers the whole window, so its crop changes with the
   window's shape. It is anchored to the bottom edge: a wide window
   trims the dark backdrop at the top and keeps the bowl standing
   on its surface.

   The stage takes the window's shape here instead of 800x555,
   which pins the tagline to the window's bottom-right corner,
   clear of the bowl at every window shape.

   A wide, short window trims away the dark top of the photo and
   leaves the light nav on mid grey. The first background layer is
   a soft dark fade behind the nav that keeps it readable; on
   ordinary windows the photo is already dark there and the fade
   does not show.
   ============================================================ */
body.home,
.from-home body {
  --photo: url(images/bg-home-full-2400.jpg);
  background:
    linear-gradient(
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.4) 30%,
        rgba(0, 0, 0, 0.15) 70%,
        rgba(0, 0, 0, 0) 100%
      )
      top / 100% calc(110px * var(--stage-scale, 1.5)) no-repeat,
    var(--photo) center bottom / cover no-repeat,
    #1a1a1a;
}
/* retina screens and very wide windows get the 3600px file */
@media (min-resolution: 1.5dppx), (min-width: 2200px) {
  body.home,
  .from-home body { --photo: url(images/bg-home-full-3600.jpg); }
}

.home .stage-frame {
  width: 100%;
  height: 100%;
}
.home .stage {
  width: calc(100% / var(--stage-scale, 1.5));
  height: calc(100% / var(--stage-scale, 1.5));
}

/* The photograph is also drawn as the gallery draws it: the home
   work's own markup (bands and all, written into index.html by
   tools/final/assemble.mjs) placed by js/work.js over the whole
   stage, held centred and on the bottom edge (data-anchor) exactly as
   the background above is. The two are the same picture; this one is
   the same picture by the same arithmetic as the gallery's first work,
   so the way into the gallery and back does not move the bowl by so
   much as a rounding. Without script the background shows instead.
   The dark fade behind the nav is drawn over it, as in the background. */
.home .home-work {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.home .home-work::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 110px;
  background: linear-gradient(rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.15) 70%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

/* same distance from the right and bottom edges as on the 800x555
   canvas, where the tagline box ends at 750,496                    */
.home .tagline {
  left: auto;
  top: auto;
  right: 50px;
  bottom: 59px;
  z-index: 1;
}

/* the top of the home photo is near-black, so the nav is set light
   here: idle #bbb -> hover #fff (elsewhere #666 -> #333)           */
.home .nav-btn { color: #bbb; }
.home .nav-btn:hover { color: #fff; }

/* ============================================================
   From the home page, and back   (plan-home-to-gallery.md)
   The home page's "gallery" link says ?from=home. gallery.html then
   starts with from-home and nav-home-ink on <html> and paints as the
   home page: the home photograph as the page's background (shared
   with body.home above) with the work hidden until it is placed
   (is-ready), the strip at no height, the tagline in the home page's
   corner, the carets, caption, credit and home icon out of sight, and
   "gallery" in the home page's link ink. js/browse.js then runs the
   sequence: tagline-out; the strip rising (strip-moving) with the
   work refit every frame, nav-home-ink off so the ink turns; then
   captions-in; then caret-pending off and caret-in, the spring; and
   takes everything off. On the way back: leaving, caret-out and
   captions-out, nav-home-ink and the strip dropping, tagline-in,
   then index.html. Durations here match the ones in browse.js.
   ============================================================ */
.gallery-tagline {
  display: none;
  position: absolute;
  right: calc(50px * var(--stage-scale, 1.5));
  bottom: calc(59px * var(--stage-scale, 1.5));
  z-index: 1;
  width: 250px;
  height: 19px;
  line-height: 19px;
  margin: 0;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 1.15px;
  color: #333;
  text-align: center;
  white-space: nowrap;
  transform: scale(var(--stage-scale, 1.5));
  transform-origin: 100% 100%;
  transition: opacity 250ms ease;
}
.from-home .gallery-tagline,
.leaving .gallery-tagline {
  display: block;
}
.leaving .gallery-tagline,
.tagline-out .gallery-tagline {
  opacity: 0;
}
.tagline-in .gallery-tagline {
  opacity: 1;
}

/* the start state: as the home page */
.from-home .browse-strip {
  height: 0;
}
.from-home .browse-strip,
.strip-moving .browse-strip {
  overflow: hidden;
}
.from-home .work-layer {
  visibility: hidden;
}
.from-home.is-ready .work-layer {
  visibility: visible;
}
.from-home .nav-fade {
  display: none;               /* the home page's own fade is in the body's background */
}
.from-home .site-nav .nav-btn {
  color: #bbb;                 /* the home page's ink, before the work has said its ground */
}
.from-home .caret,
.caret-pending .caret {
  opacity: 0;
  pointer-events: none;
}

/* the caption, credit and home icon: out of sight, then faded in; faded out on the way back */
.arriving .work-caption,
.arriving .work-credit,
.arriving .site-nav--home,
.leaving .work-caption,
.leaving .work-credit,
.leaving .site-nav--home {
  transition: opacity 300ms ease;
}
.from-home .work-caption,
.from-home .work-credit,
.from-home .site-nav--home,
.captions-out .work-caption,
.captions-out .work-credit,
.captions-out .site-nav--home {
  opacity: 0;
}
.from-home.captions-in .work-caption,
.from-home.captions-in .work-credit,
.from-home.captions-in .site-nav--home {
  opacity: 1;
}

/* "gallery" in the nav: the home page's link ink, turning to the current ink as the strip rises */
.arriving .site-nav .nav-btn,
.leaving .site-nav .nav-btn {
  transition: color 500ms ease;
}
.nav-home-ink .site-nav .nav-btn--current,
.is-full.nav-home-ink[data-ground-top="dark"] .site-nav .nav-btn--current {
  color: #bbb;
}

/* the next caret: in from beyond the right edge with a spring; out to the right, plainly */
.caret-in .caret--next {
  animation: caret-in 600ms both;
}
@keyframes caret-in {
  0%   { transform: translateX(70px); opacity: 0; animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  20%  { opacity: 1; }
  65%  { transform: translateX(-14px); animation-timing-function: ease-in-out; }
  85%  { transform: translateX(5px); animation-timing-function: ease-in-out; }
  100% { transform: translateX(0); opacity: 1; }
}
.leaving .caret--next {
  transition: transform 300ms ease-in, opacity 300ms ease-in;
}
.caret-out .caret--next {
  transform: translateX(70px);
  opacity: 0;
}
.leaving .caret,
.leaving .browse-strip {
  pointer-events: none;
}

/* ============================================================
   Contact   (photograph fills the window)
   The old background was an 825x558 detail cut from a larger
   photograph of the bowl. This is that photograph, placed so the
   same detail falls on the 800x555 stage at the same size: the
   old crop was matched inside it, 0.4255 stage pixels to each
   photograph pixel, starting 408 across and 1933 down, not turned.
   Around the stage the rest of the photograph shows.

   The photograph is pinned to the stage, not to the window, so the
   detail stays where it was designed to sit behind the address.

   Its tones are matched to the old crop, which had been lightened;
   as supplied the photograph is darker, and the address would be
   hard to read on it.

   There is little photograph to the left of the detail, so in a
   window wider than about 1720px it runs out on that side. Each
   edge of the photograph is plain studio backdrop, and four bands
   carry those edges outward with gradients read from them.
   ============================================================ */
.backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* stands exactly where the stage stands, at the same scale */
.backdrop-canvas {
  --photo-left: -173.69px;
  --photo-top: -439.46px;
  --photo-width: 2043.25px;
  --photo-height: 1329.26px;
  --reach: 6000px;

  position: absolute;
  top: 50%;
  left: 50%;
  width: 800px;
  height: 555px;
  margin: calc(-277.5px * var(--stage-scale, 1.5)) 0 0 calc(-400px * var(--stage-scale, 1.5));
  transform: scale(var(--stage-scale, 1.5));
  transform-origin: 0 0;
}
.backdrop-photo,
.backdrop-band {
  position: absolute;
}
.backdrop-photo {
  left: var(--photo-left);
  top: var(--photo-top);
  width: var(--photo-width);
  height: var(--photo-height);
  background: url(images/bg-contact-full-3065.jpg) 0 0 / 100% 100% no-repeat;
}
/* retina screens get the full-size file */
@media (min-resolution: 1.5dppx) {
  .backdrop-photo { background-image: url(images/bg-contact-full-4802.jpg); }
}

/* the bands sit under the photograph and tuck 1px beneath its edge */
.backdrop-band--left,
.backdrop-band--right {
  top: var(--photo-top);
  width: calc(var(--reach) + 1px);
  height: var(--photo-height);
}
.backdrop-band--left {
  left: calc(var(--photo-left) - var(--reach));
  background: linear-gradient(
      to bottom,
      #a4a4a2 0.00%,
      #a9a8a8 6.25%,
      #aeaeaf 12.50%,
      #b2b2b4 18.75%,
      #b7b7b8 25.00%,
      #bbbabb 31.25%,
      #bfbec0 37.50%,
      #c1c2c4 43.75%,
      #c9cacc 50.00%,
      #d5d5d7 56.25%,
      #dbdadc 62.50%,
      #d9dadd 68.75%,
      #dddee0 75.00%,
      #e4e5e6 81.25%,
      #e9eaec 87.50%,
      #eeeff0 93.75%,
      #f0f0f1 100.00%
    );
}
.backdrop-band--right {
  left: calc(var(--photo-left) + var(--photo-width) - 1px);
  background: linear-gradient(
      to bottom,
      #a9a9a7 0.00%,
      #afafaf 6.25%,
      #b8b7b9 12.50%,
      #bdbbbe 18.75%,
      #c0c1c2 25.00%,
      #c2c3c6 31.25%,
      #c4c5c7 37.50%,
      #c6c8c9 43.75%,
      #cecfd0 50.00%,
      #dad9d9 56.25%,
      #dfdedd 62.50%,
      #e1e0df 68.75%,
      #e5e6e6 75.00%,
      #ececee 81.25%,
      #f1f2f2 87.50%,
      #f4f5f3 93.75%,
      #f6f6f4 100.00%
    );
}
.backdrop-band--top,
.backdrop-band--bottom {
  left: calc(var(--photo-left) - var(--reach));
  width: calc(var(--photo-width) + 2 * var(--reach));
  height: calc(var(--reach) + 1px);
}
.backdrop-band--top {
  top: calc(var(--photo-top) - var(--reach));
  background: linear-gradient(
      to right,
      #a4a3a1 6000.0px,
      #a7a7a6 6127.7px,
      #adacae 6255.4px,
      #b3b3b7 6383.1px,
      #bfbfc3 6510.8px,
      #c7c9ce 6638.5px,
      #d4d5dd 6766.2px,
      #dedee5 6893.9px,
      #e1e0e7 7021.6px,
      #dddde4 7149.3px,
      #d4d5dc 7277.0px,
      #c9cbd0 7404.7px,
      #c3c4c8 7532.4px,
      #bdbcc1 7660.1px,
      #b5b4b9 7787.8px,
      #afafb1 7915.5px,
      #aaa9aa 8043.3px
    );
}
.backdrop-band--bottom {
  top: calc(var(--photo-top) + var(--photo-height) - 1px);
  background: linear-gradient(
      to right,
      #f0f0f1 6000.0px,
      #f2f2f2 6127.7px,
      #f2f3f2 6255.4px,
      #f5f5f3 6383.1px,
      #f7f7f5 6510.8px,
      #f8f8f6 6638.5px,
      #f7f7f5 6766.2px,
      #f7f7f5 6893.9px,
      #f8f8f5 7021.6px,
      #f9f9f6 7149.3px,
      #f9faf6 7277.0px,
      #fafaf6 7404.7px,
      #fafaf6 7532.4px,
      #f9f9f6 7660.1px,
      #f8f8f5 7787.8px,
      #f6f6f4 7915.5px,
      #f6f6f4 8043.3px
    );
}

/* The nav crosses the grey glaze runs below the bowl's rim at some
   window sizes. Same treatment as the home page, the other way
   round: a soft light fade behind the nav, and darker ink,
   idle #333 -> hover #000 (elsewhere #666 -> #333).                */
.backdrop::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(110px * var(--stage-scale, 1.5));
  background: linear-gradient(
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.4) 30%,
    rgba(255, 255, 255, 0.15) 70%,
    rgba(255, 255, 255, 0) 100%
  );
}
.contact .nav-btn { color: #333; }
.contact .nav-btn:hover,
.contact .nav-btn--current { color: #000; }

/* the address sat on a lighter ground in the old crop; #333 keeps
   it as readable as it was (elsewhere .contact-line is #444)      */
.contact .contact-line { color: #333; }
.contact a.contact-line:hover { color: #000; }