/* Shared layout rhythm. Keep case-specific compositions and source ratios. */
:root {
 --page-gutter: 36px;
 --section-space: 96px;
 --case-space: 80px;
 --layout-gap: 64px;
 --card-gap: 24px;
 --copy-size: 16px;
 --copy-leading: 1.85;
 --card-radius: 16px;
}
.section { padding: var(--section-space) var(--page-gutter); }
.section > * { max-width: var(--max); margin-inline: auto; }
.section-heading, .section-intro { margin-bottom: 48px; }
.wide-case-heading { margin-bottom: 32px; }
.operation-case, .wide-media-case, .skills-section-block, .standalone-product-video, .product-strip, .project-collage { margin-bottom: var(--case-space); }
.operation-case:last-child, .wide-media-case:last-child, .skills-section-block:last-child { margin-bottom: 0; }
.feature-case, .product-case { margin-bottom: 32px; }
.project-video-wide { margin-bottom: var(--case-space); }
.wide-media-case, .skills-section-block, .operation-case-wide, .operation-case-split { padding-top: 48px; }
.media-grid, .film-expanded-grid, .project-side-gallery, .product-strip { gap: var(--card-gap); }
.media-grid > figure { margin: 0; min-width: 0; }
.media-slot:not(.qr-media):not(.phone-slot):not(.profile-slot), .project-cover, .film-expanded-grid a { border-radius: var(--card-radius); }
.media-grid figcaption, .media-note { margin-top: 16px; line-height: 1.5; }
.standalone-product-video .wide-case-heading { text-align: left; }
.case-copy .result-copy, .case-copy .case-list, .copy-block p, .feature-copy > p, .jewelry-promo-copy > p, .animation-brand-copy > p:not(.case-label):not(.animation-brand-subtitle), .aigc-experience-duties p, .aigc-experience-results p { font-size: var(--copy-size); line-height: var(--copy-leading); }
.case-list { margin-bottom: 24px; }
.case-list li { margin-bottom: 12px; }
.meta-line, .aigc-experience-meta { font-size: 14px; line-height: 1.7; }
.animation-brand-copy > p:not(.case-label) { margin-top: 24px; }
.animation-brand-case { margin-top: 0; margin-bottom: var(--case-space); padding-top: 48px; column-gap: var(--layout-gap); }
.aigc-experience.section { padding-top: 64px; padding-bottom: var(--section-space); }
.aigc-experience-inner { padding-bottom: 48px; }
.aigc-experience-copy { max-width: 680px; }
.aigc-experience-duties > div { margin-bottom: 24px; }
.aigc-experience-results { margin-top: 32px; }
.film-expanded-group + .film-expanded-group { margin-top: 48px; }
@media(min-width:981px) {
 .operation-case-main, .operation-case-split, .feature-case, .jewelry-promo-case { column-gap: var(--layout-gap); }
}
@media(max-width:980px) {
 :root { --page-gutter: 28px; --section-space: 80px; --case-space: 64px; --layout-gap: 40px; }
}
@media(max-width:640px) {
 :root { --page-gutter: 20px; --section-space: 64px; --case-space: 48px; --layout-gap: 24px; --card-gap: 16px; --copy-size: 15px; --card-radius: 12px; }
 .section-heading, .section-intro, .wide-case-heading { margin-bottom: 32px; }
 .wide-media-case, .skills-section-block, .operation-case-wide, .operation-case-split, .animation-brand-case { padding-top: 32px; }
 .aigc-experience.section { padding-top: 40px; }
 .media-grid figcaption, .media-note { margin-top: 12px; }
 .performance-metrics figcaption { gap: 6px; white-space: normal; flex-wrap: wrap; }
 .film-expanded-group + .film-expanded-group { margin-top: 32px; }
}/* Luxury video: edge-to-edge picture in the page and fullscreen. */
.media-slot[data-media-id="product-luxury"] { border: 0; }
.media-slot[data-media-id="product-luxury"] video { object-fit: cover !important; background: transparent; }
.media-slot[data-media-id="product-luxury"] video:fullscreen,
.media-slot[data-media-id="product-luxury"] video:-webkit-full-screen { width: 100%; height: 100%; object-fit: cover !important; border-radius: 0; }

