/* Visual refinement layer. Layout grids, content order, and media ratios remain in styles.css. */
:root {
  --ink: #201c1c;
  --muted: #686160;
  --soft-muted: #8f8582;
  --line: #ded6d2;
  --coral: #cc4038;
  --coral-dark: #a82e2a;
  --radius: 12px;
  --shadow: 0 18px 38px rgba(63, 35, 31, .11), 0 2px 8px rgba(63, 35, 31, .04);
}

body { font-kerning: normal; text-rendering: optimizeLegibility; }
body::before {
  background:
    radial-gradient(ellipse at 52% 17%, rgba(232, 149, 148, .11), transparent 52%),
    radial-gradient(ellipse at 82% 72%, rgba(224, 193, 177, .08), transparent 54%),
    linear-gradient(112deg, #fffefd, #fcf8f6 54%, #fffefd);
}
::selection { color: #fff; background: var(--coral-dark); }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }

/* Quiet editorial navigation. */
.site-nav { background: rgba(255, 253, 251, .86); border-bottom-color: rgba(181, 155, 147, .32); box-shadow: 0 8px 28px rgba(69, 47, 42, .035); }
.nav-mark { letter-spacing: .045em; }
.nav-links a { font-weight: 600; }
.nav-submenu { border-color: rgba(181, 155, 147, .35); box-shadow: 0 20px 40px rgba(50, 29, 25, .12); }

/* Type details without changing the page's alignment or section dimensions. */
.hero h1 { font-size: clamp(58px, 8vw, 108px); font-weight: 800; letter-spacing: -.025em; text-shadow: 0 10px 26px rgba(204, 64, 56, .16); }
.hero h1::after { opacity: .55; transform: translate(7px, 7px); }
.eyebrow { color: #8c6c68; font-weight: 700; letter-spacing: .27em; }
.hero-name { letter-spacing: .055em; }
.section-index, .case-label { letter-spacing: .19em; }
.section-index::before, .case-label::before { content: ""; display: inline-block; width: 15px; height: 1px; margin: 0 10px 3px 0; background: currentColor; }
.chapter-cover-inner h2 { letter-spacing: -.015em; }
.chapter-transition .chapter-cover-inner { text-shadow: 0 2px 18px rgba(255, 255, 255, .9); }
.chapter-transition .chapter-cover-inner::after { width: 82px; background: linear-gradient(90deg, transparent, var(--coral), transparent); }

/* Give existing headlines and evidence a clearer hierarchy. */
.case-copy h3, .feature-copy h3, .wide-case-heading h3, .dior-centered-heading h3 { letter-spacing: -.02em; text-wrap: balance; }
.case-copy h3 { line-height: 1.35; }
.copy-block h3 { letter-spacing: .025em; }
.copy-block p, .case-copy > p, .feature-copy > p { text-wrap: pretty; }
.metric-row > div { position: relative; border-top-color: #c9b9b4; }
.metric-row > div::before { content: ""; position: absolute; top: -1px; left: 0; width: 26px; height: 2px; background: var(--coral); }
.metric-row strong { letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.metric-row small { letter-spacing: .02em; }
.meta-table { border-top-color: #cbbdb8; }
.meta-table dt { letter-spacing: .03em; }

/* Keep the same image and video positions; refine only their surface treatment. */
.media-slot { border-color: rgba(83, 53, 47, .12); box-shadow: var(--shadow); }
.media-slot:focus-visible { outline-offset: 5px; }
.media-slot.has-media:hover { box-shadow: 0 23px 48px rgba(63, 35, 31, .16), 0 2px 9px rgba(63, 35, 31, .05); }
.video-cover-button { background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .18)); }
.video-cover-button span { width: 3.45rem; height: 3.45rem; background: rgba(26, 23, 23, .72); border: 1px solid rgba(255, 255, 255, .65); backdrop-filter: blur(6px); transition: transform .22s ease, background .22s ease; }
.video-cover-button:hover span, .video-cover-button:focus-visible span { transform: scale(1.06); background: rgba(35, 32, 31, .84); }
.vertical-media-grid figcaption { margin-top: 12px; color: #675b58; font-size: 14px; font-weight: 600; letter-spacing: .025em; }
.performance-metrics figcaption { letter-spacing: 0; }
.film-expanded-grid a, .project-cover img { overflow: hidden; border-radius: var(--radius); }
.film-expanded-grid a { box-shadow: 0 9px 24px rgba(45, 27, 24, .08); transition: box-shadow .25s ease, transform .25s ease; }
.film-expanded-grid a:hover { box-shadow: 0 19px 36px rgba(45, 27, 24, .15); transform: translateY(-3px); }

/* Small editorial rules make the long page easier to scan. */
.wide-media-case, .skills-section-block, .operation-case-wide, .operation-case-split { border-top-color: #d1c4bf; }
.wide-case-heading, .dior-centered-heading { position: relative; }
.wide-case-heading .case-label, .dior-centered-heading .case-label { color: var(--coral-dark); }
.film-expanded-group h4, .interior-pdf-group h4 { letter-spacing: -.015em; }
.film-expanded-group h4::before, .interior-pdf-group h4::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 12px 3px 0; border-radius: 50%; background: var(--coral); }
.thanks h2 { letter-spacing: .025em; text-shadow: 0 10px 25px rgba(204, 64, 56, .15); }
.thanks-subtitle { letter-spacing: .04em; }

/* Jewelry case: six original frames, ordered as a short visual story. */
.jewelry-promo-case { grid-template-columns: minmax(0, 1fr); row-gap: 34px; }
.jewelry-promo-case .dior-centered-heading,
.jewelry-promo-case .jewelry-promo-copy,
.jewelry-promo-case .jewelry-promo-gallery { grid-column: 1 / -1; }
.jewelry-promo-case .jewelry-promo-copy { max-width: 900px; margin-inline: auto; text-align: center; }
.jewelry-promo-case .jewelry-promo-copy p { margin-bottom: 22px; }
.jewelry-promo-case .meta-table { display: inline-flex; flex-wrap: wrap; justify-content: center; column-gap: 35px; text-align: left; }
.jewelry-promo-case .meta-table > div { margin-bottom: 0; }
.jewelry-promo-case .jewelry-promo-gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 225px)) 245px;
  gap: 12px;
  overflow: visible;
  border-radius: 0;
}
.jewelry-frame { position: relative; min-width: 0; min-height: 0; margin: 0; overflow: hidden; border-radius: 10px; background: #171412; box-shadow: 0 10px 28px rgba(22, 18, 18, .11); }
.jewelry-promo-case .jewelry-frame img,
.jewelry-promo-case .jewelry-frame img:only-child { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; aspect-ratio: auto; border-radius: 0; transition: transform .5s ease; }
.jewelry-frame:hover img { transform: scale(1.035); }
.jewelry-frame::after { content: ""; position: absolute; inset: 38% 0 0; pointer-events: none; background: linear-gradient(transparent, rgba(9, 8, 8, .66)); }
.jewelry-frame figcaption { position: absolute; z-index: 1; bottom: 17px; left: 20px; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.28); }
.jewelry-frame figcaption span { display: block; margin-bottom: 3px; font: 700 10px/1.3 Arial, sans-serif; letter-spacing: .18em; opacity: .78; }
.jewelry-frame figcaption strong { display: block; font-size: 17px; font-weight: 600; letter-spacing: .04em; }
.jewelry-frame-origin { grid-area: 1 / 1 / 3 / 8; }
.jewelry-frame-stone { grid-area: 1 / 8 / 2 / 13; }
.jewelry-frame-sketch { grid-area: 2 / 8 / 3 / 13; }
.jewelry-frame-studio { grid-area: 3 / 1 / 4 / 5; }
.jewelry-frame-craft { grid-area: 3 / 5 / 4 / 9; }
.jewelry-frame-finale { grid-area: 3 / 9 / 4 / 13; }
.jewelry-frame-origin img { object-position: 46% center; }
.jewelry-frame-stone img { object-position: center 46%; }

@media (max-width: 900px) {
  .jewelry-promo-case .jewelry-promo-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 310px repeat(3, 205px); }
  .jewelry-frame-origin { grid-area: 1 / 1 / 2 / 3; }
  .jewelry-frame-stone { grid-area: 2 / 1 / 3 / 2; }
  .jewelry-frame-sketch { grid-area: 2 / 2 / 3 / 3; }
  .jewelry-frame-studio { grid-area: 3 / 1 / 4 / 2; }
  .jewelry-frame-craft { grid-area: 3 / 2 / 4 / 3; }
  .jewelry-frame-finale { grid-area: 4 / 1 / 5 / 3; }
}

@media (max-width: 640px) {
  .hero h1 { font-size: clamp(34px, 10vw, 44px); letter-spacing: -.045em; }
  .section-index::before, .case-label::before { width: 11px; margin-right: 7px; }
  .vertical-media-grid figcaption { font-size: 12px; }
  .jewelry-promo-case .jewelry-promo-copy { text-align: left; }
  .jewelry-promo-case .meta-table { display: block; }
  .jewelry-promo-case .jewelry-promo-gallery { gap: 8px; grid-template-rows: 220px repeat(3, 150px); }
  .jewelry-frame figcaption { bottom: 10px; left: 11px; }
  .jewelry-frame figcaption span { font-size: 8px; }
  .jewelry-frame figcaption strong { font-size: 13px; }
}
/* The final jewelry storyboard is exported as one image on every viewport. */
.jewelry-promo-case .jewelry-promo-gallery { display: block; overflow: hidden; border-radius: var(--radius); box-shadow: 0 16px 38px rgba(22, 18, 18, .12); }
.jewelry-promo-case .jewelry-promo-gallery .jewelry-story-image { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 689; object-fit: contain; border-radius: 0; }
.jewelry-media-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 22px; max-width: var(--max); margin: 0 auto 92px; }
.jewelry-media-pair .project-video-wide { min-width: 0; margin: 0; }
.jewelry-media-pair .jewelry-promo-gallery { display: block; min-width: 0; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.jewelry-media-pair .jewelry-story-image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
@media (max-width: 900px) {
  .jewelry-media-pair { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
/* Jewelry case: project copy left, storyboard right, film on the following row. */
.jewelry-promo-case .jewelry-promo-copy { grid-column: auto; max-width: none; margin: 0; text-align: left; }
.jewelry-promo-case .jewelry-promo-gallery { grid-column: auto; display: block; overflow: hidden; border-radius: 16px; box-shadow: var(--shadow); }
.jewelry-promo-case .jewelry-promo-gallery .jewelry-story-image { display: block; width: 100%; height: auto; aspect-ratio: 1180 / 669; object-fit: contain; border-radius: inherit; }
.jewelry-promo-case .meta-table { display: block; text-align: left; }
.jewelry-promo-case .meta-table > div { margin-bottom: 8px; }
@media (min-width: 901px) {
  .jewelry-promo-case { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); column-gap: 64px; row-gap: 45px; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .film-expanded-grid a, .video-cover-button span { transition: none; }
  .film-expanded-grid a:hover, .video-cover-button:hover span { transform: none; }
  .jewelry-frame img { transition: none; }
  .jewelry-frame:hover img { transform: none; }
}

/* LuLu video: fill the player and trim the encoded dark edge. */
.media-slot[data-media-id='product-lulu'] video { object-fit: cover !important; transform: scale(1.006); }
.media-slot[data-media-id='product-lulu'] video:fullscreen,
.media-slot[data-media-id='product-lulu'] video:-webkit-full-screen { object-fit: cover !important; transform: scale(1.006) !important; }

.animation-brand-case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); align-items: start; gap: clamp(40px, 7vw, 112px); margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--line); }
.animation-brand-copy { max-width: 680px; }
.animation-brand-copy h3 { margin: 20px 0 12px; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.4; }
.animation-brand-copy > p:not(.case-label) { color: var(--muted); font-size: 17px; line-height: 1.95; margin: 24px 0 0; }
.animation-brand-copy > p.animation-brand-subtitle { margin-top: 0; margin-bottom: 34px; font-size: 14px; color: var(--soft-muted); letter-spacing: .08em; }
.animation-brand-tags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.animation-brand-tags span { border: 1px solid var(--line); border-radius: 100px; padding: 6px 16px; color: var(--muted); font-size: 12px; }
.animation-brand-media { width: 100%; margin: 0; }
.animation-brand-media .media-slot { border-radius: 16px; box-shadow: var(--shadow); }
.animation-brand-media figcaption { text-align: center; color: var(--muted); font-size: 14px; margin-top: 14px; }
@media (max-width: 700px) {
  .animation-brand-case { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 44px; padding-top: 36px; }
  .animation-brand-copy > p:not(.case-label) { font-size: 15px; }
  .animation-brand-media { max-width: 360px; justify-self: center; }
}

