:root {
  --paper: #fffef6;
  --paper-blue: #f4fbfb;
  --ink: #490303;
  --muted: rgba(73, 3, 3, 0.62);
  --soft-gray: rgba(72, 72, 72, 0.58);
  --glass: rgba(232, 250, 255, 0.72);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, Arial, sans-serif;
}

img {
  display: block;
  max-width: 100%;
}

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

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px clamp(28px, 3.5vw, 74px);
  background: rgba(245, 253, 251, 0.88);
}

.nav-reference {
  display: none;
}

.site-header::before,
.site-header::after {
  content: "";
  position: absolute;
  top: 32px;
  background-repeat: no-repeat;
  background-size: contain;
}

.site-header::before {
  right: 92px;
  width: 35px;
  height: 38px;
  background-image: url("../assets/project-cover/cover-Side%20navigation%20bar-icon-search.png");
}

.site-header::after {
  right: 48px;
  width: 34px;
  height: 34px;
  background-image: url("../assets/project-cover/cover-Side%20navigation%20bar-icon-%20menu.png");
}

.brand,
.top-nav a {
  font-family: Fredoka, "Trebuchet MS", "Comic Sans MS", Arial, sans-serif;
  line-height: 1;
  color: var(--ink);
  text-shadow: 1px 2px 3px rgba(73, 3, 3, 0.18);
}

.brand {
  font-size: 54px;
}

.top-nav a {
  font-size: 24px;
}

.top-nav {
  display: flex;
  gap: 190px;
  align-items: center;
  margin-right: 280px;
}

.home-header {
  top: 0;
  height: min(6.95vw, 75px);
  padding: 0;
  background: transparent;
  overflow: hidden;
}

.home-header::before,
.home-header::after {
  display: none;
}

.home-header .nav-reference {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
}

.home-header .brand,
.home-header .top-nav a {
  position: absolute;
  z-index: 1;
  display: block;
  height: 100%;
  color: transparent;
  text-shadow: none;
  overflow: hidden;
}

.home-header .brand {
  left: 3.1%;
  top: 0;
  width: 13%;
  color: var(--ink);
  font-family: "Hachi Maru Pop", "Chalkboard SE", "Comic Sans MS", cursive;
  font-size: 48px;
  font-weight: 400;
  line-height: min(6.95vw, 75px);
  letter-spacing: 0.03em;
  text-shadow: 1px 2px 3px rgba(73, 3, 3, 0.24);
}

.home-header .top-nav {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
}

.home-header .top-nav a {
  top: 0;
  font-size: 0;
}

.home-header .top-nav a:nth-child(1) {
  left: 40.6%;
  width: 12%;
}

.home-header .top-nav a:nth-child(2) {
  left: 60.2%;
  width: 10.3%;
}

.home-header .top-nav a:nth-child(3) {
  left: 75.3%;
  width: 12.5%;
}

.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  padding: 7px;
}

.menu-toggle span {
  display: block;
  height: 2px;
  margin: 7px 0;
  background: var(--ink);
}

.work-header,
.about-header {
  background: transparent;
}

.work-header .top-nav,
.about-header .top-nav {
  display: none;
}

.reference-page,
.reference-project {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--paper);
}

/* Home */
.figma-home {
  width: 100%;
  min-height: 100vh;
  padding: 92px 0 0;
  overflow: hidden;
}

.home-title {
  margin: 42px 0 0 64px;
  font-family: "Hachi Maru Pop", "Chalkboard SE", "Comic Sans MS", cursive;
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.calendar-preview {
  margin-top: 51px;
}

.calendar-shell {
  position: relative;
  width: min(61.9vw, 1188px);
  min-width: 720px;
  aspect-ratio: 3400 / 1850;
  margin: 0 auto;
}

.calendar-map {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.calendar-grid {
  position: absolute;
  /*
    The calendar background image contains transparent/empty edges.
    The real white calendar grid starts inside the image, not at inset: 0.
    These percentages are measured from cover-Calendar background map.webp
    so the CSS grid cells line up with the visible white grid lines.
  */
  left: 3.06%;
  right: 3.24%;
  top: 2.11%;
  bottom: 2.32%;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(5, 1fr);
  pointer-events: none;
}

.calendar-tile {
  position: relative;
  grid-column: var(--col);
  grid-row: var(--row);
  overflow: hidden;
  isolation: isolate;
}

.tile-image {
  position: absolute;
  z-index: 1;
  max-width: none;
  object-fit: contain;
  object-position: center;
  left: var(--img-left, 16%);
  top: var(--img-top, 16%);
  width: var(--img-width, 68%);
  height: var(--img-height, 68%);
}

/*
  The calendar cell itself is now aligned with the white grid.
  Images should NOT fill the whole cell by default. They sit inside the cell,
  scaled like the Figma cover reference.
*/
.calendar-tile.covered {
  overflow: hidden;
}

.calendar-tile.covered .tile-image {
  /*
    Closed blue-glass cells:
    use the same large image scale as opened cells. The image should feel
    close to filling the calendar cell, while keeping original proportions.
  */
  left: var(--img-left, -8%);
  top: var(--img-top, -8%);
  width: var(--img-width, 116%);
  height: var(--img-height, 116%);
  opacity: 0.32;
  filter: blur(0.85px) saturate(0.96) contrast(0.96);
}

/* A real glass plate effect over the underlying image. */
.calendar-tile.covered::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 1px solid rgba(150, 236, 255, 0.72);
  border-radius: 8px;
  background: rgba(228, 251, 255, 0.27);
  -webkit-backdrop-filter: blur(3.6px) saturate(1.08);
  backdrop-filter: blur(3.6px) saturate(1.08);
  box-shadow:
    inset 0 0 16px rgba(255, 255, 255, 0.58),
    inset 10px 12px 30px rgba(198, 239, 250, 0.42);
  pointer-events: none;
}

/*
  cover-Calendar cover.webp contains transparent margins. The actual visible
  blue cover is offset in the asset, so the image must be slightly larger than
  the cell. This keeps the visible glass border aligned with the white grid.
*/
.tile-cover {
  position: absolute;
  z-index: 3;
  left: -12.98%;
  top: -20.61%;
  width: 143.51%;
  height: 148.09%;
  max-width: none;
  object-fit: fill;
  opacity: 0.78;
  pointer-events: none;
}

/*
  Open glass stand: the object image sits scaled inside the cell, while the
  blue lid/legs can overflow. The lid also receives a blurred reflection of
  the image underneath through .open.stand::before.
*/
.calendar-tile.open.stand {
  overflow: visible;
}

.calendar-tile.open.stand .tile-image {
  /*
    Open glass-stand cells:
    unified with the covered-cell image size. The stand overlay stays above
    the image, while the image is large enough to visually fill the cell.
  */
  left: var(--img-left, -8%);
  top: var(--img-top, -8%);
  width: var(--img-width, 116%);
  height: var(--img-height, 116%);
  object-fit: contain;
  z-index: 2;
  opacity: 1;
}

.calendar-tile.open.stand .tile-image.fit-contain {
  left: var(--img-left, -8%);
  top: var(--img-top, -8%);
  width: var(--img-width, 116%);
  height: var(--img-height, 116%);
  object-fit: contain;
}

/* Blurred reflection visible on the opened blue glass lid. */
.calendar-tile.open.stand::before {
  content: "";
  position: absolute;
  z-index: 4;
  left: -19%;
  top: -15%;
  width: 138%;
  height: 38%;
  background-image: var(--tile-src);
  background-repeat: no-repeat;
  background-size: 72% 150%;
  background-position: center 46%;
  filter: blur(8px) saturate(1.08) contrast(0.9);
  opacity: 0.22;
  mix-blend-mode: multiply;
  clip-path: polygon(13% 12%, 87% 12%, 100% 78%, 0 78%);
  pointer-events: none;
}

/* Extra glass tint over the lid so the reflection feels inside the material. */
.calendar-tile.open.stand::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: -19%;
  top: -15%;
  width: 138%;
  height: 38%;
  background: rgba(224, 250, 255, 0.26);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  clip-path: polygon(13% 12%, 87% 12%, 100% 78%, 0 78%);
  pointer-events: none;
}

.tile-stand {
  position: absolute;
  z-index: 6;
  left: -31.76%;
  top: -20.61%;
  width: 171%;
  height: 148.09%;
  max-width: none;
  object-fit: fill;
  opacity: 0.92;
  pointer-events: none;
}

.calendar-tile.open.flat {
  overflow: hidden;
}

.calendar-tile.open.flat .tile-image {
  left: var(--img-left, -8%);
  top: var(--img-top, -8%);
  width: var(--img-width, 116%);
  height: var(--img-height, 116%);
  object-fit: contain;
  object-position: center;
}

.welcome-line {
  width: 100%;
  margin: 91px 0 0;
  padding: 0 73px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 38px;
  font-family: "Hachi Maru Pop", "Chalkboard SE", "Comic Sans MS", cursive;
  font-size: 26px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}


/* === HOME INTERACTION + NAV FIX === */
/* Use the navigation image at its own ratio; keep clickable overlays above it. */
.home-header {
  height: clamp(70px, 3.912vw, 86px);
  padding: 0;
  background: transparent;
  overflow: visible;
}

.home-header .nav-reference {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
}

