/* Zheng Xiaoyang portfolio — full glossy liquid-glass system */
:root {
  --glass-fill: rgba(255, 255, 255, 0.30);
  --glass-fill-strong: rgba(255, 255, 255, 0.42);
  --glass-line: rgba(255, 255, 255, 0.82);
  --glass-line-soft: rgba(255, 255, 255, 0.52);
  --glass-shadow: 0 24px 70px rgba(39, 49, 62, 0.13), 0 6px 20px rgba(39, 49, 62, 0.06), inset 0 1.5px 0 rgba(255, 255, 255, 0.92), inset 0 -1px 0 rgba(91, 111, 132, 0.12);
  --glass-shadow-hover: 0 34px 90px rgba(39, 49, 62, 0.18), 0 10px 26px rgba(39, 49, 62, 0.08), inset 0 1.5px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(91, 111, 132, 0.16);
  --glass-blur: blur(30px) saturate(180%);
  --page-base: #f7f8f3;
  --page-base-deep: #f4f7ef;
  --flow-a: rgba(142, 232, 214, 0.72);
  --flow-b: rgba(255, 197, 21, 0.58);
  --flow-c: rgba(142, 232, 214, 0.68);
  --glow-a: #8ee8d6;
  --glow-b: #f4fff8;
  --glow-c: #ffc515;
  --glow-a-rgb: 142, 232, 214;
  --glow-b-rgb: 244, 255, 248;
  --glow-c-rgb: 255, 197, 21;
}

/* Case-specific palettes: the flowing field and every edge glow share one theme. */
body.theme-brickleberry {
  --page-base: #f7fcfa;
  --page-base-deep: #eef9f6;
  --flow-a: rgba(100, 223, 200, .76);
  --flow-b: rgba(180, 151, 207, .55);
  --flow-c: rgba(214, 242, 49, .48);
  --glow-a: #64dfc8;
  --glow-b: #b497cf;
  --glow-c: #d6f231;
  --glow-a-rgb: 100, 223, 200;
  --glow-b-rgb: 180, 151, 207;
  --glow-c-rgb: 214, 242, 49;
}

body.theme-yafei {
  --page-base: #fff9e9;
  --page-base-deep: #fff2d7;
  --flow-a: rgba(255, 197, 21, .76);
  --flow-b: rgba(255, 77, 134, .48);
  --flow-c: rgba(154, 223, 215, .54);
  --glow-a: #ffc515;
  --glow-b: #ff4d86;
  --glow-c: #9adfd7;
  --glow-a-rgb: 255, 197, 21;
  --glow-b-rgb: 255, 77, 134;
  --glow-c-rgb: 154, 223, 215;
}

body.theme-limbo {
  --page-base: #f0eeeb;
  --page-base-deep: #dfdcd8;
  --flow-a: rgba(232, 228, 224, .94);
  --flow-b: rgba(167, 162, 158, .62);
  --flow-c: rgba(102, 99, 95, .38);
  --glow-a: #f2efeb;
  --glow-b: #c4c0bb;
  --glow-c: #77736f;
  --glow-a-rgb: 242, 239, 235;
  --glow-b-rgb: 196, 192, 187;
  --glow-c-rgb: 119, 115, 111;
}

body.theme-communication {
  --page-base: #f7faef;
  --page-base-deep: #edf5e7;
  --flow-a: rgba(200, 250, 19, .68);
  --flow-b: rgba(118, 223, 203, .66);
  --flow-c: rgba(185, 188, 184, .46);
  --glow-a: #c8fa13;
  --glow-b: #76dfcb;
  --glow-c: #f4fff0;
  --glow-a-rgb: 200, 250, 19;
  --glow-b-rgb: 118, 223, 203;
  --glow-c-rgb: 244, 255, 240;
}

body.theme-poster {
  --page-base: #f3f4f2;
  --page-base-deep: #e8edf0;
  --flow-a: rgba(43, 88, 126, .48);
  --flow-b: rgba(222, 231, 235, .76);
  --flow-c: rgba(183, 62, 52, .30);
  --glow-a: #2b587e;
  --glow-b: #dce7eb;
  --glow-c: #b73e34;
  --glow-a-rgb: 43, 88, 126;
  --glow-b-rgb: 220, 231, 235;
  --glow-c-rgb: 183, 62, 52;
}