/* Widescreen preview for the animation case. */
@media (min-width: 701px) {
  .animation-brand-case { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 4vw, 64px); }
}
.animation-brand-media { max-width: none; }
.animation-brand-media .media-slot[data-media-id='product-sales-animation'] { aspect-ratio: 16 / 9; }

.aigc-experience.section { padding-top: 64px; padding-bottom: 32px; }
.aigc-experience-inner { padding-bottom: 56px; border-bottom: 1px solid var(--line); }
.aigc-experience h2 { margin: 0 0 18px; font-size: clamp(28px, 3vw, 38px); line-height: 1.4; font-weight: 500; }
.aigc-experience-meta { margin: 0; color: var(--soft-muted); font-size: 16px; }
.aigc-experience-meta span { color: var(--coral-dark); padding: 0 16px; }
.aigc-experience-duties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; margin-top: 44px; }
.aigc-experience-inner h3 { margin: 0 0 16px; font-size: 20px; line-height: 1.5; }
.aigc-experience-duties p, .aigc-experience-results p { margin: 0; font-size: 17px; line-height: 1.95; color: var(--muted); }
.aigc-experience-results { margin-top: 36px; padding: 28px 32px; border-left: 2px solid #b17878; background: rgba(179,120,120,.045); }
.aigc-experience-results h3 { color: #96565a; }
@media(max-width:700px) {
 .aigc-experience.section { padding-top: 40px; }
 .aigc-experience-duties { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
 .aigc-experience-meta { font-size: 14px; }
 .aigc-experience-meta span { padding: 0 6px; }
 .aigc-experience-duties p, .aigc-experience-results p { font-size: 15px; }
 .aigc-experience-results { padding: 22px; }
}

.aigc-experience > .creative-showcase { border-top: 0; }

/* Match the department supervisor's sequential experience typography. */
.aigc-experience h2 { margin: 0 0 8px; font-size: 27px; line-height: 1.35; letter-spacing: -.02em; }
.aigc-experience-meta { margin-bottom: 30px; font-size: 14px; }
.aigc-experience-duties { display: block; margin-top: 32px; }
.aigc-experience-duties > div { margin-bottom: 24px; }
.aigc-experience-duties h3 { margin-bottom: 8px; font-size: 16px; line-height: 1.72; }
.aigc-experience-duties p, .aigc-experience-results p { font-size: 16px; line-height: 1.72; color: #45403f; }
.aigc-experience-results { margin-top: 28px; padding: 0; border: 0; background: transparent; }
.aigc-experience-results h3 { display: inline; margin: 0; font-size: 16px; line-height: 1.72; font-weight: 500; color: #45403f; }
.aigc-experience-results h3::after { content: '：'; }
.aigc-experience-results p { display: inline; }
@media(max-width:640px) { .aigc-experience h2 { font-size: 23px; } }
.aigc-experience-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .86fr); gap: 64px; align-items: start; }
.aigc-experience-image { margin: 0; min-width: 0; }
.aigc-experience-image img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: var(--shadow); cursor: zoom-in; }
@media(max-width:900px) { .aigc-experience-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; } }


/* Keep the previous text layout without the right-hand image. */
.aigc-experience-inner { display: block; }
.aigc-experience-copy { max-width: 680px; }

@media (min-width: 701px) { .animation-brand-media { align-self: end; } }


#product-jewelry-case, #product-luxury-case, #product-animation-case, #product-lulu-case, #product-tk-case, #product-sales-case, #product-jewelry-showcase { scroll-margin-top: 100px; }