/* 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;
}

.aigc-experience .aigc-highlight {
  color: var(--coral-dark);
  font-size: 1.08em;
  font-weight: 700;
}
.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; }
.responsive-picture { display:block; width:100%; }
#skills .skills-reference-grid.face .responsive-picture,
#skills .skills-ip-views .responsive-picture { height:100%; }
/* Hide the thin dark edge embedded along the top of the first cinematic face-swap image. */
#skills .skills-reference-grid.stack > figure:first-child img { transform: translateY(-4px) scale(1.015); transform-origin: top center; }
#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 { content: "→"; position: absolute; top: calc(50% - 16px); left: 33.333%; transform: translateX(-50%); color: #292524; font: 32px/1 Arial, sans-serif; }
 #skills .skills-interior .interior-room::after,
 #skills .skills-interior .interior-still::after { content: "→"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #292524; font: 32px/1 Arial, sans-serif; pointer-events: none; }
 #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::before,
 #skills .skills-interior .interior-living::after { content: ""; position: absolute; left: 46.5%; width: 35px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 30'%3E%3Cpath d='M2 15H69M60 6l10 9-10 9' fill='none' stroke='%23292524' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; }
 #skills .skills-interior .interior-living::before { top: 42%; transform: translate(-50%, -50%) rotate(-25deg); }
 #skills .skills-interior .interior-living::after { top: 58%; transform: translate(-50%, -50%) rotate(25deg); }
 #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%; }
}

/* Keep the six main sections visible immediately under the mobile header. */
.mobile-primary-nav { display: none; }
@media (max-width: 640px) {
 .site-nav { overflow: visible; }
 .site-nav .nav-mark { gap: 8px; white-space: nowrap; }
 .site-nav .nav-mark span { display: inline; font-size: clamp(8px, 2.4vw, 10px); letter-spacing: .1em; }
 .site-nav .nav-toggle { display: none; }
 .mobile-primary-nav {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  min-height: 56px;
  padding: 0 8px;
  border-bottom: 1px solid rgba(72, 58, 55, .12);
  background: rgba(255, 253, 252, .97);
  box-shadow: 0 8px 20px rgba(40, 28, 27, .04);
  overflow: hidden;
 }
 .mobile-primary-nav a {
  min-width: 0;
  padding: 15px 0;
  color: #575151;
  font-size: clamp(11px, 3vw, 13px);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
 }
 .mobile-primary-nav a:focus-visible { color: var(--coral-dark); outline-offset: 3px; }
 .site-nav .nav-links { top: 113px; max-height: calc(100dvh - 125px); overflow-y: auto; }
 #about, #operations, #projects, #products, #skills, #contact { scroll-margin-top: 126px; }
}
/* Show the complete replacement account screenshot, including its post grid. */
@media (min-width: 901px) {
  .aigc-experience .aigc-experience-image { align-self: start; }
  .aigc-experience .aigc-experience-image img { position: static; height: auto; object-fit: contain; }
}

/* Three before-and-after product scenes, arranged like the supplied reference. */
@media (min-width: 981px) {
 #skills .skills-product-background {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  grid-template-rows: auto auto auto;
  column-gap: clamp(42px, 5vw, 74px);
  row-gap: 12px;
  max-width: 1160px;
  margin-inline: auto;
 }
 #skills .skills-product-background .skills-reference-grid { gap: clamp(38px, 4.5vw, 62px); }
 #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:nth-of-type(2) a { aspect-ratio: 3 / 4; }
 #skills .skills-product-background .skills-reference-grid:nth-of-type(3) a,
 #skills .skills-product-background .skills-reference-grid:nth-of-type(4) a { aspect-ratio: 4 / 5; }
}
@media (max-width: 640px) {
 #skills .skills-product-background .skills-reference-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 30px;
  position: relative;
  margin-bottom: 28px;
 }
 #skills .skills-product-background .skills-reference-grid a { aspect-ratio: 3 / 4; }
 #skills .skills-product-background .skills-reference-grid img { width: 100%; height: 100% !important; object-fit: cover !important; }
 #skills .skills-product-background .skills-reference-grid::after {
  content: "→";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font: 24px/1 Arial, sans-serif;
  color: #292524;
 }
 #skills .skills-product-background .skills-reference-grid figcaption { display: block; font-size: 11px; margin-top: 6px; }
}