/* The narrative intro sits directly over the pale poster glass, so keep it
   dark enough to remain readable as the animated background moves beneath it. */
body.theme-poster #narrative .section-head > .intro {
  color: #25323a !important;
}

body.theme-about {
  --page-base: #f6f4f0;
  --page-base-deep: #ebe8e2;
  --flow-a: rgba(200, 168, 136, .46);
  --flow-b: rgba(226, 231, 231, .78);
  --flow-c: rgba(126, 143, 148, .32);
  --glow-a: #c8a888;
  --glow-b: #e2e7e7;
  --glow-c: #7e8f94;
  --glow-a-rgb: 200, 168, 136;
  --glow-b-rgb: 226, 231, 231;
  --glow-c-rgb: 126, 143, 148;
}

/* About editorial cards: keep artwork strictly inside the rounded glass.
   The shared edge-glow host intentionally allows overflow, which otherwise
   reveals the square image corners and decorative artwork outside the card. */
body.theme-about .source.site-edge-glow-host {
  overflow: hidden !important;
  contain: paint;
}

body.theme-about .source > button {
  overflow: hidden;
  border-radius: 21px 21px 0 0;
}

body.theme-about .source > button img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

body.theme-about .source.site-edge-glow-host > .site-edge-glow {
  inset: 0 !important;
  padding: 1.5px;
  filter:
    drop-shadow(0 0 3px rgba(var(--glow-b-rgb), .92))
    drop-shadow(0 0 8px rgba(var(--glow-a-rgb), .70));
}

body.theme-type {
  --page-base: #f1efed;
  --page-base-deep: #e4e1de;
  --flow-a: rgba(239, 238, 236, .96);
  --flow-b: rgba(171, 168, 165, .65);
  --flow-c: rgba(56, 52, 51, .32);
  --glow-a: #f5f2ef;
  --glow-b: #aba8a5;
  --glow-c: #383433;
  --glow-a-rgb: 245, 242, 239;
  --glow-b-rgb: 171, 168, 165;
  --glow-c-rgb: 56, 52, 51;
}

html { background: var(--page-base, #f7f8f3); }

body {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow-x: hidden;
  background: linear-gradient(180deg, var(--page-base) 0%, var(--page-base-deep) 100%) fixed !important;
}

/* Aurora-colour fallback for the static project pages. */
body::before {
  content: "";
  position: fixed;
  z-index: -2;
  inset: -22vmax;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 28%, var(--flow-a) 0 13%, transparent 39%),
    radial-gradient(ellipse at 54% 18%, var(--flow-b) 0 12%, transparent 38%),
    radial-gradient(ellipse at 84% 30%, var(--flow-c) 0 14%, transparent 40%);
  filter: blur(68px) saturate(110%);
  transform: translate3d(0, 0, 0) scale(1.06);
  animation: colour-flow 18s ease-in-out infinite alternate;
  will-change: transform;
}

body::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.30), transparent 38%, rgba(255,255,255,.16) 68%, transparent);
}

@keyframes colour-flow {
  0%   { transform: translate3d(-3%, -2%, 0) rotate(-4deg) scale(1.05); }
  35%  { transform: translate3d(4%, -5%, 0) rotate(2deg) scale(1.12); }
  68%  { transform: translate3d(-2%, 5%, 0) rotate(6deg) scale(1.08); }
  100% { transform: translate3d(5%, 2%, 0) rotate(-1deg) scale(1.14); }
}

/* Floating glossy navigation */
.header,
.site-header {
  top: 10px !important;
  width: min(calc(100% - 28px), 1392px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--glass-line) !important;
  border-radius: 19px;
  background: linear-gradient(135deg, rgba(255,255,255,.48), rgba(255,255,255,.20)) !important;
  box-shadow: 0 16px 45px rgba(32, 43, 57, .12), inset 0 1.5px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(92,112,134,.12) !important;
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  backdrop-filter: blur(30px) saturate(190%);
}

.header::after,
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 58% 60% at 16% -15%, rgba(255,255,255,.62), transparent 70%);
}

.header-in,
.header-inner { position: relative; z-index: 1; padding-top: 12px !important; padding-bottom: 12px !important; }

