@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/zilla-slab-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
    U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fusion Pixel";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/fusion-pixel.otf") format("opentype");
}

/* Source Han Sans 2.005 body-text subsets; license and rebuild steps in assets/fonts/. */
@font-face {
  font-family: "Source Han Sans EN Web";
  src: url("assets/fonts/source-han-sans-en-vf.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "Source Han Sans SC Web";
  src: url("assets/fonts/source-han-sans-sc-vf.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "Source Han Sans JP Web";
  src: url("assets/fonts/source-han-sans-jp-vf.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "Source Han Sans KR Web";
  src: url("assets/fonts/source-han-sans-kr-vf.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

/* Self-hosted label subsets from Noto Serif CJK 2.003, SemiBold (600).
   See assets/fonts/OFL-Noto-Serif-CJK.txt for the SIL OFL 1.1 notice. */
@font-face {
  font-family: "Noto Serif CJK SC Label";
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("assets/fonts/noto-serif-sc-600-labels.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Serif CJK JP Label";
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("assets/fonts/noto-serif-jp-600-labels.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Serif CJK KR Label";
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("assets/fonts/noto-serif-kr-600-labels.woff2") format("woff2");
}

:root {
  --pink: #f178af;
  --blue: #31479d;
  --cream: #edd5bf;
  --ink: #000000;

  /* Handoff ground truth */
  --page-margin: 24px;
  --header-h: 80px;
  --header-occupied-h: var(--header-h);
  --menu-font-size: 20px;
  --desktop-logo-h: 48px;
  --mobile-logo-h: 36px;
  --menu-icon-h: 20px;
  --ui-icon-w: 24px;
  --safe-top: env(safe-area-inset-top, 0px);
  --mobile-header-total: calc(var(--header-occupied-h) + var(--safe-top));

  /* Home composition from the supplied 1440 / 390 layouts */
  --desktop-blue-top: 35px;
  --desktop-blue-bottom: 114px;
  --desktop-gap: 20px;
  --mobile-blue-top: 26px;
  --mobile-divider: 13px;
  --mobile-blue-bottom: 117px;

  --ui-font: "Zilla Slab", Rockwell, Georgia, serif;
  --body-font: "Source Han Sans EN Web", "Source Han Sans", "Source Han Sans SC", "Source Han Sans JP",
               "Source Han Sans K", "Noto Sans CJK SC", "Noto Sans CJK JP",
               "Noto Sans CJK KR", "PingFang SC", "Hiragino Sans",
               "Apple SD Gothic Neo", Arial, sans-serif;
  --body-text-size: 13px;
  --body-text-line-height: 18px;
  --microcopy-size: 11px;
  --microcopy-line-height: 14px;

  /* Shared motion language — deliberately quiet for the first polish pass. */
  --motion-mechanical: 80ms;
  --motion-fast: 160ms;
  --motion-base: 280ms;
  --motion-slow: 460ms;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);

  /* About's review values stay component-owned and deliberately tuneable. */
  --about-optical-offset: 40px;
}

:root[data-language="zh"] { --body-font: "Source Han Sans SC Web", "Source Han Sans SC", "Source Han Sans", "Noto Sans CJK SC", "PingFang SC", Arial, sans-serif; }
:root[data-language="ja"] { --body-font: "Source Han Sans JP Web", "Source Han Sans JP", "Source Han Sans", "Noto Sans CJK JP", "Hiragino Sans", Arial, sans-serif; }
:root[data-language="ko"] { --body-font: "Source Han Sans KR Web", "Source Han Sans K", "Source Han Sans", "Noto Sans CJK KR", "Apple SD Gothic Neo", Arial, sans-serif; }

:root:is([data-language="zh"], [data-language="ja"], [data-language="ko"]) {
  --body-text-line-height: 1.5;
  --microcopy-line-height: 1.5;
}

:root:is([data-language="zh"], [data-language="ja"], [data-language="ko"]) .milk-city-shell,
:root:is([data-language="zh"], [data-language="ja"], [data-language="ko"]) .account-option__text,
:root:is([data-language="zh"], [data-language="ja"], [data-language="ko"]) .post-author {
  line-height: 1.5;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
}

html {
  /* Safari's browser chrome follows the root canvas at the top edge. */
  background: var(--pink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--pink);
  color: var(--cream);
  font-family: var(--ui-font);
  font-size: var(--menu-font-size);
  font-weight: 600;
  font-synthesis: none;
  overflow-x: hidden;
}

button,
a { -webkit-tap-highlight-color: transparent; }

a {
  color: inherit;
  text-decoration: none;
}

img {
  -webkit-user-drag: none;
}

.visually-hidden {
  position: fixed !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Global navigation shell.
   On desktop it participates in normal document flow.
   On mobile the whole shell becomes fixed, so header + menu share one coordinate system. */
.nav-shell {
  position: relative;
  z-index: 300;
  background: var(--pink);
}

/* The shared shell keeps navigation and audio alive while each page document
   owns and releases its own content listeners, timers, and animation state. */
body.site-shell-host { overflow: hidden; }
.site-shell-page {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  border: 0;
  z-index: 1;
}
.site-shell-page[hidden] { display: none; }
.site-core-message { margin: 0; padding: 48px 24px; text-align: center; font: 600 14px/1.5 var(--ui-font); }
.site-shell-route-status {
  position: fixed;
  z-index: 2;
  inset: var(--header-occupied-h) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--cream);
  color: var(--ink);
  font: 600 14px/1.3 var(--ui-font);
}
html[data-site-embedded] .nav-shell {
  visibility: hidden;
  pointer-events: none;
}

.site-header {
  position: relative;
  z-index: 2;
  height: var(--header-h);
  padding-inline: var(--page-margin);
  display: flex;
  align-items: center;
  background: var(--pink);
}

.site-header::after {
  content: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 0;
}

.brand img {
  display: block;
  width: auto;
}

.brand--desktop img { height: var(--desktop-logo-h); }

.brand--mobile,
.mobile-header-row { display: none; }

.desktop-nav {
  margin-left: auto;
  min-width: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  font-size: var(--menu-font-size);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.desktop-primary,
.desktop-utility {
  height: var(--header-h);
  display: flex;
  align-items: center;
}

.language-selector button,
.mobile-language-selector button {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: "Zilla Slab";
  font-size: 20px;
  font-weight: 600;
  line-height: 20px;
  font-synthesis: none;
  cursor: pointer;
}

.language-selector button:lang(zh),
.mobile-language-selector button:lang(zh) {
  font-family: "Noto Serif CJK SC Label";
  font-size: 17px;
}

.language-selector button:lang(ja),
.mobile-language-selector button:lang(ja) {
  font-family: "Noto Serif CJK JP Label";
  font-size: 17px;
}

.language-selector button:lang(ko),
.mobile-language-selector button:lang(ko) {
  font-family: "Noto Serif CJK KR Label";
  font-size: 17px;
}

.desktop-language-selector {
  position: relative;
  height: var(--header-h);
  display: inline-flex;
  align-items: center;
}

.desktop-language-selector .language-selector__current {
  height: var(--header-h);
  display: inline-flex;
  align-items: center;
  color: var(--blue);
  white-space: nowrap;
}

.language-selector__choices {
  max-width: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 18px;
  overflow: hidden;
  opacity: 0;
  transform: translateX(8px);
  transition:
    max-width 220ms var(--ease-standard),
    opacity 160ms var(--ease-standard),
    transform 220ms var(--ease-standard);
}

.desktop-language-selector.is-open .language-selector__choices {
  max-width: 240px;
  margin-right: 18px;
  opacity: 1;
  transform: translateX(0);
}

.desktop-language-selector .language-selector__option {
  height: var(--header-h);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--blue);
  white-space: nowrap;
}

.desktop-language-selector .language-selector__option[aria-pressed="true"] {
  display: none;
}

.mobile-language-selector {
  display: none;
}

.desktop-primary { gap: clamp(42px, 6.15vw, 89px); }

.desktop-utility {
  margin-left: calc(36px + min(36px, 2.5vw));
  gap: 24px;
}

.desktop-primary > a,
.desktop-utility > a {
  height: var(--header-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/*
  Navigation colors are shell-owned, never page-owned. Content pages intentionally
  use different body colors, so allowing links to inherit from body made the same
  header render cream on Home and blue on About / Works / MILK CITY.
*/
.desktop-primary > a,
.desktop-primary > a:link,
.desktop-primary > a:visited,
.desktop-primary > a:hover,
.desktop-primary > a:active,
.desktop-primary > a:focus,
.desktop-utility > a,
.desktop-utility > a:link,
.desktop-utility > a:visited,
.desktop-utility > a:hover,
.desktop-utility > a:active,
.desktop-utility > a:focus {
  color: var(--cream);
}

/* The active section owns one cream tab in the pink navigation shell. */
.desktop-primary > .nav-link {
  position: relative;
  z-index: 0;
}

.desktop-primary > .nav-link--active::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  left: -36px;
  right: -36px;
  background: var(--cream);
}

.desktop-primary > .nav-link--active,
.desktop-primary > .nav-link--active:link,
.desktop-primary > .nav-link--active:visited,
.desktop-primary > .nav-link--active:hover,
.desktop-primary > .nav-link--active:active,
.desktop-primary > .nav-link--active:focus {
  color: var(--blue);
}

.social-link {
  flex: 0 0 var(--ui-icon-w);
  width: var(--ui-icon-w);
  height: var(--ui-icon-w);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.social-link img {
  display: block;
  width: var(--ui-icon-w);
  height: auto;
  max-height: var(--ui-icon-w);
}

.social-link--unavailable {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: not-allowed;
}

.mobile-menu { display: none; }

.page-scroll {
  position: relative;
  background: var(--blue);
}

/* Shared non-Home Content Loading. Header/Nav and the outer page structure stay
   visible; each direct-child main owns its real destination surface. */
html[data-content-loading-mode="full"] .page-scroll > main > * {
  visibility: hidden;
}

html[data-content-loading-mode="full"] .page-scroll > main::after,
.content-loading-region.is-content-loading::after {
  content: "LOADING";
  z-index: 250;
  display: grid;
  place-items: center;
  background: var(--content-loading-surface, inherit);
  color: currentColor;
  font: 600 14px/1 var(--ui-font);
  letter-spacing: .04em;
  pointer-events: none;
}

html[data-content-loading-mode="full"] .page-scroll > main::after {
  position: fixed;
  inset:
    var(--header-occupied-h)
    var(--content-loading-inline-end, 0)
    0
    var(--content-loading-inline-start, 0);
}

.content-loading-region {
  position: relative;
  isolation: isolate;
}

.content-loading-region.is-content-loading > * {
  visibility: hidden;
}

.content-loading-region.is-content-loading::after {
  position: fixed;
  left: var(--content-loading-viewport-left, 0px);
  top: var(--content-loading-viewport-top, var(--header-occupied-h));
  width: var(--content-loading-viewport-width, 100vw);
  height: var(--content-loading-viewport-height, calc(100svh - var(--header-occupied-h)));
  min-height: 0;
  background: var(--content-loading-surface, var(--cream));
}

.content-load-error {
  position: fixed;
  z-index: 600;
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  max-width: calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  width: max-content;
  min-height: 20px;
  box-sizing: border-box;
  padding: 0 6px;
  background: #000;
  color: var(--cream, #edd5bf);
  font: normal 13px/20px "Fusion Pixel", monospace;
  overflow-wrap: anywhere;
  pointer-events: none;
  opacity: 1;
  transition: opacity 250ms linear;
}
.content-load-error.is-fading { opacity: 0; }
.page-home .content-load-error {
  bottom: calc(40px + env(safe-area-inset-bottom, 0px));
}
.page-home:has(.home-footprints.is-open) .content-load-error {
  bottom: calc(158px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 848px) {
  .page-desktop .content-load-error { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
}

html[data-content-loading-mode="cooldown"] .page-scroll img:not([data-content-ready]),
html[data-content-loading-mode="cooldown"] .page-scroll [data-content-participant]:not([data-content-ready]),
.content-loading-region.is-content-cooldown img:not([data-content-ready]),
.content-loading-region.is-content-cooldown [data-content-participant]:not([data-content-ready]) {
  visibility: hidden;
}

.page-home,
.page-home .home-scroll,
.home-rive-stage {
  background: var(--pink);
}

.home-loading {
  position: fixed;
  z-index: 500;
  inset: var(--header-occupied-h) 0 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
  background: var(--pink);
  color: var(--ink);
  font: 600 16px/1.3 var(--ui-font);
}
.home-loading [data-home-loading-continue] { font: inherit; cursor: pointer; }
html:is([data-home-loading="ready"], [data-home-loading="degraded"]) .home-loading { display: none; }
html:not([data-home-loading="ready"]):not([data-home-loading="degraded"]) .home-scroll,
html:not([data-home-loading="ready"]):not([data-home-loading="degraded"]) .home-footprints,
html:not([data-home-loading="ready"]):not([data-home-loading="degraded"]) .home-footprints-ticker { visibility: hidden; }

.page-home {
  overflow: hidden;
}

.home-scroll {
  min-height: 0;
}

.home-rive-stage {
  --home-viewport-height: 100dvh;
  --home-page-header-height: var(--header-occupied-h);
  --home-artboard-ratio: .6566666667;
  --home-top-gap: clamp(8px, 4.9vh, var(--desktop-blue-top));
  --home-bottom-gap: clamp(18px, 15.8vh, var(--desktop-blue-bottom));
  position: relative;
  height: max(0px, calc(var(--home-viewport-height) - var(--home-page-header-height)));
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
}

.home-rive-composition {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: calc(
    var(--home-top-gap) +
    (100% - var(--home-top-gap) - var(--home-bottom-gap)) / 2
  );
  width: min(
    100vw,
    calc(
      (var(--home-viewport-height) - var(--home-page-header-height) - var(--home-top-gap) - var(--home-bottom-gap)) *
      var(--home-artboard-ratio)
    ),
    433.4px
  );
  aspect-ratio: 394 / 600;
  transform: translate(-50%, -50%);
  pointer-events: none;
  container-type: inline-size;
}

.home-rive-canvas,
.home-rive-oval {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.home-rive-oval {
  z-index: 1;
  overflow: visible;
  fill: var(--blue);
  transform-box: view-box;
  transform-origin: 197px 532px;
}

.home-rive-canvas {
  z-index: 2;
  outline: 0;
}

.home-pop-layer {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.home-pop-tag {
  --home-pop-y: 33%;
  --home-pop-jitter-y: 0px;
  --home-pop-tilt: 0deg;
  position: absolute;
  top: calc(var(--home-pop-y) + var(--home-pop-jitter-y));
  max-width: 48cqw;
  margin: 0;
  color: var(--blue);
  font-family: "Zilla Slab", Georgia, serif;
  font-size: clamp(12px, 3.2307cqw, 14px);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.025em;
  white-space: nowrap;
  opacity: 0;
  transform-origin: center;
  will-change: opacity, transform;
}

.home-pop-tag[data-home-pop-dog="0"] { --home-pop-y: 31.5%; }
.home-pop-tag[data-home-pop-dog="1"] { --home-pop-y: 43.5%; }
.home-pop-tag[data-home-pop-dog="2"] { --home-pop-y: 55.5%; }
.home-pop-tag[data-home-pop-dog="3"] { --home-pop-y: 67.5%; }

.home-pop-tag.is-left {
  right: 80%;
  text-align: right;
}

.home-pop-tag.is-right {
  left: 80%;
  text-align: left;
}

.home-pop-tag.is-milk-pop {
  animation: home-milk-pop 2050ms ease-in-out both;
}

.home-pop-tag.is-tt-pop {
  animation: home-tt-pop 1650ms cubic-bezier(.2, .72, .25, 1) both;
}

.home-pop-tag--mustache {
  top: 91.5%;
  left: 50%;
  width: 86%;
  max-width: none;
  color: var(--cream);
  font-size: clamp(12px, 3.2307cqw, 14px);
  text-align: center;
  transform: translateX(-50%);
}

.home-pop-tag--mustache.is-mustache-pop {
  animation: home-mustache-pop 1800ms ease-in-out both;
}

@keyframes home-milk-pop {
  0% { opacity: 0; }
  16%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes home-tt-pop {
  0% {
    opacity: 0;
    transform: translateY(10px) rotate(var(--home-pop-tilt)) scale(.9);
  }
  24% {
    opacity: 1;
    transform: translateY(-6px) rotate(var(--home-pop-tilt)) scale(1.04);
  }
  38%, 72% {
    opacity: 1;
    transform: translateY(0) rotate(var(--home-pop-tilt)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-3px) rotate(var(--home-pop-tilt)) scale(.98);
  }
}

@keyframes home-mustache-pop {
  0% { opacity: 0; transform: translateX(-50%) scale(.98); }
  18%, 72% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1); }
}

.home-rive-gesture-surface {
  position: absolute;
  z-index: 3;
  inset: 0;
  touch-action: none;
  cursor: grab;
}

.home-rive-gesture-surface:active {
  cursor: grabbing;
}

.home-rive-gesture-surface.is-dog-hover,
.home-rive-gesture-surface.is-beard-hover {
  cursor: pointer;
}

.home-rive-stage.is-intro-pending .home-rive-oval,
.home-rive-stage.is-intro-pending .home-rive-canvas {
  opacity: 0;
}

.home-rive-stage.is-intro-playing .home-rive-oval {
  animation: home-rive-oval-enter 620ms cubic-bezier(.22, .55, .26, 1) both;
}

.home-rive-stage.is-intro-playing .home-rive-canvas {
  animation: home-rive-subject-enter 760ms cubic-bezier(.22, .55, .26, 1) both;
}

@keyframes home-rive-oval-enter {
  from {
    opacity: 0;
    transform: scale(.5, .18);
  }
  to { opacity: 1; transform: scale(1); }
}

@keyframes home-rive-subject-enter {
  from {
    opacity: 0;
    transform: translateY(42px) scale(.965);
  }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 1199px) {
  /*
    Keep the header fixed, but leave scrolling to the browser document. Native
    window scrolling survives iOS orientation changes more reliably than a fixed,
    independently scrolling content pane.
  */
  html,
  body {
    min-height: 100%;
    background: var(--pink);
  }

  .nav-shell {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 300;
    padding-top: var(--safe-top);
    background: var(--pink);
    transform: translateY(0);
    transition: transform 240ms var(--ease-out);
    will-change: transform;
  }

  /* Preserve the status-bar safe area in portrait while moving the 80px
     navigation row off-screen. With no top safe area, the shell hides fully. */
  body.mobile-header-hidden:not(.menu-open) .nav-shell {
    transform: translateY(calc(-1 * var(--header-occupied-h)));
  }

  .site-header {
    height: var(--header-occupied-h);
    padding-inline: var(--page-margin);
  }

  .brand--desktop,
  .desktop-nav { display: none; }

  .mobile-header-row {
    position: relative;
    display: flex;
    width: 100%;
    height: var(--header-h);
    align-items: center;
  }

  .brand--mobile {
    position: absolute;
    left: 50%;
    top: 50%;
    display: inline-flex;
    transform: translate(-50%, -50%);
  }

  .brand--mobile img {
    height: var(--mobile-logo-h);
    width: auto;
  }

  .icon-button {
    appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    width: var(--ui-icon-w);
    height: var(--ui-icon-w);
    background: transparent;
    line-height: 0;
    cursor: pointer;
    position: relative;
  }

  /* Keep the 24px artwork in place while giving the control a 40px hit area. */
  .icon-button::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
  }

  .icon-frame {
    width: var(--ui-icon-w);
    height: var(--ui-icon-w);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .icon-frame img {
    display: block;
    width: auto;
    height: var(--menu-icon-h);
    max-width: var(--ui-icon-w);
  }

  .menu-button {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .close-button {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  body.menu-open .close-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* The document is the only mobile scrolling surface. */
  .page-scroll {
    position: relative;
    min-height: calc(100dvh - var(--mobile-header-total));
    margin-top: var(--mobile-header-total);
    overflow: visible;
    background: var(--blue);
  }

  html[data-content-loading-mode="full"] .page-scroll > main::after {
    top: var(--mobile-header-total);
  }
  .home-rive-stage {
    --home-page-header-height: var(--mobile-header-total);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-shell { transition: none; }

  .home-pop-tag.is-tt-pop,
  .home-pop-tag--mustache.is-mustache-pop {
    animation-name: home-milk-pop;
    animation-duration: 2050ms;
  }

  .home-rive-stage.is-intro-pending .home-rive-oval,
  .home-rive-stage.is-intro-pending .home-rive-canvas,
  .home-rive-stage.is-intro-playing .home-rive-oval,
  .home-rive-stage.is-intro-playing .home-rive-canvas {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Homepage visitor footprints. The API owns the shared recent records; local
   storage only preserves the existing tab and 12-hour submission limits. */
.home-footprints {
  --footprints-ticker-height: 20px;
  --footprints-visual-bottom: 0px;
  position: fixed;
  z-index: 250;
  right: 24px;
  bottom: calc(
    var(--footprints-ticker-height) + 8px + env(safe-area-inset-bottom, 0px) +
    var(--footprints-visual-bottom)
  );
  display: grid;
  justify-items: end;
  gap: 5px;
  color: var(--cream);
  font-family: "Fusion Pixel", monospace;
  font-weight: 400;
  pointer-events: none;
}

.home-footprints__panel {
  width: 220px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    max-height var(--motion-fast) var(--ease-out),
    opacity var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-out),
    visibility 0s linear var(--motion-fast);
  pointer-events: none;
}

.home-footprints.is-open .home-footprints__panel {
  max-height: 96px;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
  pointer-events: auto;
}

.home-footprints__form {
  padding: 8px 10px 10px;
  background: var(--ink);
}

.home-footprints__heading,
.home-footprints__entry-row {
  display: flex;
  align-items: center;
}

.home-footprints__heading {
  min-height: 20px;
  margin-bottom: 6px;
  justify-content: space-between;
  gap: 8px;
}

.home-footprints__heading label {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.home-footprints__entry-row {
  gap: 6px;
}

.home-footprints__entry-row input {
  appearance: none;
  min-width: 0;
  height: 29px;
  flex: 1 1 auto;
  padding: 3px 6px;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Fusion Pixel", monospace;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.home-footprints__entry-row input:focus-visible {
  outline: 1px solid var(--pink);
  outline-offset: 1px;
}

.home-footprints__icon-button,
.home-footprints__paw {
  appearance: none;
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  line-height: 0;
  cursor: pointer;
  pointer-events: auto;
}

.home-footprints__icon-button::before,
.home-footprints__paw::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
}

.home-footprints__icon-button img,
.home-footprints__paw img {
  position: relative;
  display: block;
  width: auto;
}

.home-footprints__collapse img { width: 12px; }
.home-footprints__dice img { width: 16px; }
.home-footprints__enter img { width: 18px; }

.home-footprints__paw {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}

.home-footprints__paw img { width: 17px; }

.home-footprints-ticker {
  --footprints-ticker-height: 20px;
  position: fixed;
  z-index: 240;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  height: var(--footprints-ticker-height);
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--ink);
  color: var(--cream);
  font-family: "Fusion Pixel", monospace;
  font-size: 13px;
  font-weight: 400;
  line-height: var(--footprints-ticker-height);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity var(--motion-fast) var(--ease-standard);
}

.home-footprints-ticker__track {
  width: max-content;
  min-width: 100%;
  padding-inline: 8px;
  text-align: center;
}

.home-footprints-ticker.has-multiple-records .home-footprints-ticker__track {
  text-align: left;
  animation: home-footprints-scroll 28s linear 2s infinite;
}

.page-home.footprints-keyboard-open .home-footprints-ticker {
  opacity: 0;
  visibility: hidden;
}

@keyframes home-footprints-scroll {
  0%, 8% { transform: translateX(0); }
  100% { transform: translateX(calc(100vw - 100%)); }
}

@media (max-width: 600px) {
  .home-footprints {
    right: 50%;
    justify-items: center;
    transform: translateX(50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-footprints__panel { transition: none; }
  .home-footprints-ticker.has-multiple-records .home-footprints-ticker__track {
    animation: none;
  }
}






/* =========================================================
   ABOUT
   ========================================================= */

:root {
  --about-card-size: clamp(206.06px, 24.2708vw, 233px);
  --about-gap: clamp(57.7px, 6.7969vw, 65.25px);
  --about-details-w: clamp(286px, calc(100vw - 760px), 300px);
  --about-tt-meta-width: var(--about-details-w);
  --about-layout-motion-duration: 180ms;
  --about-layout-motion-ease: cubic-bezier(.22, .68, .24, 1);
}

.about-stage {
  background: var(--cream);
}

.page-about {
  background: var(--cream);
  color: var(--blue);
}

.page-about .about-scroll {
  background: var(--cream);
}

.about-stage {
  --content-loading-surface: var(--cream);
  min-height: calc(100svh - var(--header-occupied-h));
  width: min(960px, max(849px, calc(100% - 48px)));
  margin-inline: auto;
  padding: 0 0 40px;
}

.about-grid {
  --about-grid-base-top: 0px;
  display: grid;
  grid-template-columns: repeat(3, var(--about-card-size));
  align-items: start;
  justify-content: center;
  column-gap: var(--about-gap);
  padding-top: var(--about-grid-base-top);
}

.about-card {
  --about-card-lift: 0px;
  width: var(--about-card-size);
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateY(calc(-1 * var(--about-card-lift)));
  transition: transform var(--about-layout-motion-duration) var(--about-layout-motion-ease);
}

.about-card__portrait {
  position: relative;
  display: block;
  width: var(--about-card-size);
  height: var(--about-card-size);
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
  color: inherit;
  appearance: none;
  cursor: pointer;
  transform: none;
  transition: none;
}

/* These two exports intentionally extend beyond their circular artwork.
   Preserve the established frame and registration, but do not crop the image. */
.about-card--beerblanket .about-card__portrait,
.about-card--milk .about-card__portrait {
  overflow: visible;
}

.about-card--beerblanket .about-card__portrait-image--default,
.about-card--milk .about-card__portrait-image--detail {
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
}

.about-card__portrait-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.about-card__portrait-image--default {
  display: block;
}

.about-card__portrait-image--detail {
  display: none;
}

.about-card.is-portrait-swapped .about-card__portrait-image--default {
  display: none;
}

.about-card.is-portrait-swapped .about-card__portrait-image--detail {
  display: block;
}

.about-card__name {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  margin-top: 36px;
}

.about-card__name img {
  display: block;
  width: auto;
  height: 22px;
  object-fit: contain;
}

.about-card__details-reveal {
  display: none;
  width: var(--about-details-w);
  max-width: var(--about-tt-meta-width);
  visibility: hidden;
}

.about-card.is-open .about-card__details-reveal {
  display: block;
  visibility: visible;
}

.about-card__details-clip {
  min-height: 0;
  overflow: hidden;
}

.about-card__details {
  min-height: 0;
  overflow: hidden;
  padding-top: 10px;
  font-family: var(--body-font);
  font-size: 12px;
  font-weight: 400;
  line-height: var(--body-text-line-height);
  color: var(--blue);
  text-align: center;
}

.about-card__underline {
  display: block;
  width: var(--underline-w);
  height: 4px;
  margin-inline: auto;
  background: var(--pink);
}

.about-card--tt {
  --underline-w: 40px;
}

.about-card--beerblanket {
  --underline-w: 140px;
}

.about-card--milk {
  --underline-w: 76px;
}

.about-card__details--beerblanket {
  color: var(--ink);
}

.about-card__details--beerblanket .about-card__underline {
  background: var(--ink);
}

.about-card__meta {
  position: relative;
  left: 50%;
  width: max-content;
  height: 23px;
  margin-top: 24px;
  margin-inline: 0;
  padding-inline: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: var(--cream);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
}

.about-card__role {
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.about-card--tt .about-card__description,
.about-card--milk .about-card__description {
  white-space: nowrap;
}

.about-card__description {
  margin: 8px 0 0;
}

.about-card__details--beerblanket .about-card__role {
  margin-top: 24px;
}

[data-about-chunk][hidden],
[data-about-paragraph][hidden] {
  display: none;
}

@media (max-width: 848px) {
  .about-stage {
    width: 100%;
    min-height: 100%;
    padding: 36px 24px 60px;
    display: block;
  }

  .about-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding-top: 0;
    transform: none;
  }

  .about-card {
    width: 100%;
    align-self: center;
    transform: none;
    transition: none;
  }

  .about-card--milk {
    order: 1;
  }

  .about-card--beerblanket {
    order: 2;
  }

  .about-card--tt {
    order: 3;
  }

  .about-card__portrait {
    width: 165px;
    height: 165px;
  }

  .about-card__name {
    margin-top: 16px;
  }

  .about-card__details-reveal {
    width: min(100%, var(--about-tt-meta-width));
  }

  .about-card__details {
    font-size: 12px;
    line-height: var(--body-text-line-height);
  }

  .about-card__meta {
    margin-top: 12px;
    font-size: 12px;
  }

  .about-card__bio {
    margin-top: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-card,
  .about-card__portrait {
    transition: none;
  }
}

/* =========================================================
   MOTION v15 — shared first-pass polish
   ========================================================= */

/* The classes are added only when JavaScript is active, so content never stays
   hidden when scripting is unavailable. */
body.motion-prep.page-home .mobile-header-row {
  opacity: 0;
  transform: translateY(-6px);
}

body.motion-prep.motion-ready.page-home .mobile-header-row {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--motion-base) var(--ease-out),
    transform var(--motion-slow) var(--ease-out);
}

/* Header navigation */
.brand img,
.desktop-utility > a,
.social-link img {
  transition:
    opacity var(--motion-fast) var(--ease-standard),
    transform var(--motion-base) var(--ease-out);
}

.desktop-primary > .nav-link {
  transform: none;
  transition: none;
}

.desktop-primary > .nav-link .nav-link__label {
  position: relative;
  display: inline-block;
  transform: translate(0, 0);
  transition: transform var(--motion-mechanical) steps(2, end);
}

.desktop-primary > .nav-link .nav-link__label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 2.5px;
  background: currentColor;
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-mechanical) steps(2, end);
}

.desktop-primary > .nav-link:hover .nav-link__label::after,
.desktop-primary > .nav-link--active .nav-link__label::after,
.desktop-primary > .nav-link:focus-visible .nav-link__label::after {
  opacity: 1;
  transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
  .brand:hover img {
    opacity: .72;
    transform: none;
  }

  .desktop-utility > a:hover {
    opacity: .72;
    transform: none;
  }

  .desktop-utility > .social-link--unavailable:hover {
    opacity: .72;
  }

  .desktop-primary > .nav-link:where(:hover) .nav-link__label {
    transform: translate(0, -2px);
  }

  .desktop-utility > .social-link:hover img {
    transform: none;
  }
}

.desktop-primary > .nav-link--active .nav-link__label,
.desktop-primary > .nav-link--pressed .nav-link__label,
.desktop-primary > .nav-link:active .nav-link__label {
  transform: translate(0, 0);
}

@media (hover: hover) and (pointer: fine) {
  .desktop-language-selector .language-selector__current:hover,
  .desktop-language-selector .language-selector__option:hover {
    opacity: .72;
    transform: none;
  }
}

/* The responsive Dropdown is one content-sized component at every non-desktop
   width. It sits behind the full 84px Header footprint and moves as one part. */
@media (max-width: 1199px) {
  .mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1;
    display: block;
    max-height: calc(100dvh - var(--mobile-header-total));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--pink);
    color: var(--cream);
    pointer-events: none;
    visibility: hidden;
    transform: translateY(-100%);
    transition:
      transform var(--motion-base) linear,
      visibility 0s linear var(--motion-base);
    will-change: transform;
  }

  .mobile-menu.is-open {
    pointer-events: auto;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .mobile-nav a {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--cream);
    color: var(--cream);
    font-size: var(--menu-font-size);
    font-weight: 600;
    line-height: 1;
    transition: color var(--motion-fast) linear;
  }

  .mobile-nav a:active {
    background: color-mix(in srgb, var(--cream) 18%, transparent);
  }

  .mobile-menu__utility {
    padding: 40px 0 calc(32px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: var(--cream);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
  }

  body.menu-open {
    position: fixed;
    top: var(--locked-page-scroll-y, 0px);
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
  }

  body.menu-open .page-scroll {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
  }

  .mobile-language-selector {
    order: 2;
    width: min(100%, 360px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 3vw, 28px);
  }

  .mobile-language-selector button,
  .mobile-language-selector button:lang(zh),
  .mobile-language-selector button:lang(ja),
  .mobile-language-selector button:lang(ko) {
    min-height: 30px;
    color: var(--cream);
    text-align: center;
    transition: color var(--motion-fast) linear;
  }

  .mobile-social-links {
    order: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  .mobile-social-links .social-link {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }

  .mobile-social-links .social-link img {
    width: 28px;
    max-height: 28px;
  }

  .mobile-language-selector button:active,
  .mobile-social-links .social-link:active img {
    color: color-mix(in srgb, var(--cream) 72%, var(--pink));
    opacity: .72;
  }
}

@media (hover: hover) and (pointer: fine) {
  .menu-button:hover .icon-frame,
  .close-button:hover .icon-frame,
  .mobile-social-links .social-link:hover img {
    opacity: .72;
  }

  .mobile-nav a:hover,
  .mobile-language-selector button:hover {
    color: color-mix(in srgb, var(--cream) 72%, var(--pink));
  }
}

@media (prefers-reduced-motion: reduce) {
  body.motion-prep .site-header > .brand--desktop,
  body.motion-prep .site-header > .desktop-nav,
  body.motion-prep.page-home .mobile-header-row {
    opacity: 1 !important;
    transform: none !important;
  }

  .brand img,
  .desktop-utility > a,
  .desktop-primary > .nav-link .nav-link__label,
  .desktop-primary > .nav-link .nav-link__label::after {
    transition: none !important;
  }

  .mobile-menu,
  .mobile-nav a,
  .mobile-language-selector button,
  .social-link img,
  .close-button {
    transition: none;
  }
}

/* Mart is a quiet placeholder within the shared page shell. */
.page-mart, .mart-scroll { background: var(--cream); color: var(--blue); }
.mart-stage { min-height: calc(100svh - var(--header-occupied-h)); display: grid; place-items: center; padding: 32px; text-align: center; }
.mart-stage p { margin: 0; font-family: "Zilla Slab", serif; font-size: 20px; font-weight: 600; line-height: 1.12; }

/* The home control area owns touch gestures so repeated taps stay taps. */
.page-home .home-footprints, .page-home .home-footprints-ticker { touch-action: manipulation; }

/* A hidden document suspends CSS work along with its owned clocks. */
.page-suspended *, .page-suspended *::before, .page-suspended *::after { animation-play-state: paused !important; }
:is(.page-works, .page-milk-city) img[data-media-src]:not([data-content-ready]):not([data-content-error]) { visibility: hidden; }
:is(.page-works, .page-milk-city) img[data-media-src][data-content-error] { visibility: visible; }