/* Frame & Snap — "Luxe" layer for the Our Work pages.
   Loaded after our-work.css and luxe.css (tokens, fonts, motion utilities).
   Presentation only: filters, lightbox and links keep their existing behaviour. */

body.lx-work-page,body:has(.work-header){background:var(--lx-ivory);color:var(--lx-ink);font:300 16px/1.7 var(--lx-text);letter-spacing:.005em}
.work-header~main h1,.work-header~main h2,.work-cta h2{font-family:var(--lx-display)}
.work-header~main em{font-style:italic}
a:focus-visible,button:focus-visible{outline:2px solid var(--lx-rose);outline-offset:4px;border-radius:4px}
::selection{background:var(--lx-blush);color:var(--lx-ink)}

/* Header */
.work-header{position:sticky;top:0;z-index:40;height:84px;padding:0 var(--lx-gutter);border:0;background:transparent;transition:transform .7s var(--lx-ease),height .6s var(--lx-ease)}
.work-header::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(247,242,236,.74);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border-bottom:1px solid var(--lx-line);opacity:0;transition:opacity .6s var(--lx-ease)}
.work-header.lx-scrolled{height:70px}
.work-header.lx-scrolled::before{opacity:1}
.work-header.lx-hidden{transform:translateY(-100%)}
.work-brand{gap:14px;font:500 18px/1 var(--lx-display);letter-spacing:.2em}
.work-brand img{width:46px;height:46px;padding:3px;background:#fff;border-radius:50%;box-shadow:0 6px 20px -8px rgba(29,24,22,.25)}
.work-brand small{font:400 8.5px/1.4 var(--lx-text);letter-spacing:.34em;margin-top:7px;color:var(--lx-muted)}
.work-header nav{gap:34px;font:400 12.5px/1 var(--lx-text);letter-spacing:.08em}
.work-header nav a{position:relative;padding:10px 0;color:var(--lx-ink-2)}
.work-header nav a:not(.nav-plan)::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--lx-rose);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--lx-ease)}
.work-header nav a:not(.nav-plan):hover::after,.work-header nav a[aria-current=page]::after{transform:scaleX(1);transform-origin:left}
.work-header nav a:hover{color:var(--lx-ink)}
.work-header .nav-plan{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border:1px solid var(--lx-ink);border-radius:999px;color:var(--lx-ink);transition:background .5s var(--lx-ease),color .5s var(--lx-ease)}
.work-header .nav-plan:hover{background:var(--lx-ink);color:#fffaf5}
#workLanguage{border:1px solid var(--lx-line);border-radius:999px;padding:0 16px;font:400 12px/1 var(--lx-text);letter-spacing:.1em;transition:background .4s}
#workLanguage:hover{background:rgba(29,24,22,.06)}

/* Overview intro */
.work-intro{position:relative;overflow:hidden;padding:120px var(--lx-gutter) 90px}
.work-intro::before{content:'';position:absolute;right:-12vw;top:-18vw;width:58vw;height:58vw;border-radius:50%;background:radial-gradient(circle,rgba(234,208,199,.85),rgba(234,208,199,0) 68%);pointer-events:none;z-index:-1}
.work-intro .eyebrow,.project-copy .eyebrow,.work-cta .eyebrow,.next-project .eyebrow{display:inline-flex;align-items:center;gap:14px;font:500 11px/1.6 var(--lx-text);letter-spacing:.3em;text-transform:uppercase;color:var(--lx-rose)}
.work-intro .eyebrow::before,.project-copy .eyebrow::before,.work-cta .eyebrow::before,.next-project .eyebrow::before{content:'';width:34px;height:1px;background:currentColor;opacity:.55}
.work-intro h1{font:300 clamp(84px,15vw,260px)/.86 var(--lx-display);letter-spacing:-.035em;margin:40px 0 44px}
.intro-line{font:300 italic clamp(24px,2.6vw,40px)/1.3 var(--lx-display);color:var(--lx-ink);max-width:720px}

/* Filters */
.work-selection{padding:0 var(--lx-gutter) 150px}
.filter-bar{border-top:1px solid var(--lx-line);padding:26px 0 70px}
.filters{gap:10px}
.filters button{min-height:46px;padding:0 22px;border:1px solid var(--lx-line);border-radius:999px;background:transparent;font:400 13px/1 var(--lx-text);letter-spacing:.04em;color:var(--lx-ink-2);transition:background .5s var(--lx-ease),color .5s var(--lx-ease),border-color .5s}
.filters button:hover{background:rgba(29,24,22,.05);border-color:rgba(29,24,22,.25)}
.filters button[aria-pressed=true]{background:var(--lx-ink);border-color:var(--lx-ink);color:#fffaf5}
#filterStatus{font:400 11px/1.4 var(--lx-text);letter-spacing:.22em;text-transform:uppercase;color:var(--lx-muted)}

/* Editorial grid */
.editorial-grid{gap:120px 4vw}
.project-image{position:relative;overflow:hidden;border-radius:var(--lx-radius);background:var(--lx-blush-2)}
.project-image img{transition:transform 1.4s var(--lx-ease)}
.project-link:hover .project-image img{transform:scale(1.035)}
.project-caption{align-items:flex-start;padding:26px 4px 0}
.project-caption .eyebrow{font:500 10px/1.6 var(--lx-text);letter-spacing:.3em;text-transform:uppercase;color:var(--lx-rose);margin:0 0 12px}
.project-caption h2{font:300 clamp(32px,3.2vw,56px)/1.02 var(--lx-display);letter-spacing:-.015em}
.project-caption>span{display:grid;place-items:center;flex:none;width:58px;height:58px;border:1px solid var(--lx-line);border-radius:50%;font-size:18px;transition:background .6s var(--lx-ease),color .6s var(--lx-ease),transform .6s var(--lx-ease),border-color .6s}
.project-link:hover .project-caption>span{background:var(--lx-ink);border-color:var(--lx-ink);color:#fffaf5;transform:rotate(45deg)}

/* Closing CTA + footer (dark) */
.work-cta{position:relative;overflow:hidden;isolation:isolate;padding:170px 20px 150px;background:var(--lx-espresso);color:#f4ece6}
.work-cta::before{content:'';position:absolute;left:50%;top:50%;z-index:-1;width:min(120vw,1200px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(156,97,88,.5) 0%,rgba(125,74,67,.16) 38%,rgba(26,21,19,0) 68%)}
.work-cta .eyebrow{color:var(--lx-gold)}
.work-cta h2{font:300 clamp(64px,9vw,160px)/.92 var(--lx-display);letter-spacing:-.03em;margin:36px 0 56px;color:#f7efe9}
.cta-links{gap:16px}
.work-cta .button,.work-cta .underlined{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:0 32px;border-radius:999px;font:400 13px/1 var(--lx-text);letter-spacing:.08em;transition:background .5s var(--lx-ease),color .5s var(--lx-ease),border-color .5s}
.work-cta .button{background:#f7efe9;color:var(--lx-ink)}
.work-cta .button:hover{background:var(--lx-rose);color:#fff}
.work-cta .underlined{border:1px solid var(--lx-line-light);color:#f7efe9}
.work-cta .underlined:hover{background:#f7efe9;color:var(--lx-ink)}
.work-footer{padding:34px var(--lx-gutter);background:var(--lx-espresso);color:rgba(244,236,230,.55);border-top:1px solid var(--lx-line-light);font:400 11px/1.5 var(--lx-text);letter-spacing:.14em}
.work-footer a:hover{color:#f7efe9}

/* Project detail */
.project-detail{padding:0 var(--lx-gutter)}
.project-breadcrumb{padding:40px 0}
.project-breadcrumb a{font:400 12px/1 var(--lx-text);letter-spacing:.14em;text-transform:uppercase;color:var(--lx-ink-2)}
.project-breadcrumb a:hover{color:var(--lx-rose)}
.project-opening{gap:6vw;align-items:center}
.project-copy h1{font:300 clamp(54px,6.4vw,112px)/.95 var(--lx-display);letter-spacing:-.025em;margin:30px 0 30px}
.project-description{font-size:16.5px;line-height:1.85;color:var(--lx-ink-2)}
.service-tags li{border:1px solid var(--lx-line);border-radius:999px;padding:9px 16px;font:400 11px/1.4 var(--lx-text);letter-spacing:.12em;text-transform:uppercase;color:var(--lx-ink-2);background:rgba(255,255,255,.4)}
.project-copy .underlined{position:relative;padding:8px 0;border:0;font:400 13px/1.4 var(--lx-text);letter-spacing:.06em}
.project-copy .underlined::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform-origin:right;transition:transform .6s var(--lx-ease)}
.project-copy .underlined:hover{color:var(--lx-rose)}
.project-copy .underlined:hover::after{transform:scaleX(0)}
.zoom-trigger{position:relative;overflow:hidden;border-radius:var(--lx-radius);background:var(--lx-blush-2)}
.zoom-trigger img{transition:transform 1.4s var(--lx-ease)}
.zoom-trigger:hover img{transform:scale(1.03)}
.project-establishing figcaption,.detail-pair figcaption{font:400 11px/1.5 var(--lx-text);letter-spacing:.2em;text-transform:uppercase;color:var(--lx-muted);padding:18px 2px}
.project-gallery{padding:150px 0 60px}
.project-gallery h2{font:300 clamp(44px,5vw,88px)/1 var(--lx-display);letter-spacing:-.02em;margin-bottom:70px}
.detail-pair{gap:5vw}
.detail-pair figure:nth-child(2){margin-top:160px}
.next-project{padding:130px 0;margin-bottom:0;border-bottom:0;border-top:1px solid var(--lx-line)}
.next-project .eyebrow{display:flex}
.next-project>a{display:inline-block;margin-top:26px;font:300 clamp(44px,6vw,110px)/1 var(--lx-display);letter-spacing:-.025em;transition:color .5s var(--lx-ease),transform .8s var(--lx-ease)}
.next-project>a:hover{color:var(--lx-rose);transform:translateX(14px)}

dialog{border-radius:20px;background:var(--lx-espresso)}
dialog::backdrop{background:rgba(26,21,19,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#dialogPhoto{border-radius:12px}

html[lang^=zh] .work-header~main em{font-style:normal}
html[lang^=zh] .work-intro h1{font-size:clamp(60px,10vw,150px);line-height:1.1;letter-spacing:.01em}
html[lang^=zh] .project-copy h1,html[lang^=zh] .work-cta h2{letter-spacing:.01em;line-height:1.15}
html[lang^=zh] .intro-line{font-style:normal}

@media (max-width:950px){
  .work-header{height:auto;min-height:76px;padding-top:12px;padding-bottom:12px}
  .work-header nav{gap:22px}
  .project-opening{gap:5vw}
}
@media (max-width:700px){
  .work-header{padding:12px 20px;gap:10px 14px}
  .work-header.lx-scrolled{height:auto}
  .work-brand{font-size:14px;letter-spacing:.14em}
  .work-brand img{width:40px;height:40px}
  .work-header nav{gap:6px;font-size:11.5px;letter-spacing:.04em}
  .work-header .nav-plan{min-height:38px;padding:0 12px}
  .work-intro{padding:80px 20px 50px}
  .work-intro h1{font-size:clamp(72px,22vw,120px);margin:30px 0}
  .intro-line{font-size:24px}
  .work-selection{padding:0 20px 90px}
  .filter-bar{padding-bottom:40px}
  .filters button{padding:0 16px;min-height:42px}
  .project-caption h2{font-size:34px}
  .project-caption>span{width:48px;height:48px}
  .work-cta{padding:120px 20px 100px}
  .work-cta h2{font-size:clamp(56px,16vw,86px)}
  .cta-links{flex-direction:column;align-items:stretch;max-width:320px;margin:0 auto}
  .project-detail{padding:0 20px}
  .project-copy h1{font-size:clamp(48px,13vw,70px)}
  .project-gallery{padding:90px 0 20px}
  .project-gallery h2{margin-bottom:40px}
  .next-project{padding:80px 0}
  .next-project>a{font-size:clamp(38px,11vw,60px)}
}
@media (prefers-reduced-motion:reduce){
  .work-header{transition:none}
  .project-link:hover .project-image img,.zoom-trigger:hover img{transform:none}
}

/* Apply the ?category filter from first paint (our-work.js takes over once it runs). */
html[data-lx-cat=birthday] .work-project:not([data-category=birthday]),html[data-lx-cat=baby] .work-project:not([data-category=baby]),html[data-lx-cat=graduation] .work-project:not([data-category=graduation]),html[data-lx-cat=corporate] .work-project:not([data-category=corporate]),html[data-lx-cat=proposal] .work-project:not([data-category=proposal]){display:none}

/* Traditional Chinese — Ming/Song serif */
html[lang^=zh] .work-intro h1,html[lang^=zh] .project-copy h1,html[lang^=zh] .work-cta h2,html[lang^=zh] .project-gallery h2{font-weight:600;letter-spacing:.05em}
html[lang^=zh] .project-caption h2,html[lang^=zh] .next-project>a{font-weight:500;letter-spacing:.04em}
html[lang^=zh] .intro-line,html[lang^=zh] .project-description{font-family:var(--lx-zh-serif);font-weight:500;letter-spacing:.06em;color:var(--lx-ink)}
html[lang^=zh] .work-header~main p,html[lang^=zh] .filters button{letter-spacing:.04em}

/* Project film */
.project-film{padding:130px 0 20px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 6vw;align-items:end}
.project-film .eyebrow{grid-column:1/-1}
.project-film h2{font:400 clamp(40px,4.6vw,80px)/1 var(--lx-display);letter-spacing:-.02em;margin:0;align-self:start}
.lx-film-frame{position:relative;margin:0;justify-self:end;width:min(420px,100%)}

/* Traditional Chinese — modern sans */
html[lang^=zh] .work-intro h1,html[lang^=zh] .project-copy h1,html[lang^=zh] .work-cta h2,html[lang^=zh] .project-gallery h2,html[lang^=zh] .project-film h2{font-weight:700;letter-spacing:.04em}
html[lang^=zh] .project-caption h2,html[lang^=zh] .next-project>a{font-weight:500;letter-spacing:.05em}
html[lang^=zh] .intro-line,html[lang^=zh] .project-description{font-weight:500}
/* Galleries with more than two photographs */
.detail-pair{row-gap:90px}
.detail-pair figure:nth-child(odd){margin-top:0}
.detail-pair figure:nth-child(even){margin-top:160px}
@media (max-width:700px){.detail-pair figure:nth-child(even){margin-top:0}}