.nav a {
  border-radius: 999px;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease !important;
}
.nav a:not(.global-cta) { padding: 8px 10px; }
.nav a:not(.global-cta):hover,
.nav .global-current:not(.global-cta) {
  background: linear-gradient(120deg, rgba(var(--glow-a-rgb), .22), rgba(var(--glow-b-rgb), .20), rgba(var(--glow-c-rgb), .16));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 5px 18px rgba(var(--glow-a-rgb), .18);
}
.nav .global-cta,
.cta-small,
.nav .pill {
  border: 1px solid rgba(255,255,255,.28) !important;
  background: rgba(17,17,19,.86) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 8px 20px rgba(17,17,19,.14);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}

/* Every content panel now uses the same transparent glossy glass. */
:where(
  .stat, .hero-stat, .project, .coming, .hero-card, .section-card,
  .side-nav .panel, .side-box, .side-in, .card, .hero-note,
  .hero-visual, .focus, .source, .contact, body > main.wrap,
  .overview-item, .summary-box, .summary, .quote-box, .floating-note,
  .visual, .image, .image-card, .poster-wall, .crop, .gallery
) {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--glass-line) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.46), rgba(255,255,255,.16) 48%, rgba(228,238,248,.22)) !important;
  box-shadow: var(--glass-shadow) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

:where(
  .stat, .hero-stat, .project, .coming, .hero-card, .section-card,
  .side-nav .panel, .side-box, .side-in, .card, .hero-note,
  .hero-visual, .focus, .source, .contact,
  .overview-item, .summary-box, .summary, .quote-box, .floating-note,
  .visual, .image, .image-card, .poster-wall, .crop, .gallery
)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse 76% 34% at 16% -8%, rgba(255,255,255,.68), transparent 68%),
    linear-gradient(112deg, rgba(255,255,255,.19), transparent 29%, transparent 70%, rgba(255,255,255,.10));
  opacity: .72;
  transition: opacity 280ms ease, transform 560ms cubic-bezier(.2,.8,.2,1);
}

:where(
  .stat, .hero-stat, .project, .coming, .hero-card, .section-card,
  .side-nav .panel, .side-box, .side-in, .card, .hero-note,
  .hero-visual, .focus, .source, .contact,
  .overview-item, .summary-box, .summary, .quote-box, .floating-note,
  .visual, .image, .image-card, .poster-wall, .crop, .gallery
)::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.27), inset 0 18px 26px -24px rgba(255,255,255,1), inset 0 -20px 28px -28px rgba(72,96,121,.38);
}

:where(
  .stat, .hero-stat, .project, .coming, .hero-card, .section-card,
  .side-nav .panel, .side-box, .side-in, .card, .hero-note,
  .hero-visual, .focus, .source, .contact,
  .overview-item, .summary-box, .summary, .quote-box, .floating-note,
  .visual, .image, .image-card, .poster-wall, .crop, .gallery
) > * { position: relative; z-index: 6; }

.project, .card, .section-card, .hero-card, .image-card { overflow: hidden; }

/* Communication landing modules: translucent stats plus glazed image portals. */
body.theme-communication .hero-stat {
  border-color: rgba(255,255,255,.88) !important;
  background: linear-gradient(142deg, rgba(255,255,255,.50), rgba(255,255,255,.17) 54%, rgba(200,250,19,.10)) !important;
  box-shadow: 0 22px 58px rgba(42,68,57,.12), inset 0 1.5px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(72,112,99,.13) !important;
}

body.theme-communication .hero-case {
  isolation: isolate;
  overflow: hidden !important;
  contain: paint;
  border: 1px solid rgba(255,255,255,.82) !important;
  background: rgba(255,255,255,.12) !important;
  box-shadow: 0 25px 66px rgba(31,54,45,.16), inset 0 1.5px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(50,80,69,.18) !important;
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  backdrop-filter: blur(24px) saturate(165%);
}

body.theme-communication .hero-case::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 46% at 14% -10%, rgba(255,255,255,.62), transparent 64%),
    linear-gradient(112deg, rgba(255,255,255,.18), transparent 28%, transparent 72%, rgba(118,223,203,.10));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.26), inset 0 20px 28px -27px rgba(255,255,255,.96);
}

body.theme-communication .hero-case::after { z-index: 1; }
body.theme-communication .hero-case .case-info { z-index: 4; }
body.theme-communication .hero-case > img {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  border-radius: inherit;
  clip-path: inset(0 round 25px);
}
body.theme-communication .hero-case > .site-edge-glow {
  inset: 1px !important;
  z-index: 7 !important;
  filter:
    drop-shadow(0 0 3px rgba(var(--glow-b-rgb), .90))
    drop-shadow(0 0 8px rgba(var(--glow-a-rgb), .72));
}

