/* The top of the homepage: the painted menu and the trusted logos on their puddles (the headline and
   its shop: scene.css). Every picture is baked by bake.js into img/ (url()s are relative to this file).
   Motion: the menu washes in through a painted wet blob (menu.js); the logo puddles bloom in when the
   row first comes into view and then breathe only while it is on screen (trusted.js). Reduced motion
   shows everything finished. */

/* ================================================================ the menu button */
.menu-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 2px;
  min-width: 48px; min-height: 48px;
  margin: -4px -6px -4px 0;
  padding: 0 10px 0 0;
  border: 0; border-radius: 14px;
  background: none;
  color: var(--ink);
  font: 600 1rem/1 var(--body);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.menu-ico { position: relative; flex: none; width: 48px; height: 48px; }
.menu-ico > i { position: absolute; inset: 0; background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% 100%; }
.menu-ico-dab { background-image: url("img/menu-dab.webp"); transition: transform .55s cubic-bezier(.3, 1.6, .45, 1); }
.menu-ico-mark { background-image: url("img/menu-lines.webp"); transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.menu-close .menu-ico-mark { background-image: url("img/menu-x.webp"); }
.menu-btn:hover .menu-ico-dab { transform: scale(1.1) rotate(-8deg); }
.menu-btn:hover .menu-ico-mark { transform: rotate(-5deg); }
.menu-btn:active .menu-ico-dab { transform: scale(.92); }
.menu-btn:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 2px; }

/* ================================================================ the menu */
/* phones: a full-screen sheet of paper. From 700px: a deckled sheet that drops from the top right. */
html.menu-open .top { z-index: 40; }
html.menu-lock, html.menu-lock body { overflow: hidden; }

.menu-veil { position: fixed; inset: 0; z-index: 1; }
.site-menu {
  position: fixed; inset: 0; z-index: 2;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper) url("../../img/paper.jpg") repeat 0 0 / 768px 768px;
}
.site-menu[hidden], .menu-veil[hidden] { display: none; }
/* while it washes in or out, the menu shows only through a wet blob growing from the button (menu.js
   animates its size and place; the resting size here covers everything, should that ever not run) */
.site-menu.is-washing {
  -webkit-mask-image: url("img/menu-blob.webp"); mask-image: url("img/menu-blob.webp");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%; mask-position: 50% 50%;
  -webkit-mask-size: 420vmax 420vmax; mask-size: 420vmax 420vmax;
}

.menu-paper {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 100%;
  padding: 14px var(--gutter) max(26px, env(safe-area-inset-bottom));
  background: url("img/menu-wash-m.webp") no-repeat 0 0 / 100% 100%;
}
.menu-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 40px; }
.menu-brand { display: inline-flex; align-items: center; gap: 9px; font: 400 1.75rem/1 var(--display); color: var(--ink); }
.menu-brand img { width: 26px; height: auto; transform: rotate(-8deg); }