.home-header .brand {
  position: absolute;
  z-index: auto;
  left: 50px;
  top: 5px;
  width: auto;
  height: auto;
  overflow: visible;
  color: #490303;
  font-family: "Hachi Maru Pop", "Chalkboard SE", "Comic Sans MS", cursive;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.03em;
  text-decoration: none;
  text-shadow: 1px 2px 3px rgba(73, 3, 3, 0.24);
  white-space: nowrap;
}

.home-header .top-nav {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: block;
  margin: 0;
  pointer-events: auto;
}

.home-header .top-nav a {
  position: absolute;
  top: 0;
  height: 100%;
  display: block;
  z-index: 26;
  overflow: visible;
  color: transparent;
  font-size: 0;
  pointer-events: auto;
}

.home-header .top-nav a:nth-child(1) { left: 38.2%; width: 14.8%; }
.home-header .top-nav a:nth-child(2) { left: 57.0%; width: 12.8%; }
.home-header .top-nav a:nth-child(3) { left: 72.0%; width: 16.8%; }

body:has(.contact-page) .site-header .brand,
.project-brand {
  position: absolute;
  z-index: 50;
  left: 50px;
  top: 5px;
  width: auto;
  height: auto;
  overflow: visible;
  color: #490303;
  font-family: "Hachi Maru Pop", "Chalkboard SE", "Comic Sans MS", cursive;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.03em;
  text-decoration: none;
  text-shadow: 1px 2px 3px rgba(73, 3, 3, 0.24);
  white-space: nowrap;
}

body:has(.contact-page) .site-header .brand span {
  display: none;
}

.project-brand {
  position: fixed;
}

/* Make the right icons area not block Works/Contact links. */
.menu-toggle {
  z-index: 31;
}

/* Calendar grid must receive click events. */
.calendar-grid {
  pointer-events: auto;
}

.calendar-tile {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
}

.calendar-tile.open,
.calendar-tile.is-open {
  overflow: visible;
}

.tile-image-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.tile-image-frame .tile-image {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: var(--img-fit, cover);
  object-position: var(--img-position, center center);
  transform: scale(var(--img-scale, 1));
  transform-origin: center center;
}

/* Closed state: image is visible but blurred through glass. */
.calendar-tile.covered .tile-image-frame {
  opacity: 0.48;
  filter: blur(1.6px) saturate(0.95) contrast(0.94);
}

/* Open state: image is clear. */
.calendar-tile.is-open .tile-image-frame,
.calendar-tile.open .tile-image-frame {
  opacity: 1;
  filter: none;
}

/* Keep both cover and stand in HTML. State controls which one is visible. */
.tile-cover,
.tile-stand {
  pointer-events: none;
}

.tile-cover {
  position: absolute;
  z-index: 3;
  left: -12.98%;
  top: -20.61%;
  width: 143.51%;
  height: 148.09%;
  max-width: none;
  object-fit: fill;
  opacity: 0.78;
}

.tile-stand {
  position: absolute;
  z-index: 6;
  left: -31.76%;
  top: -20.61%;
  width: 171%;
  height: 148.09%;
  max-width: none;
  object-fit: fill;
  opacity: 0.92;
}

.calendar-tile.is-open .tile-cover {
  opacity: 0;
  visibility: hidden;
}

.calendar-tile:not(.is-open) .tile-stand {
  opacity: 0;
  visibility: hidden;
}

.calendar-tile.is-open .tile-stand {
  opacity: 0.92;
  visibility: visible;
}

/* Real glass blur over closed cells. */
.calendar-tile.covered::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 1px solid rgba(150, 236, 255, 0.72);
  border-radius: 8px;
  background: rgba(228, 251, 255, 0.30);
  -webkit-backdrop-filter: blur(3.4px) saturate(1.08);
  backdrop-filter: blur(3.4px) saturate(1.08);
  box-shadow:
    inset 0 0 16px rgba(255, 255, 255, 0.58),
    inset 10px 12px 30px rgba(198, 239, 250, 0.42);
  pointer-events: none;
}

.calendar-tile.is-open::after {
  display: none;
}

/* Soft reflection on the opened glass lid. */
.calendar-tile.is-open::before {
  content: "";
  position: absolute;
  z-index: 4;
  left: -19%;
  top: -15%;
  width: 138%;
  height: 38%;
  background-image: var(--tile-src);
  background-repeat: no-repeat;
  background-size: 72% 150%;
  background-position: center 46%;
  filter: blur(8px) saturate(1.08) contrast(0.9);
  opacity: 0.18;
  mix-blend-mode: multiply;
  clip-path: polygon(13% 12%, 87% 12%, 100% 78%, 0 78%);
  pointer-events: none;
}

.tile-title {
  position: absolute;
  left: 50%;
  bottom: 9%;
  z-index: 8;
  transform: translateX(-50%);
  min-width: max-content;
  max-width: 92%;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 254, 246, 0.74);
  color: #490303;
  font-family: "Fredoka", "Trebuchet MS", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.1;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(73, 3, 3, 0.08);
}

.calendar-tile.is-open:hover .tile-title,
.calendar-tile.is-open:focus-visible .tile-title {
  opacity: 1;
  visibility: visible;
}

/* Bottom welcome line follows interaction spec. */
.welcome-line {
  font-family: "Hachi Maru Pop", "Chalkboard SE", "Comic Sans MS", cursive;
  font-size: 24px;
  font-weight: 400;
  color: #490303;
  letter-spacing: 0.04em;
}

.welcome-line span {
  display: inline-block;
  animation: welcome-sway 2.4s ease-in-out infinite alternate;
}

.welcome-line span:nth-child(even) {
  animation-delay: 0.35s;
}

@keyframes welcome-sway {
  from { transform: translateX(-3px) rotate(-0.4deg); }
  to { transform: translateX(3px) rotate(0.4deg); }
}

/* Works */
.works-reference {
  position: relative;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  background: #fffef6;
  padding: 0;
  isolation: isolate;
}

.works-reference h1 {
  position: absolute;
  left: 50%;
  top: 75.3%;
  z-index: 12;
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  color: rgba(82, 82, 91, 0.34);
  font-family: Poppins, Inter, Arial, sans-serif;
  font-size: clamp(1.45rem, 1.7vw, 2.05rem);
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  pointer-events: none;
}

.works-reference h1 span {
  display: inline-block;
  margin-top: 4px;
}

.works-instruction {
  position: absolute;
  z-index: 20;
  right: 6.25vw;
  top: 12.1vh;
  margin: 0;
  width: 26.6vw;
  min-width: 380px;
  color: #111;
  font-family: Poppins, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: clamp(18px, 1.18vw, 23px);
  font-weight: 500;
  line-height: 1.36;
  letter-spacing: 0;
}

.work-header {
  height: 0;
  min-height: 0;
  padding: 0;
  background: transparent;
  pointer-events: none;
}

.work-header::before,
.work-header::after {
  display: none;
}

.work-header .brand {
  position: fixed;
  z-index: 40;
  left: 2.85vw;
  top: 6.75vh;
  color: #490303;
  font-family: "Hachi Maru Pop", "Chalkboard SE", "Comic Sans MS", cursive;
  font-size: clamp(38px, 2.85vw, 56px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.03em;
  text-shadow: none;
  pointer-events: auto;
}

.work-header .top-nav,
.work-header .menu-toggle {
  display: none;
}

.works-disc {
  position: absolute;
  inset: 0;
  z-index: 5;
  transform: none;
  pointer-events: none;
}

.work-disc-item {
  position: absolute;
  z-index: var(--z, 5);
  display: block;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  transform: translate3d(-50%, -50%, 0) rotate(var(--r));
  transform-origin: center;
  pointer-events: auto;
}

.work-disc-item img {
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
}

.work-disc-item span {
  display: none;
}

.work-pos-1 {
  --x: 50.2%;
  --y: 35%;
  --w: 12.9vw;
  --r: 0deg;
  --z: 8;
}

.work-pos-2 {
  --x: 51%;
  --y: 136%;
  --w: 12.9vw;
  --r: 174deg;
  --z: 4;
}

.work-pos-3 {
  --x: 36%;
  --y: 130%;
  --w: 12.9vw;
  --r: 38deg;
  --z: 4;
}

.work-pos-4 {
  --x: 112%;
  --y: 124%;
  --w: 13.2vw;
  --r: 43deg;
  --z: 4;
}

.work-pos-5 {
  --x: 2.8%;
  --y: 101%;
  --w: 13.2vw;
  --r: 15deg;
  --z: 6;
}

.work-pos-6 {
  --x: 14.7%;
  --y: 65.5%;
  --w: 13.5vw;
  --r: -50deg;
  --z: 8;
}

.work-pos-7 {
  --x: 30.7%;
  --y: 43.6%;
  --w: 13.4vw;
  --r: -23deg;
  --z: 8;
}

.work-pos-8 {
  --x: 48%;
  --y: 139%;
  --w: 13.2vw;
  --r: 8deg;
  --z: 4;
}

.work-pos-9 {
  --x: -18%;
  --y: 118%;
  --w: 13.2vw;
  --r: -94deg;
  --z: 6;
}

.work-pos-10 {
  --x: 118%;
  --y: 112%;
  --w: 13.2vw;
  --r: 31deg;
  --z: 7;
}

.work-pos-11 {
  --x: 94.7%;
  --y: 99%;
  --w: 13.6vw;
  --r: -13deg;
  --z: 7;
}

.work-pos-12 {
  --x: 85.8%;
  --y: 61.3%;
  --w: 13.4vw;
  --r: 43deg;
  --z: 8;
}

.work-pos-13 {
  --x: 67.9%;
  --y: 41%;
  --w: 13.4vw;
  --r: 25deg;
  --z: 8;
}

.work-pos-14 {
  --x: 22%;
  --y: 127%;
  --w: 13.2vw;
  --r: -32deg;
  --z: 5;
}

.work-pos-15 {
  --x: 76%;
  --y: 131%;
  --w: 13.2vw;
  --r: -34deg;
  --z: 5;
}

.works-side-nav-panel {
  position: fixed !important;
  left: 24px !important;
  top: -35px !important;
  height: calc(100vh + 70px) !important;
  width: calc(41.40625vh + 29px) !important;
  aspect-ratio: 848 / 2048 !important;
  z-index: 180 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: none !important;
  transition: opacity 160ms ease, visibility 160ms ease !important;
  pointer-events: none !important;
  overflow: visible !important;
}

.works-side-nav-panel.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.works-side-nav-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
}