/* Chapter-cover rows are layout wrappers, not glass cards. Keeping the glass
   on their inner .image avoids the square outer frame seen on poster/type. */
.cover-strip {
  isolation: auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}
.cover-strip::before,
.cover-strip::after { content: none !important; }
.cover-strip > .site-edge-glow { display: none !important; }
.cover-strip > .image {
  overflow: hidden !important;
  contain: paint;
}
.cover-strip > .image > button,
.cover-strip > .image > button > img {
  width: 100%;
  border-radius: 0;
}

/* Poster and type artwork cards need their glass reflection above the opaque
   artwork. The shared glass layer otherwise sits behind the image and becomes
   invisible. Keep this treatment on each rounded image card, never on the
   surrounding layout row. */
body.theme-poster :where(.image, .poster-wall, .gallery),
body.theme-type :where(.image, .crop, .lettering-card) {
  position: relative;
  isolation: isolate;
  overflow: hidden !important;
  contain: paint;
  border-color: rgba(255,255,255,.86) !important;
  box-shadow:
    0 22px 58px rgba(34,43,54,.14),
    inset 0 1.5px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(64,78,91,.16) !important;
}

/* Poster collections are transparent layout grids, not glass cards. The old
   wrapper treatment produced a white gutter and a square rim around each row.
   Glass and glow now live on the individual rounded poster cards only. */
body.theme-poster :where(.poster-wall, .gallery, .summary) {
  isolation: auto !important;
  overflow: visible !important;
  contain: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.theme-poster :where(.poster-wall, .gallery, .summary)::before,
body.theme-poster :where(.poster-wall, .gallery, .summary)::after {
  content: none !important;
}

body.theme-poster :where(.poster-wall, .summary) > .site-edge-glow {
  display: none !important;
}

body.theme-poster .poster-wall figure,
body.theme-poster .gallery figure,
body.theme-poster .summary article {
  position: relative;
  isolation: isolate;
  overflow: hidden !important;
  contain: paint;
  border: 1px solid rgba(255,255,255,.72) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.32), rgba(255,255,255,.10)) !important;
  box-shadow:
    0 16px 38px rgba(34,43,54,.13),
    inset 0 1.5px 0 rgba(255,255,255,.90) !important;
}

body.theme-poster .poster-wall figure { border-radius: 18px; }
body.theme-poster .gallery figure { border-radius: 16px; }
body.theme-poster .summary article { border-radius: 20px; }

body.theme-poster :where(.poster-wall figure, .gallery figure) img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  object-position: 50% 50%;
  /* Several source posters contain a narrow white print margin on the left.
     Overscan the artwork inside its rounded crop so that source margin never
     reads as an empty card gutter. */
  transform: scale(1.065);
  transform-origin: center;
}

body.theme-poster :where(.poster-wall figure, .gallery figure):hover img {
  transform: scale(1.085);
}

/* The airport artwork has a substantially wider white print edge than the
   other poster files, so it needs its own crop instead of the shared 6.5%
   overscan. Shift the enlarged artwork slightly left to preserve the type on
   the right while fully hiding the source margin. */
body.theme-poster img[src$="/poster/airport.webp"],
body.theme-poster img[src$="poster/airport.webp"] {
  transform: scale(1.18) translateX(-1.5%);
}

body.theme-poster figure:hover img[src$="/poster/airport.webp"],
body.theme-poster figure:hover img[src$="poster/airport.webp"] {
  transform: scale(1.20) translateX(-1.5%);
}

body.theme-poster :where(.poster-wall figure, .gallery figure)::before,
body.theme-poster :where(.summary article)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse 92% 28% at 14% -7%, rgba(255,255,255,.58), transparent 66%),
    linear-gradient(112deg, rgba(255,255,255,.14), transparent 30%, transparent 72%, rgba(var(--glow-a-rgb), .08));
}

body.theme-poster :where(.poster-wall figure, .gallery figure, .summary article)::after {
  content: "";
  position: absolute;
  z-index: 9;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.26);
}

body.theme-poster :where(.poster-wall figure, .gallery figure, .summary article) > * {
  position: relative;
  z-index: 6;
}