.menu-nav { flex: 1; display: flex; flex-direction: column; align-items: flex-start; margin-top: clamp(16px, 8svh, 84px); }
.menu-main { list-style: none; margin: 0; padding: 0; }
.menu-main a {
  position: relative; z-index: 0;
  display: inline-block;
  padding: 7px 4px 9px 0;
  font: 400 clamp(1.9rem, min(11vw, 6.4svh), 2.75rem)/1.1 var(--display);
  color: var(--ink); text-decoration: none;
}
/* a marigold brush stroke paints itself in behind the link you point at */
.menu-main a::before {
  content: "";
  position: absolute; z-index: -1;
  left: -.14em; right: -.18em; top: .5em; bottom: .1em;
  background: url("img/hl-menu.webp") no-repeat 0 50% / 100% 100%;
  -webkit-mask: linear-gradient(90deg, #000 44%, transparent 56%) 100% 0 / 230% 100% no-repeat;
          mask: linear-gradient(90deg, #000 44%, transparent 56%) 100% 0 / 230% 100% no-repeat;
  transition: -webkit-mask-position .42s cubic-bezier(.55, .05, .3, 1), mask-position .42s cubic-bezier(.55, .05, .3, 1);
}
.menu-main a:hover::before, .menu-main a:focus-visible::before { -webkit-mask-position: 0 0; mask-position: 0 0; }
.menu-nav a:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 4px; border-radius: 8px; }

.menu-film { margin-top: 14px; padding: 12px 0; font-size: 1.08rem; color: var(--ink); }
/* phones: the small links and the Book tag sit at the foot of the sheet, in easy reach of a thumb */
.menu-more { list-style: none; display: flex; flex-wrap: wrap; gap: 0 28px; margin: auto 0 0; padding: 26px 0 0; }
.menu-book { margin: 16px 0 6px 32px; }
.menu-book > span { padding: 19px 30px 19px 48px; font-size: 1.1rem; }
.menu-more a { display: inline-block; padding: 12px 0; font: 600 1.05rem/1.2 var(--body); color: var(--ink-soft); text-decoration: none; }
.menu-more a:hover { color: var(--red); }

/* the links settle in one after another behind the wash */
.menu-main li, .menu-nav > :not(.menu-main) { transition: opacity .32s ease, translate .5s cubic-bezier(.2, .7, .3, 1); }
.site-menu:not(.is-in) .menu-main li, .site-menu:not(.is-in) .menu-nav > :not(.menu-main) { opacity: 0; translate: 0 12px; }
.site-menu.is-in .menu-main li:nth-child(1) { transition-delay: .12s; }
.site-menu.is-in .menu-main li:nth-child(2) { transition-delay: .17s; }
.site-menu.is-in .menu-main li:nth-child(3) { transition-delay: .22s; }
.site-menu.is-in .menu-main li:nth-child(4) { transition-delay: .27s; }
.site-menu.is-in .menu-film { transition-delay: .32s; }
.site-menu.is-in .menu-more { transition-delay: .37s; }
.site-menu.is-in .menu-book { transition-delay: .42s; }

@media (min-width: 700px) {
  .site-menu {
    inset: 4px max(4px, calc(var(--gutter) - 50px)) auto auto;
    width: min(450px, calc(100vw - 8px));
    max-height: calc(100svh - 8px);
    background: none;
  }
  .menu-paper {
    min-height: 0;
    padding: 18px 50px 50px 46px;
    background-image: url("img/menu-sheet.webp");
  }
  .menu-head { justify-content: flex-end; }
  .menu-brand { display: none; }
  .menu-nav { margin-top: 4px; }
  .menu-main a { font-size: 2.15rem; }
  .menu-more { margin-top: 0; padding-top: 14px; }
  .menu-book { margin: 18px 0 4px 28px; }
  .menu-book > span { padding: 18px 26px 18px 46px; font-size: 1.04rem; }
}

/* the narrowest phones: both Book tags tighten up so they never run off the screen */
@media (max-width: 359px) {
  .hero-actions { padding-left: 14px; }
  .hero-actions .tag-btn > span, .menu-book > span { padding-left: 40px; padding-right: 16px; font-size: .94rem; }
  .menu-book { margin-left: 22px; }
}

/* ================================================================ the floating Menu button (menu-float.js)
   Once the header has scrolled away, the header's marigold dab floats in the bottom right corner on a
   torn scrap of paper with its own painted shadow (img/float/menu-chip.webp), so it reads over the
   paintings; it opens the same menu. That corner is clear in most pinned scenes; where a held
   caption, a stamp card or the street's shop details and cards run into it (short phones, one or two
   desktop scenes), menu-float.js sets --lift and it moves up just clear of them. It glides up and fades
   in once the header has gone, and back out near the top and while the footer is on screen.
   To take it out: delete this block and the menu-float.js script tags. */
.menu-float {
  position: fixed; z-index: 30;
  right: max(10px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom));
  justify-content: center;
  width: 64px; height: 64px; margin: 0; padding: 0 2px 3px 0;
  border-radius: 50%;
  background: url("img/float/menu-chip.webp") 50% 50% / 100% 100% no-repeat;
  opacity: 0; visibility: hidden; translate: 0 18px;
  transition: opacity .3s ease, translate .45s cubic-bezier(.2, .7, .3, 1), visibility 0s linear .45s;
}
.menu-float.is-on {
  opacity: 1; visibility: visible; translate: 0 calc(var(--lift, 0px) * -1);
  transition: opacity .35s ease, translate .5s cubic-bezier(.2, .7, .3, 1), visibility 0s;
}
.menu-float .menu-ico { width: 46px; height: 46px; }
.menu-float:focus-visible { outline-offset: -2px; }
@media (min-width: 900px) {
  .menu-float { right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); width: 72px; height: 72px; }
  .menu-float .menu-ico { width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-float { translate: none; }
  .menu-float, .menu-float.is-on { transition: none; }
}

/* ================================================================ trusted logos on their puddles */
.trusted-label { text-align: center; text-wrap: balance; }
.trusted-logos {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 30px clamp(18px, 7vw, 40px);
}
/* nothing from the list down to the logo may isolate it: its multiply has to reach the page's paper */
.tl { position: relative; }
.tl:nth-child(2) { --i: 1; } .tl:nth-child(3) { --i: 2; } .tl:nth-child(4) { --i: 3; } .tl:nth-child(5) { --i: 4; }
.tl a { position: relative; display: block; border-radius: 12px; -webkit-tap-highlight-color: transparent; }
.tl img {
  position: relative; display: block;
  height: clamp(50px, 15vw, 60px); width: auto; max-width: none;
  mix-blend-mode: multiply;
  rotate: -2deg;
  transition: translate .5s cubic-bezier(.3, 1.5, .5, 1);
}
.tl:nth-child(even) img { rotate: 1.6deg; }
/* (the logos are assets/shop-logos/*.webp on white, which multiplies away like transparency; Cheapskates'
   gold mark is printed there in ink at 85%, as brightness(0) opacity(.85) used to do it) */
