:root {
  /* Ethereal Gallery · color */
  --eg-canvas: #f7fbfa;
  --eg-surface: #ffffff;
  --eg-surface-soft: rgba(255, 255, 255, 0.72);
  --eg-gem-50: #effbf8;
  --eg-gem-100: #ddf5f0;
  --eg-gem-300: #8bd8cb;
  --eg-gem-500: #37b9aa;
  --eg-gem-700: #147a74;
  --eg-ink-900: #203436;
  --eg-ink-700: #506466;
  --eg-ink-500: #718183;
  --eg-ink-300: #9aa8a9;
  --eg-white: #fafffe;
  --eg-focus: #137d77;

  /* Ethereal Gallery · type */
  --eg-font-body: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --eg-text-2xs: 10px;
  --eg-text-xs: 11px;
  --eg-text-sm: 12px;
  --eg-text-md: 14px;
  --eg-text-lg: 17px;

  /* Ethereal Gallery · space and shape */
  --eg-space-1: 4px;
  --eg-space-2: 8px;
  --eg-space-3: 12px;
  --eg-space-4: 16px;
  --eg-space-5: 20px;
  --eg-space-6: 24px;
  --eg-radius-control: 9px;
  --eg-radius-card: 18px;
  --eg-radius-dialog: 18px;
  --eg-content: min(calc(100% - 32px), 768px);
  --eg-safe-bottom: max(24px, env(safe-area-inset-bottom));
  --eg-dock-space: calc(94px + env(safe-area-inset-bottom));
  --eg-home-card-height: clamp(176px, calc((100svh - 124px - env(safe-area-inset-bottom)) / 3), 280px);

  /* Ethereal Gallery · restrained depth */
  --eg-shadow-card: 0 5px 16px rgba(31, 73, 70, 0.075);
  --eg-shadow-hover: 0 8px 22px rgba(31, 73, 70, 0.11);
  --eg-shadow-dialog: 0 20px 60px rgba(20, 43, 44, 0.22);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  color-scheme: light;
  background: var(--eg-canvas);
  scroll-behavior: auto;
}

body {
  position: relative;
  min-width: 320px;
  min-height: 100svh;
  margin: 0;
  color: var(--eg-ink-900);
  background: var(--eg-canvas);
  font-family: var(--eg-font-body);
  font-style: normal;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0 0 auto;
  height: min(420px, 72vw);
  background:
    radial-gradient(circle at 18% 0%, rgba(105, 211, 195, 0.08), transparent 54%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 76%);
  content: "";
  pointer-events: none;
}

body.is-dialog-open,
body.is-wechat-dialog-open {
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

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

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--eg-focus);
  outline-offset: 3px;
}

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

[hidden] {
  display: none !important;
}

.pj-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.pj-skip-link {
  position: fixed;
  z-index: 120;
  top: var(--eg-space-2);
  left: var(--eg-space-2);
  padding: 8px 12px;
  border: 0;
  border-radius: var(--eg-radius-control);
  color: var(--eg-ink-900);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--eg-shadow-card);
  font-size: var(--eg-text-sm);
  text-decoration: none;
  transform: translateY(calc(-100% - 16px));
  transition: transform 160ms ease;
}

.pj-skip-link:focus {
  transform: translateY(0);
}

.pj-website-menu-button,
.pj-website-dialog-close,
.pj-website-wechat-dialog-close {
  display: inline-grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: var(--eg-radius-control);
  color: var(--eg-ink-700);
  background: transparent;
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.pj-website-menu-button:hover,
.pj-website-dialog-close:hover,
.pj-website-wechat-dialog-close:hover {
  color: var(--eg-gem-700);
  background: rgba(221, 245, 240, 0.58);
}

.pj-website-menu-button:active,
.pj-website-dialog-close:active,
.pj-website-wechat-dialog-close:active {
  transform: scale(0.94);
}

.pj-website-menu-button svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.6;
}