body.theme-poster :where(.image, .poster-wall, .gallery)::before,
body.theme-type :where(.image, .crop, .lettering-card)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  border-radius: inherit;
  pointer-events: none;
  opacity: .9;
  background:
    radial-gradient(ellipse 92% 30% at 14% -7%, rgba(255,255,255,.72), transparent 66%),
    linear-gradient(112deg, rgba(255,255,255,.20), transparent 27%, transparent 70%, rgba(var(--glow-a-rgb), .09));
}

body.theme-poster :where(.image, .poster-wall, .gallery)::after,
body.theme-type :where(.image, .crop, .lettering-card)::after {
  content: "";
  position: absolute;
  z-index: 9;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.34),
    inset 0 20px 26px -25px rgba(255,255,255,1),
    inset 0 -20px 28px -28px rgba(var(--glow-c-rgb), .34);
}

body.theme-poster :where(.image, .poster-wall, .gallery) > *,
body.theme-type :where(.image, .crop, .lettering-card) > * {
  position: relative;
  z-index: 6;
}

body.theme-poster .caption,
body.theme-type :where(.caption, .crop figcaption, .lettering-card > div) {
  position: relative;
  z-index: 10;
  border-top-color: rgba(255,255,255,.72) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.68), rgba(239,244,247,.34)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  backdrop-filter: blur(22px) saturate(165%);
}

body.theme-type .card.black :where(.caption, .crop figcaption) {
  color: #f5f3ef;
  border-top-color: rgba(255,255,255,.22) !important;
  background: linear-gradient(135deg, rgba(29,29,30,.74), rgba(42,40,40,.48)) !important;
}

/* Individual thumbnails get a restrained glazed rim without creating a new
   rectangular frame around their grid. */
body.theme-poster .gallery figure,
body.theme-type .lettering-card {
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 12px 28px rgba(34,43,54,.10);
}

/* Keep artwork glow inside the rounded clipping edge. This makes the rim
   visible above opaque images without reopening the old square row frame or
   allowing artwork to spill beyond its radius. */
body.theme-poster :where(.image, .poster-wall, .gallery figure).site-edge-glow-host,
body.theme-type :where(.image, .crop, .lettering-card).site-edge-glow-host {
  overflow: hidden !important;
}

body.theme-poster :where(.image, .poster-wall, .gallery figure).site-edge-glow-host > .site-edge-glow,
body.theme-type :where(.image, .crop, .lettering-card).site-edge-glow-host > .site-edge-glow {
  inset: 1px !important;
  z-index: 14 !important;
  padding: 2px;
  opacity: .78;
  filter:
    drop-shadow(0 0 2px rgba(var(--glow-b-rgb), 1))
    drop-shadow(0 0 7px rgba(var(--glow-a-rgb), .88))
    drop-shadow(0 0 13px rgba(var(--glow-c-rgb), .60));
}

body.theme-poster :where(.image, .poster-wall, .gallery figure).site-edge-glow-host:hover > .site-edge-glow,
body.theme-type :where(.image, .crop, .lettering-card).site-edge-glow-host:hover > .site-edge-glow {
  opacity: 1;
  filter:
    drop-shadow(0 0 3px rgba(var(--glow-b-rgb), 1))
    drop-shadow(0 0 10px rgba(var(--glow-a-rgb), .98))
    drop-shadow(0 0 17px rgba(var(--glow-c-rgb), .76));
}

/* Final wrapper reset after the shared artwork rules above. */
body.theme-poster :where(.poster-wall, .gallery) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.theme-poster :where(.poster-wall, .gallery)::before,
body.theme-poster :where(.poster-wall, .gallery)::after {
  content: none !important;
}

/* Type summary: the grid is layout-only. Keep the glass treatment on each
   rounded item so the three cards never read as one large square panel. */
body.theme-type .summary {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  isolation: auto;
  overflow: visible;
}

body.theme-type .summary::before,
body.theme-type .summary::after,
body.theme-type .summary > .site-edge-glow {
  display: none !important;
  content: none !important;
}

body.theme-type .summary article {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(255,255,255,.72) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.48), rgba(255,255,255,.18) 52%, rgba(224,228,232,.24)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 14px 32px rgba(49,47,45,.09) !important;
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  backdrop-filter: blur(22px) saturate(155%);
}

body.theme-type .summary article::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), inset 0 18px 24px -24px rgba(255,255,255,1);
}