/* Desktop reading width: match the outer edges of chapters, media, resume and navigation. */
@media (min-width: 981px) {
 :root { --max: 1160px; --page-gutter: clamp(56px, 7vw, 136px); }
 #about .about-grid,
 #skills .skills-product-background { max-width: var(--max); }
 .chapter-bar { max-width: var(--max) !important; padding-inline: 24px; }
 #operations.operation-company-bar { width: calc(100% - 2 * var(--page-gutter)); }
 .site-nav,
 .site-footer { padding-inline: max(var(--page-gutter), calc((100vw - var(--max)) / 2)); }
 .hero-bottom { left: max(var(--page-gutter), calc((100vw - var(--max)) / 2)); right: max(var(--page-gutter), calc((100vw - var(--max)) / 2)); }
}

/* Separate individual works while leaving the four large chapter titles unframed. */
.aigc-experience-inner,
#product-jewelry-showcase,
.operation-case,
#projects .feature-case,
#products .feature-case,
#products .wide-media-case,
#skills .skills-section-block {
 box-sizing: border-box;
 border: 1px solid rgba(142, 99, 98, .2);
 border-radius: 22px;
 padding: clamp(24px, 3vw, 40px);
 background: linear-gradient(140deg, rgba(255, 255, 255, .8), rgba(255, 250, 249, .56));
 box-shadow: 0 18px 48px rgba(91, 55, 54, .045);
}
#projects .feature-case:has(+ .project-video-wide) {
 margin-bottom: 0;
 border-bottom: 0;
 border-radius: 22px 22px 0 0;
 box-shadow: none;
}
#projects .feature-case + .project-video-wide {
 box-sizing: border-box;
 border: 1px solid rgba(142, 99, 98, .2);
 border-top: 0;
 border-radius: 0 0 22px 22px;
 padding: 0 clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px);
 background: rgba(255, 250, 249, .56);
 box-shadow: 0 18px 48px rgba(91, 55, 54, .045);
}
/* The YouTube role and its channel data describe one operation project. */
#ops-youtube {
 margin-bottom: 0;
 border-bottom: 0;
 border-radius: 22px 22px 0 0;
 background: rgba(255, 252, 251, .72);
 box-shadow: none;
}
#ops-youtube + .operation-case-wide {
 position: relative;
 margin-top: 0;
 border-top: 0;
 border-radius: 0 0 22px 22px;
 padding-top: 40px;
 background: rgba(255, 252, 251, .72);
}
#ops-youtube + .operation-case-wide::before {
 content: "";
 position: absolute;
 top: 0;
 left: clamp(24px, 3vw, 40px);
 right: clamp(24px, 3vw, 40px);
 height: 1px;
 background: rgba(142, 99, 98, .17);
}
/* The AIGC role and jewelry videos belong to the same company project. */
.aigc-experience .aigc-experience-inner {
 border-bottom: 0;
 border-radius: 22px 22px 0 0;
 background: rgba(255, 252, 251, .72);
 box-shadow: none;
}
#product-jewelry-showcase {
 position: relative;
 border-top: 0;
 border-radius: 0 0 22px 22px;
 background: rgba(255, 252, 251, .72);
}
#product-jewelry-showcase::before {
 content: "";
 position: absolute;
 top: 0;
 left: clamp(24px, 3vw, 40px);
 right: clamp(24px, 3vw, 40px);
 height: 1px;
 background: rgba(142, 99, 98, .17);
}
@media (max-width: 640px) {
  .nav-links .skills-submenu,
  .nav-links .about-submenu { display: none; }
  .thanks-contacts > :nth-child(1) { order: 3; }
  .thanks-contacts > :nth-child(2) { order: 2; }
  .thanks-contacts > :nth-child(3) { order: 1; }
  #project-peoples-daily > .project-cover,
  #project-shanghai-bank > .project-cover,
  #project-dior > .project-cover,
  #project-hunan-education > .project-cover,
  #project-china-life > .project-cover,
  #product-luxury-case > .project-cover { display: none; }
  .aigc-experience-inner,
 #product-jewelry-showcase,
 .operation-case,
 #projects .feature-case,
 #products .feature-case,
 #products .wide-media-case,
 #skills .skills-section-block { border-radius: 16px; padding: 20px; }
 #projects .feature-case:has(+ .project-video-wide) { border-radius: 16px 16px 0 0; }
 #projects .feature-case + .project-video-wide { border-radius: 0 0 16px 16px; padding: 0 20px 20px; }
 #ops-youtube { border-radius: 16px 16px 0 0; }
 #ops-youtube + .operation-case-wide { border-radius: 0 0 16px 16px; padding-top: 28px; }
 #ops-youtube + .operation-case-wide::before { left: 20px; right: 20px; }
 .aigc-experience .aigc-experience-inner { border-radius: 16px 16px 0 0; }
 #product-jewelry-showcase { border-radius: 0 0 16px 16px; }
 #product-jewelry-showcase::before { left: 20px; right: 20px; }
 /* Keep operation text and figures inside the mobile card's inner edge. */
 #ops-youtube { grid-template-columns: minmax(0, 1fr); }
 #ops-youtube .case-copy,
 #ops-youtube .phone-cluster { min-width: 0; width: 100%; max-width: 100%; }
 #ops-youtube .case-copy { overflow-wrap: anywhere; }
 #ops-youtube .phone-cluster { box-sizing: border-box; }
 #ops-youtube .metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
}

