/* Kit: menu mechanics from website/MENUS.md section 5, with mo- names so a site's old header styles and script are left alone.
   The site's motion.css sets the look by overriding the --mo-nav-* values and the .mo-* rules. */
:root { --mo-nav-h: 76px; --mo-nav-h-float: 56px; --mo-nav-gap: 12px; --mo-nav-max: 1080px; --mo-nav-move: 320ms cubic-bezier(.2,.7,.2,1);
  --mo-nav-bg: #fff; --mo-nav-ink: #111; --mo-nav-line: rgba(0,0,0,.14); --mo-nav-shadow: 0 10px 30px rgba(0,0,0,.14); --mo-nav-radius: 999px; --mo-nav-pad: clamp(16px, 4vw, 40px); }
html { scroll-padding-top: calc(var(--mo-nav-h) + 16px); }
.mo-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 64px; pointer-events: none; }
.mo-hdr { position: sticky; top: 0; z-index: 60; display: flow-root; height: var(--mo-nav-h); padding: 0 var(--mo-nav-gap); pointer-events: none; }
.mo-bar { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 16px; height: var(--mo-nav-h); max-width: 100%; margin: 0 auto; padding: 0 calc(var(--mo-nav-pad) - var(--mo-nav-gap));
  color: var(--mo-nav-ink); border: 1px solid transparent; border-radius: 0; background: transparent;
  transition: height var(--mo-nav-move), max-width var(--mo-nav-move), margin-top var(--mo-nav-move), border-radius var(--mo-nav-move), padding var(--mo-nav-move), background-color 200ms linear, border-color 200ms linear, box-shadow 200ms linear; }
.mo-scrolled .mo-bar { height: var(--mo-nav-h-float); max-width: var(--mo-nav-max); margin-top: var(--mo-nav-gap); padding: 0 12px 0 18px; border-color: var(--mo-nav-line); border-radius: var(--mo-nav-radius); background: var(--mo-nav-bg); box-shadow: var(--mo-nav-shadow); }
.mo-hidden .mo-hdr { transform: translateY(calc(-100% - 24px)); }
.mo-hdr { transition: transform 340ms cubic-bezier(.2,.7,.2,1); }
.mo-brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; flex: none; }
.mo-nav { margin-left: auto; }
.mo-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.mo-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; color: inherit; background: none; border: 0; font: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
.mo-has-sub { position: relative; }
.mo-has-sub > .mo-link::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 150ms; }
.mo-has-sub > .mo-link[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.mo-sub { position: absolute; top: calc(100% + 10px); left: 0; min-width: 260px; display: none; padding: 8px; background: var(--mo-nav-bg); color: var(--mo-nav-ink); border: 1px solid var(--mo-nav-line); border-radius: 14px; box-shadow: var(--mo-nav-shadow); }
.mo-link[aria-expanded="true"] + .mo-sub { display: block; }
.mo-sub a { display: grid; gap: 2px; padding: 10px 12px; min-height: 44px; color: inherit; text-decoration: none; border-radius: 8px; }
.mo-sub a small { opacity: .75; font-weight: 400; }
.mo-cta { flex: none; white-space: nowrap; }
.mo-menu-btn { display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; font: inherit; color: inherit; background: none; border: 1px solid currentColor; border-radius: var(--mo-nav-radius); cursor: pointer; flex: none; }
@media (max-width: 860px) {
  :root { --mo-nav-h: 64px; --mo-nav-h-float: 52px; --mo-nav-gap: 8px; }
  .mo-menu-btn { display: inline-flex; }
  .mo-nav { position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0; display: none; max-height: calc(100dvh - var(--mo-nav-h) - 32px); overflow-y: auto; padding: 8px; background: var(--mo-nav-bg); color: var(--mo-nav-ink); border: 1px solid var(--mo-nav-line); border-radius: 18px; box-shadow: var(--mo-nav-shadow); }
  .mo-nav-open .mo-nav { display: block; }
  .mo-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .mo-link { width: 100%; min-height: 48px; justify-content: space-between; }
  .mo-sub { position: static; display: none; min-width: 0; border: 0; box-shadow: none; padding: 0 0 8px 12px; background: none; }
  .mo-bar { gap: 8px; }
  .mo-bar .mo-cta { margin-left: auto; }
  .mo-nav-open .mo-bar, .mo-bar { }
}
@media (max-width: 380px) { .mo-menu-btn svg { display: none; } .mo-menu-btn { padding: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .mo-bar, .mo-hdr { transition: none; } }
/* Kit: pinned hero mechanics. The site's motion.css animates the hero's parts with var(--mo-pin), which runs 0 to 1. */
.mo-pin { --mo-pin: 0; --mo-pin-extra: 90vh; --mo-pin-offset: 0px; position: relative; }
/* the room to scroll through has to be real height (a sticky element cannot travel into its parent's padding) */
.mo-pin.is-pinned { height: calc(var(--mo-pin-h, 100vh) + var(--mo-pin-extra)); }
.mo-pin.is-pinned > :first-child { position: sticky; top: var(--mo-pin-top, 0px); }
/* Ember & Oat: motion in the site's own language. Things arrive like stickers being slapped on a print:
   a quick over-scale, a slight turn, and an ember "second plate" that snaps into register. */
.mo-ready .mo { opacity: 0; transform: translateY(18px) rotate(-1.2deg) scale(1.04); transition: opacity .35s ease, transform .6s cubic-bezier(.2,1.4,.4,1); transition-delay: calc(var(--mo-i, 0) * 70ms); }
.mo-ready .mo.in { opacity: 1; transform: none; }
.mo-ready .sticker.mo { transform: rotate(-14deg) scale(1.35); }
.mo-ready .sticker.mo.in { transform: none; }

/* The sticker band: four risograph stickers that link to the main places on the site. They turn and drift as the page scrolls. */
.mo-band { padding: clamp(40px, 6vw, 88px) var(--gut); background: var(--paper); border-block: var(--line) solid var(--ink); overflow: hidden; }
.mo-band__in { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 3vw, 40px); }
.mo-item { display: grid; justify-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--f-d); font-weight: 800; font-size: var(--t-h3); letter-spacing: -0.02em; text-align: center; }
.mo-item img { width: min(100%, 210px); height: auto; filter: drop-shadow(5px 6px 0 rgba(35,64,216,.22)); transition: transform .35s cubic-bezier(.2,1.6,.4,1), filter .3s; }
.mo-item small { display: block; font-family: var(--f-t); font-weight: 500; font-size: var(--t-small); letter-spacing: 0; }
.mo-item:hover img, .mo-item:focus-visible img { transform: rotate(-6deg) scale(1.08); filter: drop-shadow(8px 9px 0 rgba(255,85,51,.45)); }
.mo-item:focus-visible { outline: var(--line) solid var(--focus); outline-offset: 6px; border-radius: var(--r-s); }
.mo-item span { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; text-decoration-color: var(--ember); }
@media (max-width: 640px) { .mo-band__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; } .mo-item img { width: min(100%, 150px); } }

