/* The footer, Rejouice style: one flat night band on the header's edge. The ways to reach us and the links sit in a
   top row, the small print under the links, and the name runs across the whole width at the bottom in flat warm white,
   with no fade and no teal. Shared by every page that has the footer. */
:root { --ft-edge: clamp(20px, 2.4vw, 40px); --ft-w: #EFECE5; --ft-soft: rgba(239, 236, 229, .58); --ft-line: rgba(239, 236, 229, .14); --ft-ease: cubic-bezier(.22, .61, .36, 1); }

body footer[data-nav] { margin: 0; border-radius: 0; padding: 0 0 var(--ft-edge); background: #000000; color: var(--ft-soft); font-size: 15px; overflow: hidden; }
body footer[data-nav] > .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "cta cta" "reach nav" "reach base" "mark mark";
  column-gap: clamp(32px, 4vw, 80px); max-width: none; padding: clamp(72px, 7vw, 128px) var(--ft-edge) 0;
  background: linear-gradient(var(--ft-line), var(--ft-line)) top center / calc(100% - 2 * var(--ft-edge)) 1px no-repeat; }
body footer[data-nav] { --sel-bg: var(--ft-w); --sel-fg: #000000; }

/* the call to talk, on the pages that have one */
body footer[data-nav] .footer-cta { grid-area: cta; padding: 0 0 clamp(72px, 7vw, 128px); color: var(--ft-w); }
body footer[data-nav] .footer-cta small { color: var(--ft-soft); }
body footer[data-nav] .footer-cta:hover strong { color: var(--ft-w); opacity: .7; }

/* how to reach us */
body footer[data-nav] .ft-reach { grid-area: reach; display: grid; justify-items: start; align-content: start; gap: 18px; }
body footer[data-nav] .ft-reach small { font-size: 15px; color: var(--ft-soft); }
body footer[data-nav] .ft-mail { margin-top: -8px; font: 500 clamp(26px, 2.4vw, 46px)/1.05 var(--font-brand, var(--font)); letter-spacing: -.035em; color: var(--ft-w); text-decoration: none; transition: opacity .4s var(--ft-ease); }
body footer[data-nav] .ft-call { padding-bottom: 2px; border-bottom: 1px solid currentColor; color: var(--ft-w); font-weight: 500; text-decoration: none; transition: opacity .4s var(--ft-ease); }
body footer[data-nav] .ft-mail:hover, body footer[data-nav] .ft-call:hover { opacity: .6; }

/* the links in two short columns, and the small print under them */
body footer[data-nav] .footer-base { display: contents; }
body footer[data-nav] .footer-base nav { grid-area: nav; display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); justify-content: start; align-content: start; gap: 8px clamp(56px, 8vw, 168px); }
body footer[data-nav] .footer-base nav a { color: var(--ft-w); font-size: 17px; line-height: 1.4; text-decoration: none; transition: opacity .4s var(--ft-ease); }
body footer[data-nav] .footer-base nav a:hover { color: var(--ft-w); opacity: .6; }
body footer[data-nav] .footer-base > span { grid-area: base; align-self: end; margin-top: clamp(40px, 4vw, 64px); font-size: 14px; color: var(--ft-soft); }

/* the name, edge to edge */
body footer[data-nav] .wordmark { grid-area: mark; margin: clamp(80px, 9vw, 168px) 0 0 -.045em; padding: 0; font-size: calc((100vw - 2 * var(--ft-edge)) / 4.56); line-height: .76;
  color: var(--ft-w); -webkit-mask-image: none; mask-image: none; }
body footer[data-nav] .wordmark b { color: inherit; }
/* room round each letter as it rises, so the tight letter spacing never trims their edges */
body footer[data-nav] .wordmark .pl-w { padding: .14em .14em .1em; margin: -.14em -.14em -.1em; }

@media (max-width: 760px) {
  body footer[data-nav] > .wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cta" "reach" "nav" "base" "mark"; row-gap: 48px; padding-top: 64px; }
  body footer[data-nav] .footer-base > span { margin-top: 0; }
  body footer[data-nav] .wordmark { margin-top: 24px; }
}