.works-side-icons {
  position: fixed !important;
  left: calc(24px + 6.73vh + 12px) !important;
  top: calc(88.35vh + 26px) !important;
  z-index: 260 !important;
  display: flex !important;
  align-items: center !important;
  gap: calc(1.4vh + 2px) !important;
  pointer-events: auto !important;
}

.works-side-icon {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
}

.works-side-icon img {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.works-side-icon:focus,
.works-side-icon:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.works-side-nav-open .works-side-icon img {
  opacity: 0 !important;
}

.works-side-nav-link {
  position: absolute !important;
  left: 13% !important;
  width: 35% !important;
  height: 3.4% !important;
  display: block !important;
  background: transparent !important;
  z-index: 3 !important;
}

.works-side-nav-link.nav-home { top: 19.5% !important; }
.works-side-nav-link.nav-about { top: 23.9% !important; }
.works-side-nav-link.nav-works { top: 28.3% !important; }
.works-side-nav-link.nav-contact { top: 32.7% !important; }

/* About */
.about-reference {
  padding-top: 70px;
}

.about-board {
  position: relative;
  width: 100%;
  min-height: 660px;
  margin: 0;
}

.about-portrait {
  position: absolute;
  left: 88px;
  top: 48px;
  width: 285px;
  margin: 0;
}

.about-portrait img {
  width: 100%;
  height: 378px;
  object-fit: cover;
}

.about-portrait figcaption {
  display: grid;
  gap: 2px;
  margin-top: 13px;
  color: #111;
  font-size: 0.85rem;
}

.about-text {
  position: absolute;
  left: 440px;
  top: 100px;
  width: 640px;
  color: #111;
  font-family: Poppins, Inter, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.34;
}

.about-floating-img {
  position: absolute;
}

.about-floating-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.about-float-1 { left: 455px; top: 382px; width: 118px; height: 118px; }
.about-float-2 { left: 620px; top: 405px; width: 152px; height: 152px; transform: rotate(5deg); }
.about-float-3 { left: 760px; top: 438px; width: 92px; height: 92px; }
.about-float-4 { left: 850px; top: 464px; width: 132px; height: 132px; }
.about-float-5 { left: 1010px; top: 440px; width: 114px; height: 114px; }
.about-float-6 { left: 1125px; top: 465px; width: 108px; height: 108px; }
.about-pin { position: absolute; left: 500px; top: 520px; width: 30px; opacity: 0.72; }

/* Shared project artboards */
.reference-project {
  background: var(--paper);
}

.project-board {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  padding: 6vh 4vw;
}

.project-label {
  position: absolute;
  left: 4vw;
  top: 8vh;
  display: grid;
  gap: 30px;
  font-size: 1.25rem;
  color: var(--ink);
}

.project-label strong {
  color: #111;
  font-size: 1.2rem;
}

.project-notes {
  position: absolute;
  left: 4vw;
  top: 25vh;
  width: 34vw;
  max-width: 560px;
  color: var(--ink);
}

.project-notes h1,
.project-notes h2 {
  margin: 0 0 34px;
  font-size: 1.45rem;
  font-weight: 500;
}

.project-notes p {
  font-size: clamp(1.05rem, 1.4vw, 1.45rem);
  line-height: 1.24;
  margin: 0 0 24px;
}

.corner-nav {
  position: fixed;
  left: 32px;
  bottom: 30px;
  z-index: 80;
  width: 82px;
  height: 40px;
}

.corner-nav::before,
.corner-nav::after {
  content: "";
  position: absolute;
  bottom: 0;
  background-size: contain;
  background-repeat: no-repeat;
}

.corner-nav::before {
  left: 0;
  width: 35px;
  height: 38px;
  background-image: url("../assets/project-cover/cover-Side%20navigation%20bar-icon-search.png");
}

.corner-nav::after {
  right: 0;
  width: 34px;
  height: 34px;
  background-image: url("../assets/project-cover/cover-Side%20navigation%20bar-icon-%20menu.png");
}

/* Project 1 */
.saisen-board-one {
  background-image: linear-gradient(rgba(255, 254, 246, 0.9), rgba(255, 254, 246, 0.9)), url("../assets/background/background-%20project1-1.webp");
  background-position: right top;
  background-size: 42vw auto;
}

.saisen-main-object {
  position: absolute;
  left: 37vw;
  top: 16vh;
  width: 29vw;
  max-height: 78vh;
  object-fit: contain;
}

.saisen-soft-bg {
  position: absolute;
  right: 18vw;
  top: 9vh;
  width: 23vw;
  opacity: 0.18;
  transform: rotate(34deg);
}

.saisen-side-img {
  position: absolute;
  width: 13.3vw;
  height: 18vw;
  object-fit: cover;
}

.saisen-side-img.img-a { left: 71vw; top: 39vh; }
.saisen-side-img.img-b { left: 83.2vw; top: 39vh; }
.saisen-side-img.img-c { left: 95.4vw; top: 39vh; }

.saisen-board-two {
  background-image:
    linear-gradient(rgba(255, 254, 246, 0.78), rgba(255, 254, 246, 0.78)),
    url("../assets/background/background-%20project1-2.webp");
  background-size: 100% auto;
  background-position: center;
}

.web-ui {
  position: absolute;
  object-fit: contain;
  opacity: 0.68;
  filter: saturate(0.2);
}

.web-small { left: 31%; top: 8%; width: 31vw; }
.web-large { left: 31%; top: 41%; width: 54vw; }

.saisen-board-three {
  text-align: center;
}

.saisen-board-three h2 {
  margin-top: 7vh;
  font-family: Georgia, serif;
  font-size: clamp(1.8rem, 2.4vw, 2.7rem);
}

.book-subtitle {
  font-family: Georgia, serif;
  font-size: clamp(1.25rem, 1.7vw, 1.9rem);
}

.book-hands {
  position: absolute;
  left: 19%;
  top: 15%;
  width: 62%;
  opacity: 0.22;
}

.saisen-book-cover {
  position: absolute;
  left: 42%;
  top: 34%;
  width: 22vw;
  aspect-ratio: 0.78;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 20px 26px rgba(73, 3, 3, 0.18);
  transform: perspective(900px) rotateX(12deg) rotateZ(12deg);
}

.book-note {
  position: absolute;
  right: 8vw;
  top: 34vh;
  width: 27vw;
  text-align: left;
  color: #111;
  font-size: 1.15rem;
  line-height: 1.65;
}

.open-book-link {
  position: absolute;
  left: 50%;
  bottom: 10vh;
  transform: translateX(-50%);
  font-family: Georgia, serif;
  font-size: 1rem;
}

.saisen-board-four {
  background-image: linear-gradient(rgba(255, 254, 246, 0.7), rgba(255, 254, 246, 0.7)), url("../assets/background/background-%20project1-4.webp");
  background-position: right bottom;
  background-size: 40vw auto;
}

.curved-line {
  position: absolute;
  color: #111;
  font-family: Georgia, serif;
  font-size: 1.55rem;
  letter-spacing: 0.04em;
}

.line-one { left: 2vw; top: 15vh; transform: rotate(-34deg); }
.line-two { left: 4vw; bottom: 12vh; transform: rotate(25deg); }
.workshop-cover { position: absolute; left: 6.5vw; top: 20vh; width: 26vw; height: 35vh; object-fit: cover; }
.workshop-note { position: absolute; left: 12vw; top: 37vh; width: 27vw; text-align: center; color: var(--ink); font-family: Georgia, serif; }
.workshop-note h2 { margin: 0; font-size: 2rem; color: white; }
.workshop-note p { margin: 4px 0 22px; color: white; font-size: 1.45rem; }
.workshop-note small { font-size: 1rem; }
.blue-intro { position: absolute; left: 27vw; top: 41vh; width: 42vw; min-height: 24vh; padding: 3vh 4vw; background: rgba(220, 248, 255, 0.72); font-family: Georgia, serif; font-size: 1.3rem; line-height: 1.28; }
.workshop-columns { position: absolute; right: 7vw; top: 5vh; display: grid; grid-template-columns: repeat(2, 8.7vw); gap: 0; }
.workshop-columns img { width: 8.7vw; height: 18vh; object-fit: cover; }

/* Project 2 */
.dad-tester-object { position: absolute; left: 13vw; bottom: -2vh; width: 24vw; max-height: 58vh; object-fit: contain; }
.dad-main-photo { position: absolute; left: 48vw; top: 8vh; width: 48vw; height: 48vh; object-fit: cover; }
.dad-detail { position: absolute; top: 59vh; height: 23vh; object-fit: cover; }
.dad-detail-a { left: 48vw; width: 19vw; }
.dad-detail-b { left: 68vw; width: 19vw; }
.dad-detail-c { left: 88vw; width: 8vw; }
.arrow-left,
.arrow-right {
  position: absolute;
  top: 70vh;
  width: 34px;
  height: 34px;
  border-left: 6px solid rgba(73, 3, 3, 0.4);
  border-bottom: 6px solid rgba(73, 3, 3, 0.4);
}
.arrow-left { left: 44vw; transform: rotate(45deg); }
.arrow-right { right: 4vw; transform: rotate(-135deg); }
.bestdad-board-two figure { position: absolute; left: 16vw; top: 10vh; width: 68vw; margin: 0; }
.bestdad-board-two figure img { width: 100%; height: 48vh; object-fit: cover; filter: saturate(0.75); }
.bestdad-board-two figcaption { position: absolute; left: 30%; top: 42%; color: #9c2230; font-family: Georgia, serif; font-size: 1.45rem; }
.video-link { position: absolute; left: 50%; top: 63vh; transform: translateX(-50%); color: var(--ink); }

/* Project 3 */
.air-board-one {
  min-height: 125vh;
}
.air-hero-image {
  position: absolute;
  left: 203px;
  top: 177px;
  width: 1226px;
  margin: 0;
}
.air-hero-image img {
  width: 100%;
  height: 684px;
  object-fit: cover;
}
.air-hero-image figcaption {
  position: absolute;
  right: 12%;
  bottom: 12%;
  color: rgba(255, 254, 246, 0.72);
  font-size: clamp(3rem, 5vw, 6rem);
  font-weight: 600;
}
.air-design-notes {
  position: absolute;
  left: 206px;
  top: 940px;
  width: 760px;
  color: var(--ink);
}
.air-design-notes h1 { font-size: 1.1rem; margin-bottom: 32px; }
.air-design-notes p { font-size: 1.02rem; line-height: 1.15; }
.air-bottom-row {
  position: absolute;
  left: 206px;
  right: 204px;
  top: 1220px;
  bottom: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1vw;
}
.air-bottom-row img { width: 100%; height: 29vh; object-fit: cover; }
.air-board-two { min-height: 100vh; }
.air-book-main { position: absolute; left: 30vw; top: 9vh; width: 42vw; height: 52vh; object-fit: cover; opacity: 0.46; filter: saturate(0.4); }
.air-book-strip { position: absolute; left: 8vw; right: 8vw; bottom: 12vh; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; align-items: end; }
.air-book-strip img { width: 100%; height: 17vh; object-fit: cover; opacity: 0.72; }

/* Project 4 */
.trace-board-one,
.trace-board-two,
.trace-board-three {
  color: var(--ink);
}
.trace-large-photo { position: absolute; left: 7vw; top: 15vh; width: 43vw; height: 42vh; object-fit: cover; }
.trace-notes { position: absolute; left: 13vw; top: 62vh; width: 39vw; text-align: center; }
.trace-notes h1 { font-size: 1.6rem; font-weight: 500; }
.trace-notes p { font-size: 1.25rem; line-height: 1.28; }
.trace-bg-soft { position: absolute; opacity: 0.18; object-fit: cover; }
.trace-bg-soft.bg-a { left: 44vw; top: 0; width: 21vw; height: 52vh; }
.trace-small-img { position: absolute; object-fit: cover; }
.trace-img-a { left: 55vw; top: 53vh; width: 17vw; height: 16vh; }
.trace-img-b { right: 7vw; top: 37vh; width: 16vw; height: 22vh; }
.trace-img-c { right: 10vw; bottom: 8vh; width: 16vw; height: 23vh; opacity: 0.32; }
.trace-poem { position: absolute; color: var(--soft-gray); font-weight: 700; text-align: center; line-height: 2.1; }
.poem-a { left: 50vw; top: 17vh; width: 28vw; }
.poem-b { right: 20vw; bottom: 9vh; width: 30vw; }
.poem-c { left: 11vw; top: 7vh; width: 33vw; }
.trace-bg-soft.bg-b { left: 46vw; top: 0; width: 23vw; height: 53vh; }
.trace-img-d { right: 14vw; top: 22vh; width: 9vw; height: 22vh; }
.trace-img-e { right: 7vw; bottom: 12vh; width: 25vw; height: 30vh; opacity: 0.22; }
.poem-d { right: 14vw; top: 54vh; width: 35vw; }
.trace-video-still { position: absolute; left: 15vw; top: 18vh; width: 44vw; margin: 0; }
.trace-video-still img { width: 100%; height: 48vh; object-fit: cover; }
.trace-video-still a { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 48px; height: 48px; border: 3px solid var(--ink); border-radius: 8px; background: rgba(255, 254, 246, 0.35); }
.trace-video-text { position: absolute; right: 12vw; top: 24vh; width: 32vw; }
.trace-video-text p { font-size: 1.12rem; line-height: 1.55; font-weight: 600; }

/* Contact */
.contact-page {
  display: grid;
  place-items: center;
  min-height: 100vh;
}
.contact-panel {
  text-align: center;
  width: min(720px, 86vw);
}
.contact-panel h1 {
  font-family: Fredoka, "Trebuchet MS", "Comic Sans MS", Arial, sans-serif;
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 400;
}
.contact-links {
  display: grid;
  gap: 18px;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
}

@media (max-width: 900px) {
  .site-header {
    height: auto;
    min-height: 64px;
  }

  .menu-toggle {
    display: block;
  }

  .top-nav,
  .work-header .top-nav,
  .about-header .top-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 64px;
    display: none;
    padding: 18px 24px 24px;
    background: rgba(245, 253, 251, 0.96);
  }

  .top-nav.is-open {
    display: grid;
    gap: 18px;
  }

  .calendar-shell {
    min-width: 0;
    width: 96vw;
  }

  .home-title {
    margin-left: 22px;
  }

  .disc-image {
    position: static;
    transform: none;
    width: 100%;
  }

  .works-disc {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 140px 18px 80px;
  }

  .works-reference h1 {
    top: 86px;
    bottom: auto;
    font-size: 1.4rem;
  }

  .about-board {
    min-height: 0;
    padding: 88px 18px 50px;
  }

  .about-portrait,
  .about-text,
  .about-floating-img,
  .about-pin {
    position: static;
  }

  .about-portrait {
    width: min(340px, 100%);
    margin-bottom: 28px;
  }

  .about-text {
    width: 100%;
  }

  .about-floating-img {
    display: inline-block;
    width: 30%;
    height: 110px;
  }

  .project-board {
    min-height: auto;
    padding: 80px 18px 70px;
  }

  .project-label,
  .project-notes,
  .saisen-main-object,
  .saisen-soft-bg,
  .saisen-side-img,
  .web-ui,
  .book-hands,
  .saisen-book-cover,
  .book-note,
  .open-book-link,
  .curved-line,
  .workshop-cover,
  .workshop-note,
  .blue-intro,
  .workshop-columns,
  .dad-tester-object,
  .dad-main-photo,
  .dad-detail,
  .bestdad-board-two figure,
  .video-link,
  .air-hero-image,
  .air-design-notes,
  .air-bottom-row,
  .air-book-main,
  .air-book-strip,
  .trace-large-photo,
  .trace-notes,
  .trace-bg-soft,
  .trace-small-img,
  .trace-poem,
  .trace-video-still,
  .trace-video-text {
    position: static;
    width: 100%;
    height: auto;
    transform: none;
    margin: 0 0 24px;
  }

  .project-notes,
  .air-design-notes,
  .trace-notes,
  .trace-video-text {
    max-width: none;
    text-align: left;
  }

  .air-bottom-row,
  .air-book-strip,
  .workshop-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .corner-nav {
    position: static;
    display: block;
    margin: 20px;
  }
}



/* === STRICT REAL PNG GLASS ONLY ===
   Requirement:
   - Closed tiles use ONLY `cover-Calendar cover.webp`
   - Opened tiles use ONLY `cover-Calendar stand.webp`
   - No extra CSS blue border, no extra glass material layer, no pseudo lid.
*/

/* Remove any extra generated glass layers. */
.tile-glass-material,
.calendar-tile.covered::after,
.calendar-tile.is-open::after,
.calendar-tile.open::after,
.calendar-tile.is-open::before,
.calendar-tile.open::before {
  display: none !important;
  content: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* The real closed cover PNG. */
.tile-cover {
  position: absolute;
  z-index: 5;
  left: -12.98%;
  top: -20.61%;
  width: 143.51%;
  height: 148.09%;
  max-width: none;
  object-fit: fill;
  opacity: 1 !important;
  visibility: visible;
  pointer-events: none;
  filter: none !important;
}

/* The real opened stand PNG. */
.tile-stand {
  position: absolute;
  z-index: 5;
  left: -31.76%;
  top: -20.61%;
  width: 171%;
  height: 148.09%;
  max-width: none;
  object-fit: fill;
  opacity: 1 !important;
  visibility: visible;
  pointer-events: none;
  filter: none !important;
}

/* State control:
   closed = cover only
   open = stand only */
.calendar-tile.covered .tile-cover,
.calendar-tile:not(.is-open):not(.open) .tile-cover {
  opacity: 1 !important;
  visibility: visible !important;
}

.calendar-tile.covered .tile-stand,
.calendar-tile:not(.is-open):not(.open) .tile-stand {
  opacity: 0 !important;
  visibility: hidden !important;
}

.calendar-tile.is-open .tile-cover,
.calendar-tile.open .tile-cover {
  opacity: 0 !important;
  visibility: hidden !important;
}

.calendar-tile.is-open .tile-stand,
.calendar-tile.open .tile-stand {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Keep image inside the original white cell. */
.tile-image-frame {
  overflow: hidden !important;
}

/* Closed state: let the image show through the real cover PNG only.
   A light blur on the image itself keeps the frosted feeling without adding blue borders. */
.calendar-tile.covered .tile-image-frame {
  opacity: 0.58 !important;
  filter: blur(2px) saturate(0.9) contrast(0.92) !important;
}

/* Open state: image is clear; the opened stand PNG is the only glass layer above it. */
.calendar-tile.is-open .tile-image-frame,
.calendar-tile.open .tile-image-frame {
  opacity: 1 !important;
  filter: none !important;
}

/* Keep Airbet1 size smaller. */
.calendar-tile[style*="cover-%20connect%20picture-airbet1.webp"] {
  --img-fit: contain !important;
  --img-scale: 0.72 !important;
  --img-position: center center !important;
}

.calendar-tile[style*="cover-%20connect%20picture-airbet1.webp"] .tile-image-frame .tile-image,
.calendar-tile[style*="cover- connect picture-airbet1.webp"] .tile-image-frame .tile-image {
  object-fit: contain !important;
  object-position: center center !important;
  transform: scale(0.72) !important;
}



/* === OPEN LID STAND-SIZED GAUSSIAN BLUR FIX ===
   The blur layer must be the same size/position as the opened stand image,
   not a short horizontal strip.

   Closed state still uses:
   assets/project-cover/cover-Calendar cover.webp

   Opened state still uses:
   assets/project-cover/cover-Calendar stand.webp
*/

/* Disable pseudo glass layers that may create shifted strips or blue borders. */
.calendar-tile.is-open::after,
.calendar-tile.open::after,
.calendar-tile.is-open::before,
.calendar-tile.open::before,
.tile-glass-material {
  display: none !important;
  content: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* The blur layer now has EXACTLY the same size and position as .tile-stand. */
.tile-open-lid-blur {
  display: none;
  position: absolute;
  z-index: 4;
  left: -31.76%;
  top: -20.61%;
  width: 171%;
  height: 148.09%;
  pointer-events: none;
  overflow: hidden;

  /* Same shape as the real opened stand PNG. */
  -webkit-mask-image: url("../assets/project-cover/cover-Calendar%20stand.webp");
  mask-image: url("../assets/project-cover/cover-Calendar%20stand.webp");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  background: rgba(224, 249, 255, 0.34);
}

/* The cloned image is mapped back into the original white cell area.
   This keeps the blurred content aligned with the clear image underneath,
   while the blur layer itself remains the same size as cover-Calendar stand.webp. */
.tile-open-lid-blur .tile-open-lid-img {
  position: absolute;
  left: 18.57%;
  top: 13.92%;
  width: 58.48%;
  height: 67.53%;
  max-width: none;
  object-fit: var(--img-fit, cover);
  object-position: var(--img-position, center center);
  transform: scale(var(--img-scale, 1));
  transform-origin: center center;

  /* Gaussian blur effect. */
  filter: blur(24px) saturate(0.86) contrast(0.84);
  opacity: 0.96;
}

/* Milky tint across the same stand-sized shape. */
.tile-open-lid-blur::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(224, 249, 255, 0.42);
  pointer-events: none;
}

/* Show the stand-sized blur only when tile is open. */
.calendar-tile.is-open .tile-open-lid-blur,
.calendar-tile.open .tile-open-lid-blur {
  display: block;
  visibility: visible;
}

/* Real opened stand image remains on top. */
.calendar-tile.is-open .tile-stand,
.calendar-tile.open .tile-stand {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 6 !important;
  filter: none !important;
}

/* Strict state control:
   closed = cover.webp only
   open = stand.webp + stand-sized Gaussian blur */
.calendar-tile.covered .tile-cover,
.calendar-tile:not(.is-open):not(.open) .tile-cover {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 5 !important;
}

.calendar-tile.covered .tile-stand,
.calendar-tile:not(.is-open):not(.open) .tile-stand,
.calendar-tile.covered .tile-open-lid-blur,
.calendar-tile:not(.is-open):not(.open) .tile-open-lid-blur {
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
}

.calendar-tile.is-open .tile-cover,
.calendar-tile.open .tile-cover {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Closed cover: real cover image, with underlying image slightly blurred. */
.calendar-tile.covered .tile-image-frame {
  opacity: 0.58 !important;
  filter: blur(2px) saturate(0.9) contrast(0.92) !important;
}

/* Open image remains clear except where the stand-sized blur/stand sits above it. */
.calendar-tile.is-open .tile-image-frame,
.calendar-tile.open .tile-image-frame {
  opacity: 1 !important;
  filter: none !important;
}

/* Keep the actual visible images clipped inside the original calendar cell. */
.tile-image-frame {
  overflow: hidden !important;
}

/* Keep Airbet1 smaller. */
.calendar-tile[style*="cover-%20connect%20picture-airbet1.webp"] {
  --img-fit: contain !important;
  --img-scale: 0.72 !important;
  --img-position: center center !important;
}

.calendar-tile[style*="cover-%20connect%20picture-airbet1.webp"] .tile-image-frame .tile-image,
.calendar-tile[style*="cover-%20connect%20picture-airbet1.webp"] .tile-open-lid-img,
.calendar-tile[style*="cover- connect picture-airbet1.webp"] .tile-image-frame .tile-image,
.calendar-tile[style*="cover- connect picture-airbet1.webp"] .tile-open-lid-img {
  object-fit: contain !important;
  object-position: center center !important;
  transform: scale(0.72) !important;
}



/* === HOME PORTFOLIO TITLE SIZE FIX ===
   Reduce the "PORTFOLIO" title size so it matches the softer homepage proportion.
   This only affects the homepage title, not the navigation. */
.home-title {
  font-family: "Hachi Maru Pop", "Chalkboard SE", "Comic Sans MS", cursive !important;
  font-size: clamp(34px, 2.45vw, 46px) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.02em !important;
  margin: 38px 0 0 64px !important;
}



/* === ABOUT FINAL IMAGE VISUAL SIZE + ICON POSITION FIX ===
   This is the final About page override.

   Typography follows the user's project file:
   - About body: Poppins / 20px / #490303
   - About tags/caption: Poppins / 16px / #490303

   The 6 floating images have different transparent margins in the source files.
   Therefore, each image needs a different internal scale to make the visible
   cut-out subject look visually consistent.
*/

.about-reference {
  padding-top: 70px;
  color: #490303 !important;
  background: var(--paper);
}

.about-board {
  position: relative;
  width: 100%;
  min-height: 720px;
  margin: 0;
  color: #490303 !important;
}

.about-portrait {
  position: absolute;
  left: 88px;
  top: 48px;
  width: 285px;
  margin: 0;
  color: #490303 !important;
}

.about-portrait img {
  display: block !important;
  width: 100%;
  height: 378px;
  object-fit: cover;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Keep font exactly as required by INTERACTION_SPEC.md. */
.about-portrait figcaption {
  display: grid;
  gap: 2px;
  margin-top: 13px;
  color: #490303 !important;
  font-family: Poppins, Inter, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

.about-text {
  position: absolute;
  left: 440px;
  top: 100px;
  width: 640px;
  color: #490303 !important;
  font-family: Poppins, Inter, Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1.42 !important;
  letter-spacing: 0 !important;
}

.about-text p {
  margin: 0 0 16px;
  color: #490303 !important;
}

/* Unified floating image containers. */
.about-floating-img {
  position: absolute;
  display: block !important;
  width: 190px !important;
  height: 190px !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 5;
  overflow: visible !important;
}

.about-floating-img img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform-origin: center center;
}

/* Visual subject-size normalization:
   These scale values compensate for different transparent margins in each source image. */
.about-float-1 img { transform: scale(1.44) !important; }
.about-float-2 img { transform: scale(1.47) !important; }
.about-float-3 img { transform: scale(0.92) !important; }
.about-float-4 img { transform: scale(1.07) !important; }
.about-float-5 img { transform: scale(2.41) !important; }
.about-float-6 img { transform: scale(2.03) !important; }

/* Positions follow the About reference composition, adjusted for larger visual size. */
.about-float-1 { left: 52px !important; top: 108px !important; }
.about-float-2 { left: 370px !important; top: 185px !important; transform: rotate(-3deg); }
.about-float-3 { left: 615px !important; top: 145px !important; }
.about-float-4 { left: 850px !important; top: 255px !important; }
.about-float-5 { left: 1185px !important; top: 195px !important; }
.about-float-6 { left: 1030px !important; top: 360px !important; }

/* Five icons: placed where the reference icon sits, arranged in one equal-spaced row. */
.about-pin,
.about-pin-row + .about-pin {
  display: none !important;
}

.about-pin-row {
  position: absolute;
  left: 74px;
  top: 300px;
  display: flex !important;
  align-items: center;
  gap: 12px;
  z-index: 6;
  opacity: 1 !important;
  visibility: visible !important;
}

.about-pin-row img {
  display: block !important;
  width: 52px !important;
  height: auto !important;
  flex: 0 0 auto;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Header text color only; do not override About body sizes elsewhere. */
.about-header .brand,
.about-header .top-nav a {
  color: #490303 !important;
}

/* Responsive fallback */
@media (max-width: 900px) {
  .about-board {
    min-height: 0;
    padding: 88px 18px 50px;
  }

  .about-portrait,
  .about-text,
  .about-floating-img,
  .about-pin-row {
    position: static;
  }

  .about-portrait {
    width: min(340px, 100%);
    margin-bottom: 28px;
  }

  .about-text {
    width: 100%;
    font-size: 18px !important;
  }

  .about-portrait figcaption {
    font-size: 14px !important;
  }

  .about-floating-img {
    display: inline-block !important;
    width: 160px !important;
    height: 160px !important;
    margin: 8px;
  }

  .about-pin-row {
    display: flex !important;
    gap: 10px;
    margin: 20px 0;
  }

  .about-pin-row img {
    width: 46px !important;
  }
}



/* === ABOUT STRICT FINAL FIX: ICON POSITION + FONTS ===
   User-requested strict fixes:
   1. Put the 5 icons in the red-circled lower row area.
   2. Correct Miao logo font.
   3. Correct About body font / size.
   4. Correct tag font / color / size.

   Source file rules:
   - Navigation: Fredoka / 24px / #490303 / drop shadow
   - About body: Poppins / 20px / #490303
   - About tags: Poppins / 16px / #490303
*/

/* 2. Miao logo / top navigation font */
.about-header .brand,
.about-header .top-nav a,
.about-header .menu-toggle {
  color: #490303 !important;
  font-family: "Fredoka", Poppins, Inter, Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow: 1.5px 2px 2px rgba(73, 3, 3, 0.28) !important;
}

.about-header .brand {
  position: absolute !important;
  left: 50px !important;
  top: 5px !important;
  width: auto !important;
  height: auto !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

/* 3. About body text: exact required font/color/size */
.about-text,
.about-text p,
.about-text span,
.about-text div {
  color: #490303 !important;
  font-family: "Poppins", Inter, Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1.42 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

.about-text p {
  margin: 0 0 16px !important;
}

/* 4. Tags / caption under portrait: exact required font/color/size */
.about-portrait figcaption,
.about-portrait figcaption span {
  color: #490303 !important;
  font-family: "Poppins", Inter, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

/* 1. Five icons in the red-circled lower row area */
.about-pin,
.about-pin-row + .about-pin {
  display: none !important;
}

.about-pin-row {
  position: absolute !important;
  left: 500px !important;
  top: 548px !important;
  width: 760px !important;
  height: 112px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0 !important;
  z-index: 20 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

.about-pin-row img {
  display: block !important;
  width: 52px !important;
  height: auto !important;
  flex: 0 0 auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Keep About page image visibility from previous fixes */
.about-floating-img,
.about-floating-img img,
.about-portrait img {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Responsive fallback keeps the same font family but adapts sizes slightly */
@media (max-width: 900px) {
  .about-header .brand,
  .about-header .top-nav a {
    font-family: "Fredoka", Poppins, Inter, Arial, sans-serif !important;
    font-size: 24px !important;
    color: #490303 !important;
  }

  .about-text,
  .about-text p {
    font-family: "Poppins", Inter, Arial, sans-serif !important;
    font-size: 18px !important;
    color: #490303 !important;
  }

  .about-portrait figcaption,
  .about-portrait figcaption span {
    font-family: "Poppins", Inter, Arial, sans-serif !important;
    font-size: 14px !important;
    color: #490303 !important;
  }

  .about-pin-row {
    position: static !important;
    width: min(100%, 360px) !important;
    height: auto !important;
    margin: 20px 0 !important;
    justify-content: space-between !important;
  }

  .about-pin-row img {
    width: 46px !important;
  }
}



/* === ABOUT FINAL FONT COLOR SIZE ICON OVERRIDE ===
   Fixes requested:
   1. Body text was too large and wrong-looking.
   2. Tags appeared black; force them to #490303.
   3. Icon row was too large and too long.
*/

/* Body copy: smaller, Poppins, dark red-brown */
.about-text,
.about-text p,
.about-text span,
.about-text div {
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  color: #490303 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

.about-text p {
  margin: 0 0 14px !important;
}

/* Tags/caption: definitely not black */
.about-portrait figcaption,
.about-portrait figcaption span,
.about-portrait figcaption * {
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  color: #490303 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

/* Keep Miao as navigation style, but do not affect body */
.about-header .brand {
  font-family: "Fredoka", Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: #490303 !important;
  text-shadow: 1.5px 2px 2px rgba(73, 3, 3, 0.28) !important;
}

/* Icon row: smaller and shorter */
.about-pin-row {
  position: absolute !important;
  left: 540px !important;
  top: 570px !important;
  width: 540px !important;
  height: 70px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0 !important;
  z-index: 20 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

.about-pin-row img {
  display: block !important;
  width: 34px !important;
  height: auto !important;
  flex: 0 0 auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hide any old single icon */
.about-pin {
  display: none !important;
}

/* Mobile fallback */
@media (max-width: 900px) {
  .about-text,
  .about-text p {
    font-size: 14px !important;
  }

  .about-portrait figcaption,
  .about-portrait figcaption span {
    font-size: 12px !important;
  }

  .about-pin-row {
    position: static !important;
    width: min(100%, 300px) !important;
    height: auto !important;
    margin: 18px 0 !important;
  }

  .about-pin-row img {
    width: 30px !important;
  }
}



/* === ABOUT TAG COLOR + ICON POSITION FINAL FIX ===
   User requested:
   1. Tag color is still appearing black; force it to #490303 and make it smaller.
   2. Icon size is correct, but the row is too low; move it upward to align with the tag area.
   3. Icon row right edge must not exceed the About body text right edge.
*/

/* Force tag/caption color and size with highest specificity.
   -webkit-text-fill-color is included because some browser/font rules can keep text visually black. */
html body .about-reference .about-board .about-portrait figcaption,
html body .about-reference .about-board .about-portrait figcaption span,
html body .about-reference .about-board .about-portrait figcaption * {
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 10px !important;
  line-height: 1.42 !important;
  font-weight: 400 !important;
  color: #490303 !important;
  -webkit-text-fill-color: #490303 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

/* Keep body text from being affected by the tag override. */
html body .about-reference .about-board .about-text,
html body .about-reference .about-board .about-text p {
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  color: #490303 !important;
  -webkit-text-fill-color: #490303 !important;
}

/* Move icon row up and keep it inside the text area's right boundary.
   Body text area right edge is about 1080px, so:
   left 540px + width 500px = 1040px, safely within it. */
html body .about-reference .about-board .about-pin-row {
  position: absolute !important;
  left: 540px !important;
  top: 515px !important;
  width: 500px !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0 !important;
  z-index: 20 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

html body .about-reference .about-board .about-pin-row img {
  display: block !important;
  width: 34px !important;
  height: auto !important;
  flex: 0 0 auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Keep old single icon hidden. */
html body .about-reference .about-board .about-pin {
  display: none !important;
}



/* === ABOUT ICON RED BOX + BLACK TAG FINAL FIX ===
   User requested:
   1. Move the five icons into the red-marked rectangle area.
   2. Change tag/caption text to black.
*/

/* 1. Put the five icons inside the red-circled area.
   The icon size stays 34px. */
html body .about-reference .about-board .about-pin-row {
  position: absolute !important;
  left: 430px !important;
  top: 405px !important;
  width: 700px !important;
  height: 70px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0 !important;
  z-index: 30 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

html body .about-reference .about-board .about-pin-row img {
  display: block !important;
  width: 34px !important;
  height: auto !important;
  flex: 0 0 auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hide any leftover single pin icon. */
html body .about-reference .about-board .about-pin {
  display: none !important;
}

/* 2. Tags/caption: force black, including browser text-fill override. */
html body .about-reference .about-board .about-portrait figcaption,
html body .about-reference .about-board .about-portrait figcaption span,
html body .about-reference .about-board .about-portrait figcaption * {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.42 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}



/* === ABOUT ICON ROW DOWN ONLY FIX ===
   Only move the icon row downward.
   Do not change left, width, gap, justify-content, or icon size. */
html body .about-reference .about-board .about-pin-row {
  top: 430px !important;
}



/* === ABOUT ICON ROW WIDTH ONLY FIX ===
   Keep the leftmost icon position unchanged.
   Keep vertical position unchanged.
   Keep icon size unchanged.
   Only shorten the row width, so the rightmost icon moves left and spacing is reduced. */
html body .about-reference .about-board .about-pin-row {
  left: 430px !important;
  top: 430px !important;
  width: 560px !important;
  height: 70px !important;
  justify-content: space-between !important;
}

html body .about-reference .about-board .about-pin-row img {
  width: 34px !important;
  height: auto !important;
}



/* === ABOUT MIAO FONT + SIDE ICONS FIX ===
   1. Miao uses the same font family as the homepage Miao, but keeps the About page size.
   2. About side navigation search/menu icons are placed at the lower-left corner.
*/

/* Same as homepage Miao: Hachi Maru Pop. Keep About page size at 24px. */
html body .about-header .brand {
  font-family: "Hachi Maru Pop", "Chalkboard SE", "Comic Sans MS", cursive !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: #490303 !important;
  letter-spacing: 0.03em !important;
  text-shadow: 1px 2px 3px rgba(73, 3, 3, 0.24) !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

/* Bottom-left side icons for About page */
.about-side-icons {
  position: fixed;
  left: 38px;
  bottom: 34px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 18px;
  pointer-events: auto;
}

.about-side-icon {
  display: block;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.about-side-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(1px 2px 2px rgba(73, 3, 3, 0.24));
}

@media (max-width: 900px) {
  .about-side-icons {
    left: 24px;
    bottom: 24px;
    gap: 14px;
  }

  .about-side-icon {
    width: 30px;
    height: 30px;
  }
}



/* === ABOUT FINAL SIDE NAVIGATION DETAIL FIX ===
   User requests:
   1. Remove the upper-right search/menu icons on About page.
   2. Make the lower-left About side icons smaller.
   3. Clicking the menu icon opens Aboutme-Side navigation bar.webp.
   4. Side navigation bar keeps its original ratio.
   5. Clicking text areas on the side navigation jumps to pages.
*/

/* Remove upper-right search/menu/hamburger area on About page only. */
.about-header .menu-toggle,
.about-header .top-nav {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Miao uses same font as homepage but keeps About size. */
html body .about-header .brand {
  font-family: "Hachi Maru Pop", "Chalkboard SE", "Comic Sans MS", cursive !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: #490303 !important;
  letter-spacing: 0.03em !important;
  text-shadow: 1px 2px 3px rgba(73, 3, 3, 0.24) !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

/* Lower-left icons: smaller than previous version. */
.about-side-icons {
  position: fixed !important;
  left: 38px !important;
  bottom: 34px !important;
  z-index: 120 !important;
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  pointer-events: auto !important;
}

.about-side-icon {
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
}

.about-side-icon img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(1px 2px 2px rgba(73, 3, 3, 0.24));
}

/* Side navigation panel. The image keeps its original proportion. */
.about-side-nav-panel {
  position: fixed;
  left: 24px;
  bottom: 74px;
  z-index: 110;
  height: min(86vh, 650px);
  width: auto;
  aspect-ratio: 1948 / 4700;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-12px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  pointer-events: none;
}

.about-side-nav-panel.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

.about-side-nav-image {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
}

/* Transparent links over the text on Aboutme-Side navigation bar.webp.
   They follow the actual text positions in the image. */
.about-side-nav-link {
  position: absolute;
  left: 12.5%;
  width: 48%;
  height: 4.3%;
  display: block;
  background: transparent;
}

.about-side-nav-link.nav-home { top: 20.3%; }
.about-side-nav-link.nav-about { top: 24.9%; }
.about-side-nav-link.nav-works { top: 29.5%; }
.about-side-nav-link.nav-contact { top: 34.0%; }

@media (max-width: 900px) {
  .about-side-icons {
    left: 24px !important;
    bottom: 24px !important;
    gap: 11px !important;
  }

  .about-side-icon {
    width: 24px !important;
    height: 24px !important;
  }

  .about-side-nav-panel {
    left: 16px;
    bottom: 60px;
    height: min(82vh, 560px);
  }
}



/* === ABOUT RESTORE IMAGES + REMOVE TOP ICONS FINAL FIX ===
   1. The upper-right search/menu/nav icons are removed from HTML.
      This CSS is an additional safety override in case old markup remains.
   2. About images must stay visible.
*/

/* Force remove any upper-right menu/nav elements on About page */
.about-header .menu-toggle,
.about-header .top-nav,
.about-header [data-menu-toggle],
.about-header [data-site-nav] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Restore and keep About page images visible */
.about-portrait img,
.about-floating-img,
.about-floating-img img,
.about-pin-row,
.about-pin-row img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Keep the lower-left side icons visible but small */
.about-side-icons {
  position: fixed !important;
  left: 38px !important;
  bottom: 34px !important;
  z-index: 120 !important;
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  pointer-events: auto !important;
}

.about-side-icon {
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
}



/* === ABOUT DELETE TOP RIGHT ICONS ONLY ===
   Delete/hide only the upper-right icons on About page.
   The lower-left `.about-side-icons` remains visible. */

/* Remove the original header hamburger/navigation area. */
.about-header .menu-toggle,
.about-header .top-nav,
.about-header [data-menu-toggle],
.about-header [data-site-nav],
.site-header.about-header .menu-toggle,
.site-header.about-header .top-nav {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* Safety: hide any image/button/link that is fixed/absolute in the top-right header area,
   but DO NOT affect the lower-left About side icons. */
.about-header button:not(.brand),
.about-header img,
.about-header a:not(.brand):not(.about-side-nav-link) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Keep lower-left icons visible after the top-right deletion. */
.about-side-icons,
.about-side-icons button,
.about-side-icons img {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.about-side-icons img {
  display: block !important;
}



/* === ABOUT DELETE CSS PSEUDO TOP RIGHT ICONS ===
   The upper-right icons are NOT normal HTML elements.
   They are generated by CSS pseudo-elements:
   .site-header::before and .site-header::after

   Delete them on About page only.
*/
body:has(.about-reference) .site-header::before,
body:has(.about-reference) .site-header::after,
body:has(.about-reference) .about-header::before,
body:has(.about-reference) .about-header::after,
.site-header.about-header::before,
.site-header.about-header::after,
.about-header::before,
.about-header::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Also remove project corner-nav pseudo icons from About page if any old class is reused. */
body:has(.about-reference) .corner-nav::before,
body:has(.about-reference) .corner-nav::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}



/* === ABOUT SIDE NAV RED FRAME POSITION FIX ===
   Put Aboutme-Side navigation bar.webp on the left according to the red frame.
   It opens on mouse click and keeps its original ratio.
*/

/* Keep lower-left small icons visible for opening the side nav */
.about-side-icons {
  position: fixed !important;
  left: 62px !important;
  bottom: 38px !important;
  z-index: 220 !important;
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  pointer-events: auto !important;
}

.about-side-icon {
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
}

.about-side-icon img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Side navigation image: left red-frame position, top and bottom aligned, proportional */
.about-side-nav-panel {
  position: fixed !important;
  left: 24px !important;
  top: 10px !important;
  bottom: 10px !important;
  height: calc(100vh - 20px) !important;
  width: auto !important;
  aspect-ratio: 1948 / 4700 !important;
  z-index: 180 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: none !important;
  transition: opacity 160ms ease, visibility 160ms ease !important;
  pointer-events: none !important;
  overflow: visible !important;
}

.about-side-nav-panel.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Do not stretch or crop the side nav image */
.about-side-nav-image {
  display: block !important;
  height: 100% !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
}

/* Transparent clickable text areas on the proportional side nav */
.about-side-nav-link {
  position: absolute !important;
  left: 12.5% !important;
  width: 54% !important;
  height: 4.3% !important;
  display: block !important;
  background: transparent !important;
  z-index: 2 !important;
}

.about-side-nav-link.nav-home { top: 18.6% !important; }
.about-side-nav-link.nav-about { top: 23.2% !important; }
.about-side-nav-link.nav-works { top: 27.8% !important; }
.about-side-nav-link.nav-contact { top: 32.4% !important; }

/* Keep top-right pseudo icons deleted */
.site-header.about-header::before,
.site-header.about-header::after,
.about-header::before,
.about-header::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}



/* === ABOUT SIDE NAV FULL HEIGHT UPDATED IMAGE FIX ===
   Use the updated Aboutme-Side navigation bar.webp.
   When clicked open, it touches top and bottom of the viewport proportionally.
   The lower-left clickable icons align with the baked-in icons on the nav image.
*/

/* Keep upper-right pseudo icons deleted */
.site-header.about-header::before,
.site-header.about-header::after,
.about-header::before,
.about-header::after,
body:has(.about-reference) .site-header::before,
body:has(.about-reference) .site-header::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Updated side nav image:
   uploaded image size = 848 x 2048, so width = 848/2048 * 100vh = 41.40625vh */
.about-side-nav-panel {
  position: fixed !important;
  left: 24px !important;
  top: 0 !important;
  bottom: auto !important;
  width: 41.40625vh !important;
  height: 100vh !important;
  aspect-ratio: 848 / 2048 !important;
  z-index: 180 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: none !important;
  transition: opacity 160ms ease, visibility 160ms ease !important;
  pointer-events: none !important;
  overflow: visible !important;
}

.about-side-nav-panel.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.about-side-nav-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
}

/* Lower-left icons:
   Positions calculated from the baked-in icon centers in the updated 848 x 2048 image.
   They stay in the same place before opening, then become transparent when the nav image opens,
   so the visible icons align exactly with the base image icons. */
.about-side-icons {
  position: fixed !important;
  left: calc(24px + 6.73vh) !important;
  top: 88.35vh !important;
  z-index: 220 !important;
  display: flex !important;
  align-items: center !important;
  gap: 1.4vh !important;
  pointer-events: auto !important;
}

.about-side-icon {
  display: block !important;
  width: 2.5vh !important;
  height: 2.5vh !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
}

.about-side-icon img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* When the nav image is open, hide the separate icon images.
   The transparent button areas remain clickable, and the image's own icons are visible underneath. */
.about-side-nav-open .about-side-icon img {
  opacity: 0 !important;
}

/* Transparent text click areas on the updated nav image */
.about-side-nav-link {
  position: absolute !important;
  left: 13% !important;
  width: 35% !important;
  height: 3.4% !important;
  display: block !important;
  background: transparent !important;
  z-index: 3 !important;
}

.about-side-nav-link.nav-home { top: 19.5% !important; }
.about-side-nav-link.nav-about { top: 23.9% !important; }
.about-side-nav-link.nav-works { top: 28.3% !important; }
.about-side-nav-link.nav-contact { top: 32.7% !important; }

@media (max-width: 900px) {
  .about-side-nav-panel {
    left: 0 !important;
    width: 41.40625vh !important;
    height: 100vh !important;
  }

  .about-side-icons {
    left: 6.73vh !important;
    top: 88.35vh !important;
    gap: 1.4vh !important;
  }
}



/* === ABOUT SIDE NAV LARGER TOGGLE CLOSE FIX ===
   1. Make Aboutme-Side navigation bar.webp larger.
   2. Keep it proportional and visually touch/crop beyond top and bottom.
   3. Keep the lower-left clickable icons aligned with the icons baked into the nav image.
   4. The same menu button toggles open/close through the updated JS.
*/

/* Larger full-height side navigation. 
   The uploaded image is 848 x 2048.
   It is enlarged to 100vh + 70px, then centered vertically with top -35px. */
.about-side-nav-panel {
  position: fixed !important;
  left: 24px !important;
  top: -35px !important;
  bottom: auto !important;
  height: calc(100vh + 70px) !important;
  width: calc(41.40625vh + 29px) !important;
  aspect-ratio: 848 / 2048 !important;
  z-index: 180 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: none !important;
  transition: opacity 160ms ease, visibility 160ms ease !important;
  pointer-events: none !important;
  overflow: visible !important;
}

.about-side-nav-panel.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.about-side-nav-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
}

/* Clickable bottom icons:
   Aligned with the larger side-nav image's baked-in icons.
   The icon images become transparent when the panel opens, but the buttons remain clickable,
   so clicking the menu position again closes the panel. */
.about-side-icons {
  position: fixed !important;
  left: calc(24px + 6.73vh + 12px) !important;
  top: calc(88.35vh + 26px) !important;
  z-index: 260 !important;
  display: flex !important;
  align-items: center !important;
  gap: calc(1.4vh + 2px) !important;
  pointer-events: auto !important;
}

.about-side-icon {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
}

.about-side-icon img {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* When open, use the icons already printed in Aboutme-Side navigation bar.webp.
   The transparent buttons still sit on top, so menu click can close it. */
.about-side-nav-open .about-side-icon img {
  opacity: 0 !important;
}

/* Update text click areas to match the larger proportional panel. */
.about-side-nav-link {
  position: absolute !important;
  left: 13% !important;
  width: 35% !important;
  height: 3.4% !important;
  display: block !important;
  background: transparent !important;
  z-index: 3 !important;
}

.about-side-nav-link.nav-home { top: 19.5% !important; }
.about-side-nav-link.nav-about { top: 23.9% !important; }
.about-side-nav-link.nav-works { top: 28.3% !important; }
.about-side-nav-link.nav-contact { top: 32.7% !important; }

/* Keep upper-right pseudo icons deleted */
.site-header.about-header::before,
.site-header.about-header::after,
.about-header::before,
.about-header::after,
body:has(.about-reference) .site-header::before,
body:has(.about-reference) .site-header::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}



/* === ABOUT FLOATING DRAG SNAP INTERACTION FIX ===
   Interaction for assets/about-me/Aboutme- interaction-image*.webp:
   - slow irregular floating across the page
   - pause on mouse hover
   - draggable by mouse
   - snap/fix when dragged onto Aboutme- interaction-icon.webp
*/

/* Initial CSS variable positions match the current About visual layout. */
.about-float-1 { --float-left: 52px; --float-top: 108px; }
.about-float-2 { --float-left: 370px; --float-top: 185px; }
.about-float-3 { --float-left: 615px; --float-top: 145px; }
.about-float-4 { --float-left: 850px; --float-top: 255px; }
.about-float-5 { --float-left: 1185px; --float-top: 195px; }
.about-float-6 { --float-left: 1030px; --float-top: 360px; }

/* Allow JS to move the images even if older CSS uses left/top !important. */
.about-floating-img {
  left: var(--float-left) !important;
  top: var(--float-top) !important;
  cursor: grab !important;
  touch-action: none !important;
  user-select: none !important;
  will-change: left, top !important;
  z-index: 42 !important;
  pointer-events: auto !important;
}

.about-floating-img img {
  user-select: none !important;
  -webkit-user-drag: none !important;
  pointer-events: none !important;
}

.about-floating-img.is-hover-paused {
  cursor: grab !important;
}

.about-floating-img.is-dragging {
  cursor: grabbing !important;
  z-index: 260 !important;
}

.about-floating-img.is-snapped {
  cursor: default !important;
  z-index: 90 !important;
  pointer-events: none !important;
}

.about-pin-row {
  z-index: 80 !important;
  pointer-events: none !important;
}

.about-pin-row img {
  pointer-events: auto !important;
}

/* About floating interaction is desktop-first; keep mobile layout readable. */
@media (max-width: 900px) {
  .about-floating-img {
    left: auto !important;
    top: auto !important;
    cursor: default !important;
  }
}



/* === ABOUT FLEXIBLE SNAP RE-DRAG FIX ===
   Correct behavior:
   - When dragged onto Aboutme- interaction-icon.webp, the image snaps and pauses.
   - The snapped image can still be dragged again.
   - When it is dragged away from the icon and released away from icons, it resumes slow irregular floating.
*/
html body .about-floating-img.is-snapped,
html body .about-floating-img[data-snapped-to-icon="true"] {
  pointer-events: auto !important;
  cursor: grab !important;
  z-index: 92 !important;
}

html body .about-floating-img.is-snapped img,
html body .about-floating-img[data-snapped-to-icon="true"] img {
  pointer-events: none !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
}

html body .about-floating-img.is-dragging {
  pointer-events: auto !important;
  cursor: grabbing !important;
  z-index: 260 !important;
}



/* === ABOUT SNAP POSITION OFFSET FIX ===
   The JS now corrects the snap position for:
   - Aboutme- interaction-image2.webp
   - Aboutme- interaction-image4.webp
   - Aboutme- interaction-image5.webp
   These images have transparent margins, so their visual centers differ from their box centers.
*/
html body .about-floating-img.is-snapped {
  z-index: 120 !important;
}

/* === MIAO FINAL COMPUTED STYLE LOCK === */
html body .home-header .brand,
html body .about-header .brand,
html body:has(.contact-page) .site-header .brand,
html body .project-brand {
  position: absolute !important;
  left: 50px !important;
  top: 5px !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  color: #490303 !important;
  font-family: "Hachi Maru Pop", "Chalkboard SE", "Comic Sans MS", cursive !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  letter-spacing: 0.72px !important;
  text-decoration: none !important;
  text-shadow: 1px 2px 3px rgba(73, 3, 3, 0.24) !important;
  white-space: nowrap !important;
  transform: none !important;
  z-index: auto !important;
}

html body:has(.contact-page) .site-header .brand span {
  display: none !important;
}

/* === SITE MIAO FINAL LOCK V2 === */
html body .site-miao,
html body .home-header .site-miao,
html body .about-header .site-miao,
html body:has(.contact-page) .site-header .site-miao {
  position: absolute !important;
  left: 50px !important;
  top: 5px !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  color: #490303 !important;
  font-family: "Hachi Maru Pop", "Chalkboard SE", "Comic Sans MS", cursive !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  letter-spacing: 0.72px !important;
  text-decoration: none !important;
  text-shadow: 1px 2px 3px rgba(73, 3, 3, 0.24) !important;
  white-space: nowrap !important;
  transform: none !important;
  z-index: auto !important;
}

html body.project-page .project-brand,
html body.project-page .site-miao {
  position: fixed !important;
  left: 50px !important;
  top: 5px !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  color: #490303 !important;
  font-family: "Hachi Maru Pop", "Chalkboard SE", "Comic Sans MS", cursive !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  letter-spacing: 0.72px !important;
  text-decoration: none !important;
  text-shadow: 1px 2px 3px rgba(73, 3, 3, 0.24) !important;
  white-space: nowrap !important;
  transform: none !important;
  z-index: 120 !important;
}

html body:has(.contact-page) .site-header .site-miao span {
  display: none !important;
}

/* === SITE MIAO TRUE FINAL LOCK ===
   One visible Miao specification for Home / About / Contact / Project pages.
   This block intentionally only targets the Miao link itself. */
html body .site-miao,
html body .site-header .site-miao,
html body .home-header .site-miao,
html body .about-header .site-miao,
html body:has(.contact-page) .site-header .site-miao,
html body.project-page .project-brand.site-miao {
  position: absolute !important;
  left: 50px !important;
  top: 5px !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  overflow: visible !important;
  color: #490303 !important;
  font-family: "Hachi Maru Pop", "Chalkboard SE", "Comic Sans MS", cursive !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  letter-spacing: 0.72px !important;
  text-decoration: none !important;
  text-transform: none !important;
  text-shadow: 1px 2px 3px rgba(73, 3, 3, 0.24) !important;
  white-space: nowrap !important;
  transform: none !important;
  z-index: 120 !important;
}

html body.project-page .project-brand.site-miao {
  position: fixed !important;
}

html body:has(.contact-page) .site-header .site-miao span {
  display: none !important;
}