/* Show all three stages together on narrow screens. */
@media (max-width: 640px) {
 #skills .skills-lineart .lineart-process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  overflow: visible;
  padding-bottom: 0;
 }
 #skills .skills-lineart .lineart-process > figure {
  position: relative;
  min-width: 0;
 }
 #skills .skills-lineart .lineart-process > figure:first-child::after {
  content: "→";
  position: absolute;
  top: 50%;
  left: calc(100% + 2px);
  transform: translateY(-50%);
  font: 18px/1 Arial, sans-serif;
  color: #292524;
  pointer-events: none;
 }
 #skills .skills-lineart .lineart-process a { aspect-ratio: 3 / 4; }
#skills .skills-lineart .lineart-process img { width: 100%; height: 100%; object-fit: contain; }
}

/* Keep the living-room before/after comparison together on phones. */
@media (max-width: 640px) {
 #skills .skills-interior .skills-reference-grid.interior-living {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important;
  grid-template-rows: repeat(2, auto);
  column-gap: 30px !important;
  row-gap: 12px !important;
  align-items: center;
 }
 #skills .skills-interior .interior-living > figure:first-child {
  position: relative;
  grid-row: 1 / 3;
  align-self: center;
 }
 #skills .skills-interior .interior-living > figure:first-child::after {
  content: "→";
  position: absolute;
  top: 50%;
  left: calc(100% + 5px);
  transform: translateY(-50%);
  font: 18px/1 Arial, sans-serif;
  color: #292524;
  pointer-events: none;
 }
 #skills .skills-interior .interior-living a { aspect-ratio: 16 / 9; }
 #skills .skills-interior .interior-living .responsive-picture { height: 100%; }
#skills .skills-interior .interior-living img {
  width: 100%;
  height: 100% !important;
  max-height: none;
  object-fit: cover !important;
 }
 #skills .skills-interior .skills-reference-grid.interior-room,
 #skills .skills-interior .skills-reference-grid.interior-still {
  position: relative;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 30px !important;
  align-items: center;
 }
 #skills .skills-interior .interior-room::after,
 #skills .skills-interior .interior-still::after {
  content: "→";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font: 18px/1 Arial, sans-serif;
  color: #292524;
  pointer-events: none;
 }
 #skills .skills-interior .skills-reference-grid.interior-villa {
  position: relative;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, auto);
  column-gap: 22px !important;
  row-gap: 10px !important;
  align-items: center;
 }
 #skills .skills-interior .interior-villa > figure:first-child {
  position: relative;
  grid-column: 1;
  grid-row: 1 / 3;
 }
 #skills .skills-interior .interior-villa > figure:nth-child(2) {
  grid-column: 2;
  grid-row: 1 / 3;
 }
 #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 > figure:first-child::after {
  content: "→";
  position: absolute;
  top: 50%;
  left: calc(100% + 3px);
  transform: translateY(-50%);
  font: 16px/1 Arial, sans-serif;
  color: #292524;
  pointer-events: none;
 }
 #skills .skills-interior .interior-room a,
 #skills .skills-interior .interior-still a,
 #skills .skills-interior .interior-villa a { aspect-ratio: 16 / 10; }
 #skills .skills-interior .interior-room .responsive-picture,
 #skills .skills-interior .interior-still .responsive-picture,
 #skills .skills-interior .interior-villa .responsive-picture { height: 100%; }
 #skills .skills-interior .interior-room img,
 #skills .skills-interior .interior-still img,
#skills .skills-interior .interior-villa img {
  width: 100%;
  height: 100% !important;
  max-height: none;
  object-fit: cover !important;
 }
}