/* Poster artwork must meet the rounded crop on every side.  The previous
   translucent white border plus the pale segment of the inset glow read as an
   empty strip on the left of narrow posters.  Keep the glass sheen as an
   overlay, but make the structural edge transparent and the luminous rim
   colour-only so it never consumes visible artwork. */
body.theme-poster :where(.poster-wall figure, .gallery figure) {
  border: 0 !important;
  background: transparent !important;
}

body.theme-poster :where(.poster-wall figure, .gallery figure)::before {
  background:
    radial-gradient(ellipse 82% 24% at 50% -8%, rgba(255,255,255,.34), transparent 70%),
    linear-gradient(112deg, rgba(255,255,255,.07), transparent 28%, transparent 74%, rgba(var(--glow-a-rgb), .06));
}

body.theme-poster :where(.poster-wall figure, .gallery figure)::after {
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(var(--glow-a-rgb), .42);
}

body.theme-poster :where(.poster-wall figure, .gallery figure).site-edge-glow-host > .site-edge-glow {
  inset: 0 !important;
  padding: 1px;
  background: conic-gradient(
    from var(--site-edge-angle) at 50% 50%,
    var(--glow-a) 0deg,
    #7893a5 92deg,
    var(--glow-c) 180deg,
    #7893a5 270deg,
    var(--glow-a) 360deg
  );
  filter:
    drop-shadow(0 0 4px rgba(var(--glow-a-rgb), .74))
    drop-shadow(0 0 9px rgba(var(--glow-c-rgb), .42));
}

body.theme-poster :where(.poster-wall figure, .gallery figure).site-edge-glow-host:hover > .site-edge-glow {
  filter:
    drop-shadow(0 0 6px rgba(var(--glow-a-rgb), .90))
    drop-shadow(0 0 12px rgba(var(--glow-c-rgb), .56));
}

/* Keep hero annotations inside their framed artwork.
   The original negative left offset looked intentional before the glow system,
   but now visually breaks the shared glass outline on every themed page. */
@media (min-width: 761px) {
  /* Desktop artwork layouts must keep their intrinsic height. CSS Grid's
     default stretch made a short image/text card match the tallest neighbour,
     leaving a large empty glass area below the actual content. */
  :where(
    .feature-grid, .two-grid, .three-grid,
    .feature, .grid2, .grid3,
    .about-grid, .philosophy, .source-grid
  ) {
    align-items: start;
  }

  :where(
    .feature-grid, .two-grid, .three-grid,
    .feature, .grid2, .grid3,
    .about-grid, .philosophy, .source-grid
  ) > :where(
    .image-card, .image, .overview-item, .quote-box,
    .stack, .source, .focus, .bio, .keywords
  ) {
    align-self: start;
    height: auto !important;
    min-height: 0 !important;
  }

  /* A few legacy cards carry inline min-height:100%; neutralise that only
     inside mixed desktop rows without changing the compact mobile layout. */
  :where(.feature-grid, .two-grid, .three-grid, .feature, .grid2, .grid3)
    > .overview-item {
    min-height: 0 !important;
  }

  .hero-card > .floating-note,
  .hero-visual > .hero-note {
    left: clamp(18px, 2.4vw, 30px) !important;
    right: auto !important;
    bottom: clamp(18px, 2.4vw, 30px) !important;
    width: min(320px, calc(100% - 36px));
    max-width: calc(100% - 36px) !important;
    z-index: 20 !important;
  }
}

@media (max-width: 760px) {
  .hero-card > .floating-note,
  .hero-visual > .hero-note {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100%;
    max-width: none !important;
    margin: 12px 0 0 !important;
  }
}

/* Smaller glass controls */
:where(.meta-chip, .chip, .keyword, .tag-row span, .btn-secondary, .contact-link) {
  border: 1px solid rgba(255,255,255,.76) !important;
  background: linear-gradient(140deg, rgba(255,255,255,.50), rgba(255,255,255,.20)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 9px 24px rgba(35,45,58,.08) !important;
  -webkit-backdrop-filter: blur(20px) saturate(175%);
  backdrop-filter: blur(20px) saturate(175%);
}

.image-card .cap {
  z-index: 7;
  border-top-color: rgba(255,255,255,.80) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.58), rgba(242,247,251,.26)) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
}

