/* Axu uses the reference site's original palette again. The captured route
   CSS remains the source of truth for tokens, paper layers, leather, ribbons
   and colored media. Do not grayscale images or override those surface colors.
   Evidence: work/axu-review/palette-original-reference-v1/source-colors.json. */

/* Approved drawings retain their exact pixels. Blend the white review
   background into the paper instead of introducing opaque image tiles.
   Contain fits the new square artwork inside the existing Framer geometry. */
img[src^="/axu/"] {
  object-fit: contain !important;
  filter: none !important;
}

div:has(> [data-framer-background-image-wrapper] > img[src^="/axu/"]) {
  mix-blend-mode: multiply;
}

[data-framer-background-image-wrapper]:has(> img[src^="/axu/"]) {
  filter: none !important;
}

/* On the dark desktop the same monochrome marks appear as white chalk.
   This changes neither the artwork files nor the original container sizes. */
:is([data-framer-name^="Deco"], [data-framer-name^=" Decor"], [data-framer-name="Value block"], [data-framer-name="ilus"], [data-framer-name="Footer"], [data-framer-name="About me section"], .framer-OYHzK) img[src^="/axu/"] {
  filter: invert(1) !important;
}

:is([data-framer-name^="Deco"], [data-framer-name^=" Decor"]):has(> [data-framer-background-image-wrapper] > img[src^="/axu/"]),
:is([data-framer-name="Value block"], [data-framer-name="ilus"], [data-framer-name="Footer"], [data-framer-name="About me section"], .framer-OYHzK) div:has(> [data-framer-background-image-wrapper] > img[src^="/axu/"]) {
  mix-blend-mode: screen;
}

.framer-OYHzK {
  --token-9d6e4be8-f5be-4ce8-81f8-c572021c0846: #ffffff;
  mix-blend-mode: screen;
}

/* Work's small header and side-project doodles also sit on dark paper. */
.framer-Zfc2C :is([data-framer-name="Header"], [data-framer-name="Side hustles"]) img[src^="/axu/"] {
  filter: invert(1) !important;
}
.framer-Zfc2C :is([data-framer-name="Header"], [data-framer-name="Side hustles"]),
.framer-Zfc2C :is([data-framer-name="Header"], [data-framer-name="Side hustles"]) div:has(> [data-framer-background-image-wrapper] > img[src^="/axu/"]) {
  mix-blend-mode: screen;
}

/* Blend only decorative frame boundaries. Content sections also contain
   pale paper cards, whose ink must retain normal text contrast. */
:is([data-framer-name="Left Frame"], [data-framer-name="Right Frame"],
    [data-framer-name="ilus"]) {
  mix-blend-mode: screen;
}

/* About's red book edge runs behind the rails. Composite normally so the
   approved white stamps do not invert that red edge into cyan. */
.framer-ZEJeA :is([data-framer-name="Left Frame"], [data-framer-name="Right Frame"]) {
  mix-blend-mode: normal;
}

/* Fit the approved portrait within the existing hero frame without
   overlapping the rotating heading. The book geometry stays unchanged. */
.framer-Dz9w2 [data-framer-name="Hero"] img[src="/axu/03-axu-portrait.png"] {
  transform: scale(.88);
  transform-origin: bottom right;
}

/* Keep the original note and photo-card sizes with the longer PM title. */
.framer-ZEJeA [data-framer-name="Different parts of me/items"] {
  height: 30px !important;
}
.framer-ZEJeA [data-framer-name="Different parts of me/items"] h3 {
  font-size: 23px !important;
  line-height: 30px !important;
}

/* Axu's interim typeset identity follows the reference's primary red.
   Source body tokens stay intact, including contextual paper-color overrides. */