/* Match the desktop two-column IP turnaround gallery on phones. */
@media (max-width: 640px) {
 #skills .skills-ip-views .skills-reference-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 12px;
 }
 #skills .skills-ip-views .skills-reference-grid:last-child { margin-bottom: 0; }
 #skills .skills-ip-views .skills-reference-grid a { aspect-ratio: 16 / 9; }
#skills .skills-ip-views .skills-reference-grid img {
  height: 100% !important;
  max-height: none;
  object-fit: cover;
 }
}

/* Keep the cinematic image sets in the same grid order as desktop. */
@media (max-width: 640px) {
 #skills .film-expanded-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px;
 }
 #skills .film-expanded-grid.film-expanded-three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
 }
 #skills .film-expanded-grid a,
 #skills .film-expanded-grid .responsive-picture { aspect-ratio: 16 / 9; }
#skills .film-expanded-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
 }
}

/* Product background: one tall comparison beside two smaller comparisons. */
@media (max-width: 640px) {
 #skills .skills-product-background {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 12px;
  row-gap: 10px;
 }
 #skills .skills-product-background .wide-case-heading {
  grid-column: 1 / -1;
  margin-bottom: 0;
 }
 #skills .skills-product-background .skills-reference-grid {
  gap: 22px !important;
  margin: 0;
  align-items: center;
 }
 #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:nth-of-type(3) a,
 #skills .skills-product-background .skills-reference-grid:nth-of-type(4) a { aspect-ratio: 4 / 5; }
 #skills .skills-product-background .skills-reference-grid .responsive-picture { height: 100%; }
 #skills .skills-product-background .skills-reference-grid figcaption { display: none; }
#skills .skills-product-background .skills-reference-grid::after { font-size: 16px; }
}

/* Center the gallery controls by drawing the chevrons inside the buttons. */
.media-modal .modal-previous,
.media-modal .modal-next {
 padding: 0;
 line-height: 0;
 font-size: 0;
}
.media-modal .modal-previous::before,
.media-modal .modal-next::before {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 width: 11px;
 height: 11px;
 border: solid currentColor;
 border-width: 2px 2px 0 0;
}
.media-modal .modal-previous::before { transform: translate(-50%, -50%) rotate(-135deg); }
.media-modal .modal-next::before { transform: translate(-50%, -50%) rotate(45deg); }
@media (max-width: 640px) {
 .media-modal .modal-previous,
 .media-modal .modal-next { width: 38px; height: 48px; }
 .media-modal .modal-previous { left: 8px; }
 .media-modal .modal-next { right: 8px; }
}

/* Keep enlarged images centered within the usable viewport on both sizes. */
.media-modal { padding-block: 54px; }
.media-modal .modal-frame { width: min(96vw, 100%); min-width: 0; }
.media-modal .modal-frame img { max-width: 100%; }
.media-modal.project-image-preview .modal-frame { width: min(90vw, 100%); }

.ops-singing-grid .media-slot { position: relative; }
@media (min-width: 901px) {
  #about-profile, #about-projects, #about-results, #about-skills { scroll-margin-top: 94px; }
  #skills .skills-section-block[id] { scroll-margin-top: 90px; }
}
@media (min-width: 641px) {
  #product-sales-case .media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Animation case: shared heading, aligned copy and video, and project-style metadata. */
#product-animation-case { row-gap: 30px; }
#product-animation-case .animation-brand-heading { grid-column: 1 / -1; }
#product-animation-case .animation-brand-heading h3 { margin: 14px 0 0; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.4; }
#product-animation-case .animation-brand-copy { max-width: none; min-width: 0; }
#product-animation-case .animation-brand-copy > p { margin: 0; color: #474241; font-size: var(--copy-size); line-height: var(--copy-leading); }
#product-animation-case .animation-brand-copy .meta-table { margin-top: 28px; }
#product-animation-case .animation-brand-media { align-self: start; }
@media (min-width: 701px) {
  #product-animation-case .animation-brand-media { width: 78%; max-width: 540px; justify-self: start; }
}
@media (max-width: 700px) {
  #product-animation-case { row-gap: 24px; }
  #product-animation-case .animation-brand-heading { grid-column: 1; }
}

/* Project experience uses two aligned columns on desktop and a single readable column on phones. */
#about-projects .project-experience-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
  row-gap: 4px;
  max-width: none;
}
#about-projects .project-experience-grid span { display: block; min-width: 0; }
@media (max-width: 640px) {
  #about-projects .project-experience-grid { grid-template-columns: 1fr; row-gap: 2px; }
}
@media (min-width: 641px) {
  #about-projects .project-experience-grid span:nth-child(1) { grid-column: 2; grid-row: 1; }
  #about-projects .project-experience-grid span:nth-child(2) { grid-column: 2; grid-row: 2; }
  #about-projects .project-experience-grid span:nth-child(3) { grid-column: 1; grid-row: 3; }
  #about-projects .project-experience-grid span:nth-child(4) { grid-column: 2; grid-row: 3; }
  #about-projects .project-experience-grid span:nth-child(5) { grid-column: 1; grid-row: 2; }
  #about-projects .project-experience-grid span:nth-child(6) { grid-column: 1; grid-row: 1; }
}
.aigc-experience-results h3 { font-weight: 700; }