/* PDF skill examples, scoped to the skills chapter. */
#skills .skills-reference-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-bottom:32px; }
#skills .skills-reference-grid:has(>figure:nth-child(3)):not(:has(>figure:nth-child(4))) { grid-template-columns:repeat(3,minmax(0,1fr)); }
#skills .skills-reference-grid.stack { grid-template-columns:1fr; }
#skills .skills-reference-grid figure { margin:0; min-width:0; }
#skills .skills-reference-grid a { display:block; background:#fff; border-radius:16px; overflow:hidden; }
#skills .skills-reference-grid img { display:block; width:100%; height:clamp(180px,24vw,340px); object-fit:contain; }
#skills .skills-reference-grid.stack img { height:auto; }
#skills .skills-reference-grid figcaption { margin-top:12px; text-align:center; color:var(--muted); font-size:14px; line-height:1.6; }
@media(max-width:640px) { #skills .skills-reference-grid, #skills .skills-reference-grid:has(>figure:nth-child(3)):not(:has(>figure:nth-child(4))) { grid-template-columns:1fr; gap:24px; } #skills .skills-reference-grid img {height:auto;max-height:460px;} }
/* Face swap: one large workflow image beside two aligned comparisons. */
@media (min-width: 641px) {
 #skills .skills-reference-grid.face {
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  height: clamp(320px, 33vw, 470px);
 }
 #skills .skills-reference-grid.face > figure:first-child { grid-row: 1 / 3; }
 #skills .skills-reference-grid.face a,
 #skills .skills-reference-grid.face img { width: 100%; height: 100%; }
 #skills .skills-reference-grid.face img { object-fit: contain; }
}
/* Fill the face-swap cards and align the outer edges. */
#skills .skills-reference-grid.face > figure,
#skills .skills-reference-grid.face a { overflow: hidden; }
@media (min-width: 641px) {
 #skills .skills-reference-grid.face img { object-fit: cover; }
}
/* IP character views: artwork fills each card without white mat or captions. */
#skills .skills-ip-views .skills-reference-grid a { aspect-ratio: 16 / 9; background: transparent; }
#skills .skills-ip-views .skills-reference-grid img { width: 100%; height: 100%; object-fit: cover; }
#skills .skills-no-mat .skills-reference-grid a { background: transparent; }
#skills .skills-no-mat .skills-reference-grid img { object-fit: cover; }
#skills .skills-reference-grid a { background: transparent; }
#skills .skills-reference-grid img { object-fit: cover; }
/* Keep source orientation for the image skill examples. */
#skills .skills-reference:not(.skills-ip-views) .skills-reference-grid:not(.face) a { height: auto; }
#skills .skills-reference:not(.skills-ip-views) .skills-reference-grid:not(.face) img { height: auto; max-height: none; object-fit: contain; }
#skills .skills-interior figcaption { display: none; }
#skills .skills-lineart figcaption { display: none; }
/* Product background transformations: one large comparison with two smaller pairs. */
@media (min-width: 981px) {
 #skills .skills-product-background {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  grid-template-rows: auto 1fr 1fr;
  column-gap: 88px;
  row-gap: 36px;
 }
 #skills .skills-product-background .wide-case-heading { grid-column: 1 / -1; margin-bottom: 0; }
 #skills .skills-product-background .skills-reference-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; margin: 0; }
 #skills .skills-product-background .skills-reference-grid:nth-of-type(2) { grid-column: 1; grid-row: 2 / 4; align-self: center; }
 #skills .skills-product-background .skills-reference-grid:nth-of-type(3) { grid-column: 2; grid-row: 2; }
 #skills .skills-product-background .skills-reference-grid:nth-of-type(4) { grid-column: 2; grid-row: 3; }
 #skills .skills-product-background .skills-reference-grid::after { content: "→"; position: absolute; top: calc(50% - 16px); left: 50%; transform: translateX(-50%); color: #292524; font: 32px/1 Arial, sans-serif; }
 #skills .skills-product-background .skills-reference-grid a { aspect-ratio: 3 / 4; }
 #skills .skills-product-background .skills-reference-grid img { width: 100%; height: 100%; object-fit: cover; }
 #skills .skills-product-background figcaption { margin-top: 10px; }
 #skills .skills-product-background figcaption { display: none; }

 /* Match the PDF's original-to-result layouts. */
 #skills .skills-lineart .lineart-process { position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px; }
 #skills .skills-lineart .lineart-process::after,
 #skills .skills-interior .interior-room::after,
 #skills .skills-interior .interior-still::after { content: "→"; position: absolute; top: calc(50% - 16px); left: 33.333%; transform: translateX(-50%); color: #292524; font: 32px/1 Arial, sans-serif; }
 #skills .skills-lineart .lineart-process,
 #skills .skills-interior .interior-room,
 #skills .skills-interior .interior-still,
 #skills .skills-interior .interior-living,
 #skills .skills-interior .interior-villa { position: relative; }
 #skills .skills-interior .skills-reference-grid.interior-living { grid-template-columns: minmax(0, .86fr) minmax(0, 1fr) !important; grid-template-rows: auto auto; gap: 20px 96px; }
 #skills .skills-interior .interior-living > figure:first-child { grid-row: 1 / 3; align-self: center; }
 #skills .skills-interior .interior-living::after { content: "→"; position: absolute; top: calc(50% - 16px); left: 44%; transform: translateX(-50%); color: #292524; font: 32px/1 Arial, sans-serif; }
 #skills .skills-interior .interior-room,
 #skills .skills-interior .interior-still { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 96px; }
 #skills .skills-interior .interior-villa { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 20px 72px; }
 #skills .skills-interior .interior-villa > figure:first-child { grid-column: 1; grid-row: 1 / 3; align-self: center; }
 #skills .skills-interior .interior-villa > figure:nth-child(2) { grid-column: 2; grid-row: 1 / 3; align-self: center; }
 #skills .skills-interior .interior-villa > figure:nth-child(3) { grid-column: 3; grid-row: 1; }
 #skills .skills-interior .interior-villa > figure:nth-child(4) { grid-column: 3; grid-row: 2; }
 #skills .skills-interior .interior-villa::after { content: "→"; position: absolute; top: calc(50% - 16px); left: 33.333%; transform: translateX(-50%); color: #292524; font: 32px/1 Arial, sans-serif; }
}