/* Dark editorial panels remain transparent, now with a polished smoked-glass finish. */
:where(.section-card.dark, .card.black, .card.dark, .card.contact, .philosophy > .quote, .end, .end-banner) {
  color: #f7f8f9;
  border-color: rgba(255,255,255,.30) !important;
  background: linear-gradient(145deg, rgba(15,18,22,.78), rgba(28,32,38,.55)) !important;
  box-shadow: 0 28px 76px rgba(10,13,18,.24), inset 0 1.5px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(0,0,0,.20) !important;
  -webkit-backdrop-filter: blur(34px) saturate(150%);
  backdrop-filter: blur(34px) saturate(150%);
}

.contact .contact-link {
  color: #fff;
  border-color: rgba(255,255,255,.30) !important;
  background: rgba(255,255,255,.12) !important;
}
.contact .contact-link:hover { color: #111; background: rgba(255,255,255,.82) !important; }

.progress { background: transparent !important; }
.progress span { box-shadow: 0 0 14px currentColor; }

/* Shared edge-only glow for navigation and glass content modules. */
.site-edge-glow-host {
  --site-edge-angle: 45deg;
  --site-edge-strength: 0;
  --site-edge-opacity: .38;
  isolation: isolate;
  overflow: visible !important;
}

.site-edge-glow {
  position: absolute !important;
  z-index: 30 !important;
  inset: -2px !important;
  display: block !important;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(
    from var(--site-edge-angle) at 50% 50%,
    var(--glow-a) 0deg,
    var(--glow-b) 70deg,
    var(--glow-c) 145deg,
    var(--glow-b) 215deg,
    var(--glow-a) 290deg,
    var(--glow-a) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--site-edge-opacity);
  filter:
    drop-shadow(0 0 3px rgba(var(--glow-b-rgb), .95))
    drop-shadow(0 0 9px rgba(var(--glow-a-rgb), .80))
    drop-shadow(0 0 17px rgba(var(--glow-c-rgb), .55));
  transition: opacity 220ms ease-out, filter 220ms ease-out;
}

.site-edge-glow-host:hover > .site-edge-glow,
.site-edge-glow-host:focus-within > .site-edge-glow {
  filter:
    drop-shadow(0 0 4px rgba(var(--glow-b-rgb), 1))
    drop-shadow(0 0 12px rgba(var(--glow-a-rgb), .92))
    drop-shadow(0 0 22px rgba(var(--glow-c-rgb), .68));
}

.header.site-edge-glow-host,
.site-header.site-edge-glow-host { overflow: visible !important; }

.header.site-edge-glow-host > .site-edge-glow,
.site-header.site-edge-glow-host > .site-edge-glow { inset: -2px !important; }

@media (prefers-reduced-motion: no-preference) {
  .project, .card, .stat, .coming, .btn, .contact-link {
    transition: transform 240ms cubic-bezier(.2,.8,.2,1), box-shadow 240ms ease !important;
  }
  .project:hover, .card:hover, .stat:hover { transform: translateY(-5px) scale(1.003); box-shadow: var(--glass-shadow-hover) !important; }
  :where(.project, .card, .stat, .coming):hover::before { opacity: 1; transform: translate3d(2%, 1%, 0) scale(1.03); }
}

@media (max-width: 760px) {
  body::before { inset: -36vmax; filter: blur(48px) saturate(112%); animation-duration: 32s; }
  .header, .site-header { top: 8px !important; width: calc(100% - 16px); border-radius: 16px; }
  :where(
    .stat, .hero-stat, .project, .coming, .hero-card, .section-card, .side-box, .side-in,
    .card, .hero-note, .hero-visual, .focus, .source, .contact,
    .overview-item, .summary-box, .summary, .quote-box, .floating-note,
    .visual, .image, .image-card, .poster-wall, .crop, .gallery
  ) {
    -webkit-backdrop-filter: blur(20px) saturate(155%);
    backdrop-filter: blur(20px) saturate(155%);
    box-shadow: 0 15px 38px rgba(39,49,62,.11), inset 0 1px 0 rgba(255,255,255,.90) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::before { animation: none; transform: scale(1.08); }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media (prefers-reduced-transparency: reduce) {
  :where(.header, .site-header, .stat, .hero-stat, .project, .coming, .hero-card, .section-card, .card, body > main.wrap) {
    background: rgba(248,250,252,.94) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}