/* Desktop ending: keep the original QR and contact values while matching the reference layout. */
@media (min-width: 641px) {
  .site-shell #contact.thanks {
    min-height: 76vh;
    background: transparent;
  }
  .site-shell #contact.thanks::before {
    display: block;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 32% 46% at 53% 46%, rgba(242, 158, 155, .48), rgba(246, 199, 195, .25) 45%, transparent 82%);
    filter: blur(22px);
  }
  #contact .thanks-content { transform: translateY(-2vh); }
  #contact h2 {
    margin-bottom: 20px;
    background: linear-gradient(90deg, #e6b8b5 0%, #ca332d 32%, #bd2924 65%, #e5a4a1 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-size: clamp(80px, 6.5vw, 116px);
    letter-spacing: .025em;
    text-shadow: none;
  }
  #contact .media-slot.has-media.qr-media {
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-radius: 0;
  }
  #contact .qr-media img { transform: translateY(-10px) scale(1.7); }
  #contact .thanks-contacts { bottom: 46px; color: #171717; font-size: clamp(16px, 1.25vw, 21px); }
  #contact .thanks-contacts a,
  #contact .thanks-contacts > span { gap: 7px; }
  #contact .thanks-contacts span span,
  #contact .thanks-contacts > a > span { color: #111; }
  #contact .thanks-contacts > a > span::before,
  #contact .thanks-contacts > span > span::before { content: '['; }
  #contact .thanks-contacts > a > span::after,
  #contact .thanks-contacts > span > span::after { content: ']'; }
}

/* Compact mobile ending, using the existing QR image and contact details. */
@media (max-width: 640px) {
  .site-shell #contact.thanks {
    display: block;
    min-height: 520px;
    padding: 108px 20px 165px;
    background: transparent;
  }
  .site-shell #contact.thanks::before {
    display: block;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 75% 43% at 52% 42%, rgba(242, 158, 155, .45), rgba(246, 199, 195, .2) 50%, transparent 85%);
    filter: blur(16px);
  }
  #contact .thanks-content { transform: none; }
  #contact h2 {
    margin-bottom: 22px;
    background: linear-gradient(90deg, #e2aaa6, #c42d27 40%, #c42d27 65%, #dda19d);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: none;
  }
  #contact .media-slot.has-media.qr-media {
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-radius: 0;
  }
  #contact .qr-media img { transform: translateY(-10px) scale(1.7); }
}
.ops-singing-grid .video-fullscreen-button {
 position: absolute;
 right: 7px;
 bottom: 7px;
 z-index: 3;
 display: grid;
 place-items: center;
 width: 30px;
 height: 30px;
 padding: 0;
 border: 1px solid rgba(255,255,255,.85);
 border-radius: 6px;
 background: rgba(20,18,18,.72);
 color: #fff;
 font: 22px/1 Arial,sans-serif;
 cursor: pointer;
}
@media (max-width: 640px) {
 .ops-singing-grid .video-fullscreen-button { display: none; }
 .ops-singing-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px 12px;
 }
 .ops-singing-grid > figure { min-width: 0; }
 .ops-singing-grid .video-cover-button strong { font-size: 12px; letter-spacing: 0; }
 .ops-singing-grid figcaption { font-size: 12px; line-height: 1.35; }
 /* Fullscreen uses the source frame (16:9 for landscape clips), without cropping. */
 html body .media-slot.has-media[data-media-type="video"] video:fullscreen,
 html body .media-slot.has-media[data-media-type="video"] video:-webkit-full-screen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  touch-action: manipulation;
  transform: none !important;
  border-radius: 0 !important;
  background: #000 !important;
 }
}