@media (max-width: 640px) {
 #skills .skills-ip-views .skills-reference-grid img { max-height: none; }
}
/* Compact the personal profile into the aligned two-column resume layout. */
@media (min-width: 981px) {
  #about .about-grid {
    max-width: 1120px;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 68px;
  }

  #about .profile-slot {
    width: 260px;
    margin-bottom: 14px;
  }

  #about .media-slot.profile-slot {
    border-width: 5px;
  }

  #about .profile-name {
    margin-bottom: 20px;
    font-size: 24px;
    line-height: 1.3;
    white-space: nowrap;
  }

  #about .contact-list {
    padding-top: 18px;
  }

  #about .contact-list > div {
    margin-bottom: 7px;
  }

  #about .copy-block {
    padding-bottom: 22px;
    margin-bottom: 22px;
  }

  #about .copy-block h3 {
    margin-bottom: 10px;
    font-size: 18px;
  }

  #about .copy-block p {
    max-width: none;
    font-size: 16px;
    line-height: 1.72;
  }
}

/* Place the account screenshot beside the AIGC experience copy. */
@media (min-width: 901px) {
  .aigc-experience .aigc-experience-inner {
    display: grid;
    grid-template-columns: minmax(0, 680px) minmax(0, 320px);
    justify-content: space-between;
    gap: 64px;
    align-items: start;
  }
  .aigc-experience .aigc-experience-copy { min-width: 0; }
  .aigc-experience .aigc-experience-image {
    width: 100%;
    max-width: 320px;
    justify-self: center;
    position: relative;
    align-self: stretch;
    min-height: 0;
    overflow: hidden;
    border-radius: 12px;
  }
  .aigc-experience .aigc-experience-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }
}
@media (max-width: 900px) {
  .aigc-experience .aigc-experience-inner { display: grid; grid-template-columns: 1fr; gap: 32px; }
  .aigc-experience .aigc-experience-image { width: min(100%, 320px); margin-inline: auto; }
}
.aigc-experience .aigc-experience-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
/* The Xiaohongshu screenshot is 344 × 630; match its frame to remove empty space. */
#ops-xiaohongshu .media-slot { aspect-ratio: 344 / 630; }
#ops-douyin .media-slot { aspect-ratio: 1080 / 2023; }
/* Account screenshots remain flush with their frames on hover and keyboard focus. */
#ops-xiaohongshu .media-slot.has-media,
#ops-douyin .media-slot.has-media,
#ops-xiaohongshu .media-slot.has-media:hover,
#ops-douyin .media-slot.has-media:hover,
#ops-xiaohongshu .media-slot.has-media:focus-visible,
#ops-douyin .media-slot.has-media:focus-visible {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
#ops-xiaohongshu .media-slot.has-media img,
#ops-douyin .media-slot.has-media img {
  object-fit: cover;
  object-position: top center;
}
#ops-xiaohongshu .media-slot.has-media img {
  transform: scale(1.08);
  transform-origin: center;
}
@media (min-width: 901px) {
  .aigc-experience .aigc-experience-image img { height: 100%; }
}