.pj-website-menu {
  display: grid;
  width: min(calc(100% - 32px), 1080px);
  margin: 5px auto 0;
  padding: 5px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 0;
  border-radius: 14px;
  background: rgba(252, 254, 254, 0.97);
  box-shadow: 0 8px 24px rgba(31, 73, 70, 0.1);
}

.pj-website-menu .website-nav-link {
  display: grid;
  min-width: 0;
  min-height: 32px;
  padding: 4px 6px;
  place-items: center;
  border-radius: 9px;
  color: var(--eg-ink-700);
  font-size: var(--eg-text-xs);
  font-weight: 350;
  text-align: center;
  text-decoration: none;
}

.pj-website-menu .website-nav-link::after {
  display: none;
}

.pj-website-menu .website-nav-link:hover,
.pj-website-menu .website-nav-link.active {
  color: var(--eg-gem-700);
  background: var(--eg-gem-50);
}

/* Main layout */
.pj-website-main {
  position: relative;
  z-index: 1;
  width: var(--eg-content);
  min-height: calc(100svh - 56px);
  margin: 0 auto;
  padding: 0 0 var(--eg-dock-space);
}

.pj-website-main[data-view="home"] {
  padding-top: max(12px, env(safe-area-inset-top));
}

/* The bottom zone changes with information depth: contact on home, filters inside. */
.pj-website-social-dock,
.pj-website-filter-dock {
  position: fixed;
  z-index: 70;
  margin: 0 auto;
}