/* The four cinematic titles are plain headings without leading markers. */
.film-expanded-group h4::before { content: none; }

/* Face-swap showcase: match the product-background card width and show full images. */
@media (min-width: 981px) {
 #skills .skills-reference:has(> .skills-reference-grid.face) {
  max-width: var(--max);
 }
 #skills .skills-reference-grid.face {
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
 }
 #skills .skills-reference-grid.face img { object-fit: contain; }
 #skills .skills-reference:has(> .skills-reference-grid.face) > .skills-reference-grid.stack {
  width: 100%;
  max-width: none;
  margin-inline: 0;
 }
 #skills .skills-reference:has(> .skills-reference-grid.face) > .skills-reference-grid.stack > figure:first-child img {
  transform: none;
 }
}

/* Use a CSS triangle so iOS cannot render the play symbol as a blue emoji. */
.mobile-video-fullscreen-button { display: none; }
.portrait-video-controls { display: none; }
.video-cover-button .play-glyph { font-style: normal; }
@media (max-width: 640px) {
  .media-slot.has-media[data-media-type="video"] video[data-active="true"] ~ .portrait-video-controls {
    position: absolute;
    inset: auto 0 0;
    z-index: 5;
    display: block;
    padding: 8px 12px 10px;
    color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,.86));
    opacity: 1;
    transition: opacity .32s ease-in-out;
  }
  .media-slot.has-media[data-media-type="video"] video[data-active="true"] ~ .portrait-video-controls[data-hidden="true"] { opacity: 0; pointer-events: none; }
  .portrait-video-controls-row { display: flex; align-items: center; gap: 10px; min-height: 34px; }
  .portrait-video-controls button { display: grid; place-items: center; width: 30px; height: 32px; padding: 0; border: 0; color: #fff; background: transparent; font: 22px/1 Arial, sans-serif; cursor: pointer; }
  .portrait-video-controls .portrait-play { font-size: 19px; }
  .portrait-video-controls .portrait-mute,
  .portrait-video-controls .portrait-fullscreen { margin-left: auto; }
  .portrait-video-controls .portrait-mute + .portrait-fullscreen { margin-left: 0; }
  .portrait-video-controls .portrait-fullscreen svg { width: 21px; height: 21px; filter: drop-shadow(0 1px 2px #000); }
  .portrait-video-controls .portrait-mute svg { width: 21px; height: 21px; }
  .portrait-video-controls .portrait-mute .sound-off,
  .portrait-video-controls .portrait-mute.is-muted .sound-waves { display: none; }
  .portrait-video-controls .portrait-mute.is-muted .sound-off { display: block; }
  .portrait-video-controls .portrait-menu-button { font-size: 27px; }
  .portrait-video-controls .portrait-progress { display: block; width: 100%; height: 16px; margin: 0; accent-color: #fff; cursor: pointer; }
  .portrait-speed-menu { position: absolute; right: 12px; bottom: 58px; display: flex; flex-direction: column; padding: 5px; border-radius: 8px; background: rgba(20,20,20,.94); }
  .portrait-speed-menu[hidden] { display: none; }
  .portrait-speed-menu button { width: 62px; font-size: 13px; }
 .media-slot.has-media[data-media-type="video"] video[data-active="true"] ~ .mobile-video-fullscreen-button {
  position: absolute;
  right: 38px;
  bottom: 33px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
 }
  .mobile-video-fullscreen-button svg { display: block; width: 20px; height: 20px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); }
  .ops-singing-grid .media-slot.has-media[data-media-type="video"] video[data-active="true"] ~ .mobile-video-fullscreen-button { right: 38px; }
  .ops-singing-grid video::-webkit-media-controls-mute-button,
  .ops-singing-grid video::-webkit-media-controls-volume-slider { display: none !important; }
  .media-slot[data-portrait-controls-hidden="true"].has-media[data-media-type="video"] video[data-active="true"] ~ .mobile-video-fullscreen-button { display: none; }
 .mobile-video-fullscreen-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
 .video-cover-button .play-glyph { display: none; }
 .video-cover-button > span,
 .ops-singing-grid .video-cover-button > span {
  width: 56px;
  height: 56px;
  color: transparent;
  font-size: 0;
  padding-left: 0;
 }
 .video-cover-button > span::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 20px solid #fff;
  transform: translateX(3px);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
 }
}