/* ---- Menu: a floating sticker. Clear across the top; after the first scroll it becomes a die-cut pill with a thick ink edge and a hard offset shadow. ---- */
:root { --mo-nav-bg: var(--vinyl); --mo-nav-ink: var(--ink); --mo-nav-line: var(--ink); --mo-nav-shadow: 5px 6px 0 var(--cobalt); --mo-nav-radius: 999px; --mo-nav-pad: var(--gut); --mo-nav-max: 1000px; }
.mo-hdr { background: none; }
.mo-bar { border-width: var(--line); }
html:not(.mo-scrolled) .mo-hdr { background: var(--paper); box-shadow: 0 var(--line) 0 var(--ink); }
.mo-brand { font: 800 1.4rem/1 var(--f-d); letter-spacing: -.03em; }
.mo-link { font: 700 var(--t-body)/1 var(--f-t); border-radius: 999px; transition: background-color .15s; }
.mo-link:hover { background: rgba(35,64,216,.1); }
.mo-link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--ember); }
.mo-link:focus-visible, .mo-menu-btn:focus-visible, .mo-brand:focus-visible { outline: var(--line) solid var(--focus); outline-offset: 2px; border-radius: 999px; }
.mo-cta { min-height: 42px; padding-block: 0; display: inline-flex; align-items: center; }
.mo-cta[aria-current="page"] { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink); }
.mo-menu-btn { font: 800 var(--t-small)/1 var(--f-d); border-width: var(--line); }
.mo-only-sheet { display: none; }
@media (max-width: 860px) {
  .mo-nav { border-width: var(--line); border-color: var(--ink); box-shadow: 5px 6px 0 var(--cobalt); }
  .mo-only-sheet { display: block; border-top: 2px dashed var(--ink); margin-top: 4px; }
  .mo-brand .brand__word { font-size: 1.15rem; }
}
@media (max-width: 380px) { .mo-brand .brand__mark { display: none; } }

/* ---- Hero: one pinned scroll section. As the page scrolls the print grows and tips, the two stickers swing round it, and the registration marks pull apart like plates going out of register. ---- */
.mo-pin { --mo-pin-offset: 76px; --mo-pin-extra: 80vh; }
.mo-pin.is-pinned .hero__print { transform: rotate(calc(var(--mo-pin) * -5deg)) scale(calc(1 + var(--mo-pin) * .14)); transform-origin: 50% 60%; }
.mo-pin.is-pinned .hero__sticker { transform: translate(calc(var(--mo-pin) * -46px), calc(var(--mo-pin) * 34px)) rotate(calc(var(--mo-pin) * -38deg)) scale(calc(1 + var(--mo-pin) * .2)); }
.mo-pin.is-pinned .hero__sticker--b { transform: translate(calc(var(--mo-pin) * 40px), calc(var(--mo-pin) * -52px)) rotate(calc(var(--mo-pin) * 44deg)) scale(calc(1 + var(--mo-pin) * .16)); }
.mo-pin.is-pinned .reg--tl { transform: translate(calc(var(--mo-pin) * -26px), calc(var(--mo-pin) * -18px)) rotate(calc(var(--mo-pin) * 90deg)); }
.mo-pin.is-pinned .reg--br { transform: translate(calc(var(--mo-pin) * 26px), calc(var(--mo-pin) * 18px)) rotate(calc(var(--mo-pin) * -90deg)); }
.mo-pin.is-pinned > .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--ember); transform-origin: 0 50%; transform: scaleX(var(--mo-pin)); }
.mo-pin.is-pinned > .hero { position: sticky; }
@media (max-width: 860px) { .mo-cta { padding-inline: 14px; font-size: .95rem; min-height: 40px; } .mo-menu-btn { padding: 0 12px; } .mo-brand { min-width: 0; } .mo-brand .brand__word { white-space: nowrap; } }
@media (max-width: 420px) { .mo-brand .brand__mark { width: 28px; height: 28px; } .mo-brand .brand__word { font-size: 1rem; } .mo-cta { padding-inline: 10px; font-size: .88rem; } }
.mo-ready .site-foot .mo { transform: translateY(18px); }