/* Paper, ink and lettering come from the existing landing page. */
/* Suppress the browser's coloured overlay when tapping links or text on mobile. */
html { -webkit-tap-highlight-color: transparent; }
:root { --brand-paper: #1b1b1e; --brand-grain: url("paper-grain.svg"); --brand-type: #ece2cc; --burst-yellow: #ffd91c; --burst-red: rgb(88% 6% 3%); }
.plate { view-transition-name: brand-mark; }
.landing-page figure .plate { view-transition-name: none; }
.landing-header { position: fixed; top: 16px; left: clamp(20px,4vw,64px); z-index: 10; }
.shop-header .plate:focus-visible { outline: 2px solid var(--brand-type); outline-offset: 5px; }
@view-transition { navigation: auto; }
::view-transition-group(brand-mark) { animation-duration: 560ms; animation-timing-function: cubic-bezier(.22,1,.36,1); }
::view-transition-old(brand-mark) { display: none; }
::view-transition-new(brand-mark) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
.brand-nav a { position: fixed; z-index: 10; }
.shop-burst { right: 28px; top: 24px; width: 168px; height: 140px; display: grid; place-items: center; color: var(--shop-paper, var(--brand-paper)); text-decoration: none; transform: rotate(-9deg); }
.shop-burst::before { content: ""; position: absolute; inset: 0; background: var(--shop-ink, var(--burst-red)); -webkit-mask: url("shop-stamp.svg") center / 100% 100% no-repeat; mask: url("shop-stamp.svg") center / 100% 100% no-repeat; }
.shop-burst > span { position: relative; display: flex; padding-top: 8px; font: 42px/1 Papyrus, fantasy; -webkit-text-stroke: .06em currentColor; }
.shop-burst i { display: inline-block; font-style: normal; animation: shop-wave 2.8s ease-in-out infinite; }
.shop-burst i:nth-child(2) { animation-delay: -.22s; }
.shop-burst i:nth-child(3) { animation-delay: -.44s; }
.shop-burst i:nth-child(4) { animation-delay: -.66s; }
.shop-burst { view-transition-name: shop-control; }
.shop-burst[aria-current]::after, .shop-burst[data-selected]::after, .shop-burst:active::after {
  content: ""; position: absolute; inset: -5px; pointer-events: none;
  background: var(--brand-type); opacity: .8;
  -webkit-mask: url("shop-cloud-outline.svg") center / 100% 100% no-repeat;
  mask: url("shop-cloud-outline.svg") center / 100% 100% no-repeat;
}
.shop-burst[aria-current], .shop-burst[data-selected], .shop-burst:active { transform: rotate(-9deg) scale(.96); }
.shop-burst[aria-current] i, .shop-burst[data-selected] i, .shop-burst:active i { animation: none; }
@keyframes shop-wave { 0%,100% { transform: translateY(2px) skewY(-4deg); } 50% { transform: translateY(-3px) skewY(4deg); } }
.brand-nav a:focus-visible { outline: 2px solid var(--brand-type); outline-offset: 6px; }
.shop-page { margin: 0; background-color: var(--active-paper, var(--brand-paper)); color: var(--brand-type);
background-image: var(--brand-grain);
}
.shop-header .plate { position: relative; display: block; width: 208px; height: 156px; flex: none; }
.shop-header .plate canvas { position: absolute; left: 0; top: 50%; width: 100%; height: auto; aspect-ratio: 1; transform: translateY(-50%); z-index: 1; }
.wordmark-fallback { display: none; position: absolute; inset: 0; place-content: center; text-align: center; color: var(--shop-ink, var(--burst-red)); font: 28px/1.04 Papyrus, fantasy; -webkit-text-stroke: .06em currentColor; }
.shop-header .plate.fallback .wordmark-fallback { display: grid; }
.shop-header .plate.fallback canvas { display: none; }
/* ---- fun switch: a small ink cloud beside the Shop cloud. The paper knob covers the state you're not in. ---- */
.fun-switch { position: fixed; z-index: 10; right: 12px; bottom: 10px; padding: 10px; border: 0; touch-action: manipulation; background: none; color: var(--shop-paper, var(--brand-paper)); cursor: pointer; font: 15px/1 Papyrus, fantasy; -webkit-text-stroke: .05em currentColor; user-select: none; -webkit-tap-highlight-color: transparent; view-transition-name: fun-control; }
.fun-switch .track { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 118px; height: 30px; isolation: isolate; }
/* the blob: same fuzzy-edged ink as the Shop cloud */
.fun-switch .track::before { content: ""; position: absolute; inset: 1px 2px; z-index: -1; border-radius: 16px 13px 17px 12px / 12px 17px 13px 16px; background: var(--shop-ink, var(--burst-red)); filter: blur(1.6px); }
.fun-switch .half { display: grid; place-items: center; padding-top: 2px; white-space: nowrap; }
.fun-switch .knob { position: absolute; top: 4px; bottom: 4px; left: 5px; width: calc(50% - 7px); border-radius: 10px 8px 11px 7px / 7px 11px 8px 10px; background: var(--shop-paper, var(--brand-paper)); filter: blur(.6px); transition: transform 260ms cubic-bezier(.34,1.4,.64,1); }
html[data-fun="on"] .fun-switch .knob { transform: translateX(calc(100% + 4px)) rotate(-2deg); }   /* driven by the html attribute, set in the head before first paint */
.fun-switch:hover .knob { filter: blur(.3px); }
.fun-switch:focus-visible { outline: 2px solid var(--brand-type); outline-offset: 6px; }
@media (max-width: 600px) {
  .landing-header { top: 12px; }
  .shop-burst { width: 128px; height: 112px; top: 16px; right: 16px; }
  /* Phones: the switch sits in the page flow, centred under the content, and the Shop cloud scrolls away with the header. */
  .shop-page .fun-switch { position: static; display: block; width: max-content; margin: 44px auto 0; font-size: 13px; }
  .shop-page .shop-burst { position: absolute; }
  .landing-page .fun-switch { right: auto; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); font-size: 13px; }
  .fun-switch .track { width: 100px; height: 26px; }
  .shop-burst > span { font-size: 33px; }
  .shop-header .plate { width: clamp(140px, 40vw, 160px); height: 120px; }
  .wordmark-fallback { font-size: 21px; }
}
/* Fun off: no waving letters, no spinning hints. Colours are frozen by brand-timeline.js. */
html[data-fun="off"] .shop-burst i, html[data-fun="off"] .turn-arrow { animation: none; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .shop-burst i { animation: none; }
  .fun-switch .knob { transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 0s; }
}