.framer-F3PLf .axu-wordmark,
.framer-F3PLf .framer-f3lfa9 {
  color: var(--token-9d6e4be8-f5be-4ce8-81f8-c572021c0846, #e35342) !important;
  --token-9d6e4be8-f5be-4ce8-81f8-c572021c0846: #e35342 !important;
}

/* The About photo card has its own vector signature, separate from Home. */
.framer-fhDZV [data-framer-name="signature"] > * {
  display: none !important;
}
.framer-fhDZV [data-framer-name="signature"]::after {
  content: "Axu";
  display: block;
  color: var(--token-9d6e4be8-f5be-4ce8-81f8-c572021c0846, #e35342);
  text-align: center;
  font: 32px/35px "Averia Serif Libre", Georgia, serif;
}

.framer-Jnz1E a.framer-44bxc7 {
  color: inherit;
  text-decoration: none;
}
.framer-Jnz1E details.axu-connect.framer-1t6lft1 {
  display: block;
  height: 46px;
  padding: 0;
  position: relative;
  overflow: visible;
  z-index: 5;
}
.axu-connect > .axu-connect-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  list-style: none;
  color: #f2e3cf;
  font: 400 22px/1 "Gochi Hand", sans-serif;
}
.axu-connect > .axu-connect-trigger::-webkit-details-marker {
  display: none;
}
.axu-connect[open] > .axu-connect-trigger {
  border-color: #f2e3cf;
}
.axu-connect > .axu-connect-trigger:focus-visible {
  outline: 2px solid #e35342;
  outline-offset: 4px;
}
.axu-connect > .axu-connect-menu {
  position: absolute;
  bottom: calc(100% - 1px);
  left: 12px;
  width: 168px;
  box-sizing: border-box;
  padding: 8px 0;
  background: #212121;
}
.axu-connect .axu-connect-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 3px 8px;
  box-sizing: border-box;
  color: #f2e3cf;
  font: 400 19px/1.2 "Gochi Hand", sans-serif;
  text-align: left;
  text-decoration: none;
}
.axu-connect .axu-connect-menu a:hover,
.axu-connect .axu-connect-menu a:focus-visible {
  color: #e35342;
}
.axu-connect .axu-connect-icon,
.axu-connect .axu-connect-mark {
  flex: 0 0 31px;
  width: 31px;
  height: 30px;
  object-fit: contain;
  text-align: center;
  font: 400 17px/30px "Gochi Hand", sans-serif;
}
.axu-connect .axu-connect-menu a:last-child .axu-connect-mark {
  font-size: 28px;
}
.axu-connect .axu-connect-icon--xiaohongshu {
  background-color: currentColor;
  -webkit-mask: url('/axu-icons/xiaohongshu.svg') center / contain no-repeat;
  mask: url('/axu-icons/xiaohongshu.svg') center / contain no-repeat;
}

#axu-contact-notice {
  color: var(--token-1b19be9d-0968-4505-a2c8-a984d27f429e, #171717);
  background: var(--token-71c304aa-4c46-4675-8971-a89fbbb7900f, #f2e3cf);
  border: 1px solid var(--token-9d6e4be8-f5be-4ce8-81f8-c572021c0846, #e35342);
  border-radius: 10px;
  padding: 28px;
  width: min(380px, calc(100% - 40px));
  font: 16px/1.6 system-ui, sans-serif;
}
#axu-contact-notice::backdrop { background: #00000099; }
#axu-contact-notice h2 { margin: 0 0 10px; font-size: 24px; }
#axu-contact-notice p { margin: 0 0 24px; }
#axu-contact-notice button {
  min-height: 44px;
  padding: 8px 20px;
  background: var(--token-1b19be9d-0968-4505-a2c8-a984d27f429e, #171717);
  color: var(--token-71c304aa-4c46-4675-8971-a89fbbb7900f, #f2e3cf);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
}

/* Existing keyboard affordances use colors from the captured reference. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--token-e4335cd6-892e-4c94-bda2-d6f3a80df305, #f86c69);
  outline-offset: 4px;
}
:is(.framer-cvfoij, .framer-2st8b7, #axu-contact-notice) :is(a, button):focus-visible {
  outline-color: var(--token-25751331-3643-4c55-901b-c57bfeb6947d, #2754a9);
}
::selection {
  color: var(--token-71c304aa-4c46-4675-8971-a89fbbb7900f, #f2e3cf);
  background-color: var(--token-9d6e4be8-f5be-4ce8-81f8-c572021c0846, #e35342);
}

/* Fit the longer responsibility quote on its original grid-paper note. */
.framer-gpu18 .framer-1ry7xhq {
  width: 202px;
}
.framer-gpu18 .framer-1ry7xhq > .framer-text {
  --framer-font-size: 20px !important;
  --framer-line-height: 22px !important;
}

/* The paper-backed drawings use same-document ink filters injected into each
   HTML page. Normal compositing avoids exposing their former paper matte. */
.framer-Dz9w2 :is(.framer-w1rrap, .framer-2xtjb3, .framer-r1x875),
.framer-Zfc2C :is(.framer-1yrccup, .framer-gglvhu, .framer-hk0lto) {
  mix-blend-mode: normal !important;
}