.tl--cheapskates img { height: clamp(62px, 18.5vw, 74px); margin: -6px 0; } /* its artwork has air around it */

.tw {
  position: absolute; left: -25%; right: -25%; top: -26%; bottom: -30%;
  transform-origin: 50% 55%;
  transition: scale .6s cubic-bezier(.3, 1.5, .5, 1);
}
.tw::before, .tw::after { content: ""; position: absolute; inset: 0; background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% 100%; }
/* (the puddles' paintings load once the row is near: trusted.js adds .is-near) */
.is-near .tl--nsss .tw::before { background-image: url("img/tw-nsss.webp"); }
.is-near .tl--nsss .tw::after { background-image: url("img/tw-nsss-rim.webp"); }
.is-near .tl--cheapskates .tw::before { background-image: url("img/tw-cheapskates.webp"); }
.is-near .tl--cheapskates .tw::after { background-image: url("img/tw-cheapskates-rim.webp"); }
.is-near .tl--refresh .tw::before { background-image: url("img/tw-refresh.webp"); }
.is-near .tl--refresh .tw::after { background-image: url("img/tw-refresh-rim.webp"); }
.is-near .tl--ontop .tw::before { background-image: url("img/tw-ontop.webp"); }
.is-near .tl--ontop .tw::after { background-image: url("img/tw-ontop-rim.webp"); }
.is-near .tl--coast .tw::before { background-image: url("img/tw-coast.webp"); }
.is-near .tl--coast .tw::after { background-image: url("img/tw-coast-rim.webp"); }
.tl--cheapskates .tw { left: -18%; right: -18%; top: -14%; bottom: -18%; }

/* a puddle spreads a little under the logo you point at or tab to */
.tl a:hover .tw, .tl a:focus-visible .tw { scale: 1.13; }
.tl a:hover img, .tl a:focus-visible img { translate: 0 -2px; }
.tl a:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 12px; }

/* trusted.js: hidden until the row comes into view, then each puddle blooms in after the one before,
   its wet edge darkens as it dries, and from then on it breathes slowly (only while on screen) */
.trusted-logos.is-armed .tw { opacity: 0; }
.trusted-logos.is-in .tw { animation: tw-bloom 1.5s cubic-bezier(.17, .67, .26, 1) calc(var(--i, 0) * .26s) both; }
.trusted-logos.is-in .tw::before {
  animation: tw-breathe 8s ease-in-out calc(var(--i, 0) * .26s + 1.5s) infinite alternate;
  animation-duration: calc(7.2s + var(--i, 0) * .7s);
}
.trusted-logos.is-in .tw::after {
  animation: tw-dry 1.6s ease-out calc(var(--i, 0) * .26s + .55s) both, tw-wet 5.5s ease-in-out calc(var(--i, 0) * .26s + 2.15s) infinite alternate;
  animation-duration: 1.6s, calc(5s + var(--i, 0) * .6s);
}
.trusted-logos.is-in:not(.is-live) .tw,
.trusted-logos.is-in:not(.is-live) .tw::before,
.trusted-logos.is-in:not(.is-live) .tw::after { animation-play-state: paused; }
@keyframes tw-bloom {
  0% { opacity: 0; transform: scale(.3) rotate(-10deg); filter: blur(5px); }
  28% { opacity: 1; }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes tw-dry { from { opacity: 0; } to { opacity: 1; } }
@keyframes tw-wet { from { opacity: 1; transform: none; } to { opacity: .45; transform: scale(1.02); } }
@keyframes tw-breathe { from { transform: none; } to { transform: scale(1.04) rotate(1.2deg); } }

@media (min-width: 900px) {
  .trusted-label { text-align: left; }
  .trusted-logos { justify-content: flex-start; flex-wrap: nowrap; gap: 0 clamp(26px, 2.6vw, 40px); margin-top: 22px; padding-left: 4px; }
  .tl img { height: clamp(48px, 4.3vw, 62px); }
  .tl--cheapskates img { height: clamp(58px, 5.2vw, 76px); }
}

/* ================================================================ reduced motion: all finished */
@media (prefers-reduced-motion: reduce) {
  .menu-main a::before, .menu-btn .menu-ico > i, .tl img { transition: none; }
  .menu-main li, .menu-nav > :not(.menu-main) { transition: none; }
  .trusted-logos .tw, .trusted-logos .tw::before, .trusted-logos .tw::after { animation: none !important; }
  .trusted-logos .tw { opacity: 1; transition: none; }
}