/* web.vi page shell: the header, the call to action, the footer. */
.nv{position:fixed;z-index:60;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:calc(env(safe-area-inset-top) + 12px) var(--g) 12px;pointer-events:none;transition:transform .55s var(--ease)}
.nv>*{pointer-events:auto}
/* once scrolled, the header sits on a band of the plate's own ground: solid behind the type, fading below it */
.nv{--nv-bg:5,7,8}
.nv::before{content:"";position:absolute;inset:0 0 -32px;z-index:-1;background:linear-gradient(rgba(var(--nv-bg),.94) calc(100% - 44px),rgba(var(--nv-bg),0));opacity:0;transition:opacity .4s;pointer-events:none}
.nv.is-solid::before{opacity:1}
.nv.is-away{transform:translateY(-120%)}
.nv[data-tone=light] .wm{color:var(--ink)}
.nv[data-tone=light] .wm small{color:var(--ink-2);border-color:rgba(15,26,27,.3)}
.nv[data-tone=light] .nv-cta{background:var(--ink);color:var(--paper)}
.nv[data-tone=light]{--nv-bg:238,233,222}
.nv[data-tone=sea]{--nv-bg:6,47,45}
.nv .wm{transition:color .35s}
.nv .nv-cta{transition:background-color .35s,color .35s,opacity .35s,visibility .35s}
.nv.at-form .nv-cta{opacity:0;visibility:hidden}

/* the wordmark: web in roman, vi in italic, joined by a flamboyant-red dot. The byline shows on wide screens */
.wm{display:inline-flex;align-items:baseline;white-space:nowrap;text-decoration:none;font:400 32px/1 var(--didone);font-stretch:75%;letter-spacing:-.012em;color:var(--marble)}
.wm i{flex:none;width:.16em;height:.16em;margin:0 .04em 0 .05em;border-radius:50%;background:var(--flame)}
.wm em{font-style:italic;letter-spacing:0}
.wm small{display:none}

/* the call to action: a pill, always in reach */
.nv-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:99px;white-space:nowrap;background:var(--marble);color:var(--ink);
  font:600 16px/1 var(--garamond);text-decoration:none;cursor:pointer}
.nv-cta:hover,.nv-cta:focus-visible{background:var(--lagoon);color:var(--ink)}

.ft{position:relative;padding:72px var(--g) calc(env(safe-area-inset-bottom) + 40px);background:var(--night);color:var(--marble-2);font-size:17px;line-height:1.5}
.ft .wm{font-size:44px}
.ft p{margin-top:16px;max-width:34ch}
.ft a{color:var(--marble);text-underline-offset:3px;text-decoration-color:rgba(236,231,220,.35)}
.ft-reach{display:flex;flex-wrap:wrap;gap:6px 20px;font:500 13px/1.6 var(--mono)}
.ft-reach a{text-decoration:none;border-bottom:1px solid rgba(70,232,212,.5)}
.ft-small{font:500 11.5px/1.5 var(--mono);color:var(--ash)}
@media (min-width:900px){
  .nv{padding-top:20px;padding-bottom:20px}
  .wm{font-size:36px}
  .wm small{display:block;align-self:center;margin-left:14px;padding-left:14px;border-left:1px solid rgba(236,231,220,.35);font:italic 400 15px/1.15 var(--garamond);letter-spacing:0;color:var(--marble-2)}
  .nv-cta{min-height:46px;padding:0 22px;font-size:17px}
  .ft{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px 64px;padding-top:110px}
  .ft .wm{font-size:64px;grid-column:1/-1}
  .ft p{margin:0}
}

/* wide screens: one quiet offer when the pointer heads for the tabs */
.exit{max-width:min(520px,calc(100vw - 32px));padding:0;border:0;background:var(--paper);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.exit::backdrop{background:rgba(5,7,8,.62)}
.exit-in{padding:36px 36px 30px}
.exit h2{font:300 44px/.95 var(--didone);font-stretch:64%}
.exit p{margin-top:14px;font-size:19px;line-height:1.45;color:var(--ink-2)}
.exit .exit-go{display:inline-block;margin-top:22px;padding:14px 20px;background:var(--ink);color:var(--paper);font:600 18px/1 var(--garamond);text-decoration:none;border:0;cursor:pointer}
.exit .exit-alt{display:inline-block;margin:22px 0 0 18px;color:var(--ink);font:500 14px/1 var(--mono)}
.exit .exit-x{position:absolute;top:10px;right:12px;width:36px;height:36px;border:0;background:none;color:var(--ink-2);font:400 26px/1 var(--garamond);cursor:pointer}