.pj-website-social-dock {
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 12px;
  display: flex;
  width: min(calc(100% - 24px), 744px);
  min-height: 52px;
  padding: 0;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.pj-website-filter-dock {
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 12px;
  width: min(calc(100% - 24px), 744px);
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background: rgba(248, 252, 251, 0.64);
  box-shadow:
    0 14px 36px rgba(28, 66, 64, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: saturate(150%) blur(24px);
  backdrop-filter: saturate(150%) blur(24px);
}

.pj-website-filter-dock {
  display: flex;
  min-height: 68px;
  align-items: stretch;
  gap: 6px;
}

.pj-website-filter-dock.is-dual {
  min-height: 112px;
  padding: 4px;
}

.pj-website-bottom-home,
.pj-website-bottom-all {
  display: inline-grid;
  width: 56px;
  min-width: 56px;
  min-height: 56px;
  padding: 0;
  align-self: stretch;
  place-items: center;
  border: 0;
  border-radius: 7px;
  color: var(--eg-ink-500);
  background: rgba(255, 255, 255, 0.42);
  cursor: pointer;
  touch-action: manipulation;
  transition: color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.pj-website-bottom-all {
  color: var(--eg-ink-700);
  font-size: var(--eg-text-2xs);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.pj-website-bottom-home svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.55;
}

.pj-website-bottom-home:hover,
.pj-website-bottom-all:hover {
  color: var(--eg-gem-700);
  background: rgba(224, 246, 241, 0.62);
}

.pj-website-bottom-home:active,
.pj-website-bottom-all:active {
  transform: scale(0.96);
}

.pj-website-bottom-all[aria-pressed="true"] {
  color: var(--eg-gem-700);
  background: rgba(214, 242, 236, 0.76);
}

.pj-website-bottom-filter-rows {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: 4px;
}

.pj-website-filter-dock.is-single .pj-website-bottom-filter-rows {
  align-items: stretch;
}

.pj-website-filter-dock.is-single .pj-website-filter-secondary {
  height: 100%;
}

.pj-website-main[data-view="studio"],
.pj-website-main[data-view="post"] {
  padding-bottom: calc(156px + env(safe-area-inset-bottom));
}

.pj-website-main[data-view="outdoor"] {
  padding-bottom: calc(108px + env(safe-area-inset-bottom));
}

.pj-website-loading {
  display: flex;
  min-height: 54vh;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.pj-website-loading span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--eg-gem-500);
  animation: eg-pulse 1.2s ease-in-out infinite;
}

.pj-website-loading span:nth-child(2) { animation-delay: 0.16s; }
.pj-website-loading span:nth-child(3) { animation-delay: 0.32s; }

@keyframes eg-pulse {
  0%, 100% { opacity: 0.24; transform: translateY(0); }
  50% { opacity: 0.9; transform: translateY(-3px); }
}

/* Home cards: the adaptive mineral veil is the single visual signature. */
.pj-website-home-grid {
  display: grid;
  margin-top: 0;
  gap: var(--eg-space-3);
}

.pj-website-home-card.website-solution-card {
  --pj-overlay-alpha: 0.52;
  position: relative;
  display: block;
  width: 100%;
  height: var(--eg-home-card-height);
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: var(--eg-radius-card);
  color: var(--eg-white);
  background: #e9f3f1;
  box-shadow: var(--eg-shadow-card);
  cursor: pointer;
  text-align: left;
  backdrop-filter: none;
  transition: box-shadow 160ms ease, transform 160ms ease, opacity 160ms ease;
}

.pj-website-home-card.website-solution-card::before {
  display: none;
}

.pj-website-home-card .pj-website-card-media {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #e7f1ef;
}

.pj-website-home-card .pj-website-card-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 200ms ease;
}

.pj-website-card-media-split {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 1px;
}

.pj-website-card-media-split > img {
  min-width: 0;
  height: 100% !important;
  object-fit: cover !important;
}

.pj-website-post-card .pj-website-card-media {
  height: 100%;
}

.pj-website-card-overlay {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  transition: background 150ms ease, opacity 150ms ease;
}

.pj-website-home-card[data-text-tone="light"] .pj-website-card-overlay {
  background: radial-gradient(
    ellipse 78% 72% at 0% 100%,
    rgb(12 34 36 / var(--pj-overlay-alpha)) 0%,
    rgb(12 34 36 / calc(var(--pj-overlay-alpha) * 0.62)) 34%,
    rgb(12 34 36 / calc(var(--pj-overlay-alpha) * 0.18)) 55%,
    transparent 76%
  );
}

.pj-website-home-card[data-text-tone="dark"] .pj-website-card-overlay {
  background: radial-gradient(
    ellipse 78% 72% at 0% 100%,
    rgb(250 255 254 / var(--pj-overlay-alpha)) 0%,
    rgb(250 255 254 / calc(var(--pj-overlay-alpha) * 0.64)) 34%,
    rgb(250 255 254 / calc(var(--pj-overlay-alpha) * 0.2)) 56%,
    transparent 77%
  );
}

.pj-website-card-caption {
  position: absolute;
  z-index: 2;
  bottom: 13px;
  left: 14px;
  display: block;
  width: max-content;
  max-width: calc(72% - 14px);
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  text-shadow: none;
}

.pj-website-home-card[data-text-tone="dark"] .pj-website-card-caption {
  color: var(--eg-ink-900);
}

.pj-website-card-copy {
  display: block;
  min-width: 0;
}

.pj-website-card-title {
  display: block;
  overflow: hidden;
  color: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-shadow: none;
  white-space: nowrap;
}

.pj-website-card-subtitle {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: inherit;
  font-size: var(--eg-text-2xs);
  font-weight: 350;
  line-height: 1.35;
  opacity: 0.86;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pj-website-home-card.website-solution-card:hover {
  box-shadow: var(--eg-shadow-hover);
  transform: translateY(-1px);
}

.pj-website-home-card.website-solution-card:hover .pj-website-card-media > img {
  transform: scale(1.012);
}

.pj-website-home-card.website-solution-card:active {
  opacity: 0.94;
  transform: scale(0.992);
}

/* Media platforms */
.pj-website-footer.website-footer {
  margin-top: 22px;
  padding: 4px 0 10px;
  border: 0;
  background: transparent;
}

.pj-website-footer .website-container {
  width: 100%;
  max-width: none;
  padding: 0;
}

.pj-website-platform-section,
.pj-website-contact-row {
  width: 100%;
  margin: 0;
}

.pj-website-platform-grid {
  display: flex;
  width: 100%;
  overflow-x: auto;
  align-items: center;
  gap: 10px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.pj-website-platform-grid::-webkit-scrollbar {
  display: none;
}

.pj-website-platform-card,
.pj-website-wechat-button {
  position: relative;
  display: inline-grid;
  width: 52px;
  height: 52px;
  min-width: 52px;
  flex: 0 0 52px;
  overflow: hidden;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  color: var(--eg-ink-700);
  background: rgba(255, 255, 255, 0.28);
  box-shadow:
    0 4px 14px rgba(31, 73, 70, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  cursor: pointer;
  text-decoration: none;
  -webkit-backdrop-filter: saturate(115%) blur(14px);
  backdrop-filter: saturate(115%) blur(14px);
  transition: color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.pj-website-platform-card::before,
.pj-website-wechat-button::before {
  display: none;
}

.pj-website-platform-card:hover,
.pj-website-wechat-button:hover {
  color: var(--eg-gem-700);
  background: rgba(255, 255, 255, 0.48);
  transform: translateY(-1px);
}

.pj-website-platform-card:active,
.pj-website-wechat-button:active {
  transform: scale(0.94);
}

.pj-website-platform-logo,
.pj-website-wechat-button svg {
  position: relative;
  z-index: 1;
  width: 19px;
  height: 19px;
  opacity: 0.62;
  stroke-width: 1.6;
}

.pj-website-wechat-button {
  margin-left: auto;
}

.pj-website-social-dock .pj-website-platform-card,
.pj-website-social-dock .pj-website-wechat-button {
  width: 52px;
  height: 52px;
  min-width: 52px;
  margin: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.28);
  box-shadow:
    0 4px 14px rgba(31, 73, 70, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.pj-website-social-dock .pj-website-platform-card:hover,
.pj-website-social-dock .pj-website-wechat-button:hover {
  background: rgba(255, 255, 255, 0.48);
}

.pj-website-social-dock .pj-website-wechat-button {
  margin-left: auto;
}

.pj-website-copyright {
  display: none;
}

/* Category title stays passive; navigation and exit actions are at the bottom. */
.pj-website-inner-header {
  display: flex;
  min-height: 52px;
  padding: max(18px, env(safe-area-inset-top)) 0 6px;
  align-items: center;
}

.pj-website-back {
  display: inline-grid;
  width: 34px;
  height: 34px;
  min-height: 34px;
  margin-left: -9px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: var(--eg-radius-control);
  color: var(--eg-ink-700);
  background: transparent;
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.pj-website-back:hover {
  color: var(--eg-gem-700);
  background: rgba(221, 245, 240, 0.52);
}

.pj-website-back:active {
  transform: translateX(-1px);
}

.pj-website-back svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.6;
}

.pj-website-inner-title {
  margin: 0;
  color: var(--eg-ink-900);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.pj-website-filter-stack {
  position: relative;
  z-index: 5;
  display: grid;
  min-height: 52px;
  margin: 4px 0 14px;
  align-items: flex-start;
  gap: 8px;
}

.pj-website-filter-stack > div {
  width: 100%;
  min-width: 0;
}

.pj-website-filter-primary,
.pj-website-filter-secondary {
  display: flex;
  width: 100%;
  min-width: 0;
  padding: 2px;
  align-items: center;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  background: rgba(249, 253, 252, 0.56);
  box-shadow: 0 4px 16px rgba(31, 73, 70, 0.055);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  backdrop-filter: saturate(140%) blur(18px);
}

.pj-website-filter-dock .pj-website-filter-primary,
.pj-website-filter-dock .pj-website-filter-secondary {
  border-color: rgba(255, 255, 255, 0.52);
  background: rgba(255, 255, 255, 0.34);
  box-shadow: none;
}

.pj-website-filter-button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 46px;
  padding: 0 11px;
  border: 0;
  border-radius: 6px;
  color: var(--eg-ink-700);
  background: transparent;
  cursor: pointer;
  font-size: var(--eg-text-xs);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  touch-action: manipulation;
  transition: color 130ms ease, background-color 130ms ease, transform 130ms ease;
}

/* Two post-production types keep the same segment width as the three people filters. */
.pj-website-filter-primary.is-two {
  justify-content: center;
}

.pj-website-filter-primary.is-two .pj-website-filter-button {
  flex: 0 1 calc(33.333% - 2px);
  min-height: 44px;
}

.pj-website-filter-button:hover {
  color: var(--eg-gem-700);
  background: rgba(221, 245, 240, 0.46);
}

.pj-website-filter-button:active {
  transform: scale(0.96);
}

.pj-website-filter-button[aria-pressed="true"] {
  color: var(--eg-gem-700);
  background: rgba(214, 242, 236, 0.76);
  font-weight: 400;
}

.pj-website-filter-secondary .pj-website-filter-button {
  color: var(--eg-ink-700);
  font-size: var(--eg-text-2xs);
}

.pj-website-filter-secondary {
  background: rgba(249, 253, 252, 0.4);
  box-shadow: 0 3px 12px rgba(31, 73, 70, 0.04);
}

.pj-website-filter-secondary .pj-website-filter-button[aria-pressed="true"] {
  color: var(--eg-gem-700);
}

/* Uncropped work gallery */
.pj-website-works-stage {
  min-height: 58svh;
}

.pj-website-works-grid {
  display: block;
  column-count: 2;
  column-gap: 10px;
}

.pj-website-work-card {
  position: relative;
  display: inline-block;
  width: 100%;
  min-height: 0;
  margin: 0 0 10px;
  overflow: hidden;
  align-self: start;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: var(--eg-ink-900);
  background: #e8f1ef;
  box-shadow: 0 2px 10px rgba(31, 73, 70, 0.055);
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  cursor: zoom-in;
  line-height: 0;
  text-align: left;
  vertical-align: top;
  transition: box-shadow 160ms ease, transform 160ms ease, opacity 160ms ease;
}

.pj-website-work-card:first-child,
.pj-website-work-card:not(:first-child),
.pj-website-work-card:nth-child(3n) {
  min-height: 0;
  grid-column: auto;
  aspect-ratio: auto;
}

.pj-website-work-card img {
  position: relative;
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform 220ms ease;
}

.pj-website-main[data-view="post"] .pj-website-work-card {
  min-height: 0;
}

.pj-website-main[data-view="post"] .pj-website-work-card img {
  position: relative;
  inset: auto;
  height: auto;
  object-fit: contain;
}

.pj-website-work-card:hover {
  box-shadow: var(--eg-shadow-hover);
  transform: translateY(-1px);
}

.pj-website-work-card:hover img {
  transform: scale(1.008);
}

.pj-website-work-card:active {
  opacity: 0.94;
  transform: scale(0.994);
}

.pj-website-compare-hint {
  position: absolute;
  z-index: 2;
  right: 9px;
  bottom: 8px;
  display: inline-flex;
  min-height: 20px;
  padding: 0 6px;
  align-items: center;
  gap: 3px;
  border: 0;
  border-radius: 999px;
  color: rgba(248, 255, 253, 0.68);
  background: rgba(15, 35, 37, 0.16);
  font-size: 9px;
  font-weight: 350;
  line-height: 1;
  opacity: 0.68;
  pointer-events: none;
}

.pj-website-compare-hint svg {
  width: 10px;
  height: 10px;
  stroke-width: 1.4;
}

/* Empty, error and image-failure states */
.pj-website-empty,
.pj-website-error {
  display: grid;
  min-height: 52svh;
  padding: 24px;
  place-items: center;
  color: var(--eg-ink-500);
  text-align: center;
}

.pj-website-empty-icon {
  display: grid;
  width: 42px;
  height: 42px;
  margin: 0 auto 9px;
  place-items: center;
  border-radius: 50%;
  color: var(--eg-gem-700);
  background: var(--eg-gem-50);
}

.pj-website-empty-icon svg {
  width: 19px;
}

.pj-website-empty p,
.pj-website-error p {
  margin: 0;
  font-size: var(--eg-text-sm);
}

.pj-website-error button {
  min-height: 48px;
  margin-top: 10px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--eg-radius-control);
  color: var(--eg-gem-700);
  background: var(--eg-gem-100);
  cursor: pointer;
  font-size: var(--eg-text-xs);
}

.pj-website-image-fallback {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  min-height: 112px;
  padding: 18px;
  place-items: center;
  color: var(--eg-ink-500);
  background: linear-gradient(145deg, #edf7f5, #f8fbfa);
  font-size: var(--eg-text-xs);
  line-height: 1.4;
  text-align: center;
}

img.is-image-error {
  visibility: hidden;
}

/* Work lightbox */
.pj-website-dialog {
  width: min(calc(100% - 16px), 1000px);
  max-width: 1000px;
  max-height: min(94svh, 920px);
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: var(--eg-radius-dialog);
  color: var(--eg-ink-900);
  background: rgba(251, 253, 253, 0.99);
  box-shadow: var(--eg-shadow-dialog);
  backdrop-filter: none;
}

.pj-website-dialog::backdrop,
.pj-website-wechat-dialog::backdrop {
  background: rgba(18, 32, 33, 0.46);
  backdrop-filter: blur(3px);
}

.pj-website-dialog-shell {
  position: relative;
  display: flex;
  max-height: min(94svh, 920px);
  flex-direction: column;
}

.pj-website-dialog-header {
  position: absolute;
  z-index: 8;
  right: 12px;
  bottom: 12px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.pj-website-dialog-header .pj-website-dialog-close {
  width: 52px;
  height: 52px;
  color: var(--eg-white);
  background: rgba(18, 38, 40, 0.62);
  box-shadow: 0 3px 12px rgba(12, 30, 32, 0.18);
}

.pj-website-dialog-header .pj-website-dialog-close:hover {
  color: white;
  background: rgba(18, 38, 40, 0.78);
}

.pj-website-dialog-close svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.7;
}

.pj-website-dialog-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 8px 72px;
}

.pj-website-gallery-frame {
  position: relative;
  display: grid;
  min-height: 112px;
  place-items: center;
  border-radius: 12px;
  background: #edf4f2;
}

.pj-website-gallery-main {
  width: 100%;
  max-height: calc(94svh - 16px);
  border-radius: 12px;
  object-fit: contain;
  background: transparent;
}

.pj-website-gallery-strip {
  display: grid;
  margin-top: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.pj-website-gallery-thumb {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #edf4f2;
  box-shadow: inset 0 0 0 1px transparent;
  cursor: pointer;
  aspect-ratio: 1;
}

.pj-website-gallery-thumb[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--eg-gem-500);
}

.pj-website-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Post-production comparison: natural image ratio, never portrait-cropped. */
.pj-website-compare {
  --split: 50%;
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  min-height: clamp(260px, 78vw, 420px);
  border-radius: 12px;
  background: #e7efed;
  touch-action: pan-y;
  user-select: none;
}

.pj-website-compare-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.pj-website-compare-layer.is-after {
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
}

.pj-website-compare-line {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 1px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(24, 49, 51, 0.12);
  pointer-events: none;
}

.pj-website-compare-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: white;
  background: rgba(25, 54, 56, 0.52);
  box-shadow: 0 3px 12px rgba(15, 35, 37, 0.18);
  transform: translate(-50%, -50%);
}

.pj-website-compare-handle svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.5;
}

.pj-website-compare-input {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.pj-website-compare-label {
  position: absolute;
  z-index: 4;
  top: 9px;
  min-height: 22px;
  padding: 4px 7px;
  border: 0;
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(20, 43, 45, 0.3);
  font-size: var(--eg-text-2xs);
  font-weight: 350;
  line-height: 1.35;
  pointer-events: none;
}

.pj-website-compare-label.is-before { left: 9px; }
.pj-website-compare-label.is-after { right: 9px; }

.pj-website-compare-help {
  display: flex;
  margin: 7px 0 2px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--eg-ink-500);
  font-size: var(--eg-text-2xs);
  line-height: 1.4;
  text-align: center;
}

.pj-website-compare-help svg {
  width: 12px;
  height: 12px;
}

/* WeChat modal */
.pj-website-wechat-dialog {
  width: min(calc(100% - 32px), 332px);
  max-width: 332px;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: var(--eg-radius-dialog);
  color: var(--eg-ink-900);
  background: rgba(252, 254, 254, 0.99);
  box-shadow: var(--eg-shadow-dialog);
  backdrop-filter: none;
}

.pj-website-wechat-dialog-shell {
  position: relative;
  padding: 20px 20px 78px;
}

.pj-website-wechat-dialog-close {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  width: 52px;
  height: 52px;
}

.pj-website-wechat-dialog-close svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.6;
}

.pj-website-wechat-dialog-heading {
  display: flex;
  min-height: 30px;
  padding-right: 0;
  align-items: center;
}

.pj-website-wechat-dialog-heading h2,
.pj-website-wechat-value,
.pj-website-wechat-hint {
  margin: 0;
}

.pj-website-wechat-dialog-heading h2 {
  color: var(--eg-ink-700);
  font-size: var(--eg-text-md);
  font-weight: 400;
  letter-spacing: 0.05em;
}

.pj-website-wechat-qr-frame {
  position: relative;
  display: grid;
  margin-top: 10px;
  padding: 10px;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: white;
  box-shadow: 0 4px 16px rgba(31, 73, 70, 0.065);
}

.pj-website-wechat-qr-frame img {
  width: min(100%, 236px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

.pj-website-wechat-value {
  margin-top: 11px;
  color: var(--eg-ink-700);
  font-size: var(--eg-text-sm);
  font-weight: 350;
  text-align: center;
}

.pj-website-wechat-hint {
  margin-top: 3px;
  color: var(--eg-ink-500);
  font-size: var(--eg-text-2xs);
  text-align: center;
}

.pj-website-toast {
  position: fixed;
  z-index: 90;
  right: 16px;
  bottom: calc(88px + env(safe-area-inset-bottom));
  left: 16px;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--eg-radius-control);
  color: var(--eg-ink-900);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--eg-shadow-card);
  font-size: var(--eg-text-xs);
}

@media (min-width: 640px) {
  :root {
    --eg-content: min(calc(100% - 64px), 768px);
  }

  .pj-website-home-grid {
    gap: 16px;
  }

  .pj-website-card-caption {
    bottom: 15px;
    left: 16px;
  }

  .pj-website-card-title {
    font-size: 17px;
  }

  .pj-website-works-grid {
    column-gap: 14px;
  }

  .pj-website-work-card {
    margin-bottom: 14px;
  }

  .pj-website-dialog-body {
    padding: 10px;
  }

  .pj-website-compare-help {
    margin-top: 9px;
    font-size: var(--eg-text-xs);
  }
}

@media (min-width: 960px) {
  :root {
    --eg-content: min(calc(100% - 96px), 1100px);
    --eg-home-card-height: 240px;
  }

  .pj-website-main[data-view="home"] {
    display: grid;
    min-height: calc(100svh - 86px);
    padding-top: 24px;
    padding-bottom: 86px;
    align-content: center;
  }

  .pj-website-home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .pj-website-home-card:first-child {
    grid-column: 1 / -1;
  }

  .pj-website-platform-grid {
    gap: 16px;
  }

  .pj-website-filter-dock,
  .pj-website-social-dock {
    width: min(calc(100% - 48px), 900px);
  }
}

@media (max-width: 374px) {
  :root {
    --eg-content: calc(100% - 24px);
  }

  .pj-website-filter-button {
    padding-right: 7px;
    padding-left: 7px;
  }

  .pj-website-filter-stack {
    gap: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}