/* WORK ARCHIVE — HIMART / REUSE composition v5.3
   -------------------------------------------------
   Canonical Himart Hero/scroll-cover shell + REUSE manual gallery interaction.
   Archive-specific contract:
   - companies own galleries; project metadata changes inside each company gallery;
   - project title sits above the media, source body copy sits at media top-left;
   - authored vector/text pages use full-page raster renders from the source PDF;
   - default overlay/arrow color is black and JS switches to white on dark imagery;
   - navigation hit areas remain 10% x 100%, arrow heads sit 32px from outer edges at every breakpoint;
   - no lower readability gradient; CORE VALUE alone keeps one 40% black matte;
   - company-to-company gap = 120px;
   - company title/media reveal uses the shared hm-reveal visibility state;
   - footer follows the canonical Himart Design System contract.
*/
html{height:auto!important;min-height:100%!important;overflow-x:clip!important;overflow-y:visible!important}
html body.work-archive-page{margin:0!important;min-height:100%!important;overflow-x:clip!important;overflow-y:visible!important;background:var(--hm-bg-page,#000)!important;color:var(--hm-text-primary,#fff)!important;touch-action:pan-y!important}
html body.work-archive-page *{box-sizing:border-box}
html body.work-archive-page #live-main{display:block!important;position:relative!important;isolation:isolate!important;min-height:100vh!important;overflow:visible!important;background:#000!important}

/* Canonical Himart scroll-cover Hero. */
html body.work-archive-page #live-main>.wa-hero{position:sticky!important;top:0!important;z-index:1!important;width:100%!important;height:100svh!important;min-height:100svh!important;overflow:hidden!important;background:#000!important}
html body.work-archive-page #live-main>.wa-hero .wa-hero__image{display:block!important;position:absolute!important;inset:0!important;z-index:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;background:#000!important}
html body.work-archive-page #live-main .wa-hero .hm-title{color:#fff!important;font-family:var(--hm-font-en-thin,var(--hm-font-en))!important;font-size:var(--hm-type-hero)!important;font-weight:300!important;line-height:1.04!important;letter-spacing:var(--hm-track-hero)!important}
html body.work-archive-page #live-main .wa-hero .hm-lead{color:var(--hm-text-secondary)!important;font-family:var(--hm-font-en)!important;font-size:var(--hm-type-body)!important;font-weight:300!important;letter-spacing:var(--hm-track-note)!important}

html body.work-archive-page #live-main>.wa-archive-content{position:relative!important;z-index:2!important;isolation:isolate!important;width:100%!important;max-width:none!important;min-height:100vh!important;margin:0!important;padding:200px 0 200px!important;background:#000!important;overflow:visible!important}
html body.work-archive-page #live-main>.wa-archive-content::before{content:"";position:absolute;z-index:-1;inset:0;background:#000;pointer-events:none}
html body.work-archive-page #live-main>.wa-archive-content>.hm-wrap{position:relative!important;width:min(calc(100% - 80px),var(--hm-container-wide,1360px))!important;max-width:var(--hm-container-wide,1360px)!important;margin-inline:auto!important}
@media(min-width:1600px){
  html body.work-archive-page #live-main>.wa-archive-content>.hm-wrap{width:min(calc(100% - 128px),1600px)!important;max-width:1600px!important;margin-inline:auto!important}
}

/* WORK ARCHIVE switcher. */
html body.work-archive-page .wa-switcher{position:fixed;z-index:2147483647;top:32px;left:var(--hm-inset-desktop,40px);width:400px;max-width:calc(100vw - (var(--hm-inset-desktop,40px) * 2))}
html body.work-archive-page .wa-switcher__toggle{position:relative;display:inline-flex;align-items:flex-start;height:32px;margin:0;padding:0 48px 0 0;border:0;background:transparent;color:#fff;font-family:var(--hm-font-en-extralight,var(--hm-font-en));font-size:32px;font-weight:200;line-height:1;letter-spacing:-.02em;cursor:pointer}
html body.work-archive-page .wa-switcher__toggle::after{content:"";position:absolute;right:8px;top:50%;width:7px;height:7px;border-right:1px solid rgba(255,255,255,.60);border-bottom:1px solid rgba(255,255,255,.60);transform:translateY(-70%) rotate(45deg);transition:transform .18s ease}
html body.work-archive-page .wa-switcher__toggle[aria-expanded="true"]::after{transform:translateY(-25%) rotate(225deg)}
html body.work-archive-page .wa-switcher__menu{position:absolute;top:56px;left:0;width:400px;max-width:calc(100vw - (var(--hm-inset-desktop,40px) * 2));max-height:calc(100svh - 80px);overflow-x:hidden;overflow-y:auto;margin:0;padding:12px 14px 16px 0;background:rgba(0,0,0,.85);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4px);transition:opacity .16s ease,transform .16s ease,visibility .16s ease;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.34) rgba(255,255,255,.06)}
html body.work-archive-page .wa-switcher__menu::-webkit-scrollbar{display:block;width:6px}
html body.work-archive-page .wa-switcher__menu::-webkit-scrollbar-track{background:rgba(255,255,255,.06)}
html body.work-archive-page .wa-switcher__menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.34);border-radius:999px}
html body.work-archive-page .wa-switcher__menu.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
html body.work-archive-page .wa-menu-group{padding:12px 0 10px;border-top:1px solid var(--hm-line-weak,rgba(255,255,255,.14))}
html body.work-archive-page .wa-menu-group:first-child{border-top:0;padding-top:0}
html body.work-archive-page .wa-menu-group strong{display:block;margin:0 0 6px;color:#fff;font-family:var(--hm-font-en);font-size:10pt;font-weight:400;line-height:1.15;letter-spacing:.04em;opacity:1}
html body.work-archive-page .wa-menu-group>div{display:grid}
html body.work-archive-page .wa-menu-group a{display:flex;align-items:center;width:100%;min-height:34px;margin:0;padding:0;color:#fff;font-family:var(--hm-font-en-thin,var(--hm-font-en));font-size:14px;font-weight:300;line-height:1.15;letter-spacing:-.01em;text-decoration:none;opacity:.68;transition:color .16s ease,opacity .16s ease}
html body.work-archive-page .wa-menu-group a+a{border-top:1px solid rgba(255,255,255,.10)}
html body.work-archive-page .wa-menu-group a:hover,
html body.work-archive-page .wa-menu-group a:focus-visible{color:#fff;opacity:1}
html body.work-archive-page .wa-menu-group a.is-active{color:var(--hm-blue)}
html body.work-archive-page .wa-menu-group a.is-visited{opacity:.30}

/* One gallery per company. The current project title is updated by JS as slides change. */
html body.work-archive-page .wa-company-list{display:block;width:100%}
html body.work-archive-page .wa-company{position:relative;width:100%;margin:0;scroll-margin-top:24px}
html body.work-archive-page .wa-company+.wa-company{margin-top:120px}
html body.work-archive-page .wa-project-anchor{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}

/* Project title sits above the gallery. Black is the semantic default; the current
   archive plane is dark, so .is-dark switches the rendered title to white. */
html body.work-archive-page .wa-project__head{--wa-title-color:#000;width:100%;margin:0 0 24px;padding:0;color:var(--wa-title-color)}
html body.work-archive-page .wa-project__head.is-dark{--wa-title-color:#fff}
html body.work-archive-page .wa-project__meta{display:flex;align-items:baseline;gap:12px;min-width:0;margin:0 0 14px}
html body.work-archive-page .wa-project__index,
html body.work-archive-page .wa-project__period{display:inline-block;margin:0;padding:0;color:var(--hm-blue)!important;font-family:var(--hm-font-en)!important;font-size:12px!important;font-weight:400!important;line-height:1!important;letter-spacing:var(--hm-track-note)!important;text-transform:uppercase}
html body.work-archive-page .wa-project__period{opacity:.70}
html body.work-archive-page .wa-project__title{margin:0!important;padding:0!important;color:var(--wa-title-color)!important;font-family:var(--hm-font-en-thin,var(--hm-font-en))!important;font-size:42px!important;font-weight:300!important;line-height:1.12!important;letter-spacing:-.035em!important;text-wrap:balance;word-break:keep-all!important}

/* Archive content enters with the same visibility state generated by animation.js.
   Each title/media block starts slightly lower and settles into its authored position. */
html body.work-archive-page .wa-company .wa-project__head.hm-reveal{
  opacity:0!important;
  transform:translate3d(0,36px,0)!important;
  transition:opacity .76s cubic-bezier(.22,1,.36,1),transform .76s cubic-bezier(.22,1,.36,1)!important;
  will-change:opacity,transform
}
html body.work-archive-page .wa-company .wa-project__head.hm-reveal:is(.is-visible,.is-wide-rise-in){opacity:1!important;transform:translate3d(0,0,0)!important}

html body.work-archive-page .wa-company .reuse-production-gallery{--wa-body-color:#000;--wa-prev-color:#000;--wa-next-color:#000;position:relative!important;width:100%!important;max-width:none!important;min-height:1px!important;aspect-ratio:96/41!important;overflow:hidden!important;background:#080808!important;isolation:isolate!important;opacity:0!important;transform:translate3d(0,36px,0)!important;transition:height .72s cubic-bezier(.22,.76,.22,1),opacity .82s cubic-bezier(.22,1,.36,1),transform .82s cubic-bezier(.22,1,.36,1)!important;will-change:opacity,transform,height}
html body.work-archive-page .wa-company .reuse-production-gallery.hm-reveal:is(.is-visible,.is-wide-rise-in){opacity:1!important;transform:translate3d(0,0,0)!important}
html body.work-archive-page .wa-company .reuse-production-gallery.is-ratio-ready{aspect-ratio:auto!important}
html body.work-archive-page .wa-company .reuse-production-gallery__media{background:#080808!important}
html body.work-archive-page .wa-company .reuse-production-gallery__media>img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;background:#080808!important}

/* Remove the REUSE lower gradient entirely. */
html body.work-archive-page .wa-company .reuse-production-gallery::after{display:none!important;content:none!important;background:none!important}

/* Source portfolio body copy only: media left-top, 14px. JS samples the active image;
   light imagery keeps the black default and dark imagery switches to white. */
html body.work-archive-page .wa-gallery-overlay{position:absolute;z-index:6;top:32px;left:32px;width:min(760px,58%);pointer-events:none;color:var(--wa-body-color,#000)}
html body.work-archive-page .wa-gallery-overlay__body{min-width:0;color:inherit}
html body.work-archive-page .wa-gallery-overlay__body p{margin:0!important;max-width:none!important;color:inherit!important;font-family:var(--hm-font-ko)!important;font-size:14px!important;font-weight:300!important;font-variation-settings:"wght" 300!important;line-height:1.55!important;letter-spacing:var(--hm-track-body)!important;white-space:pre-line;word-break:keep-all!important;text-shadow:none!important}
html body.work-archive-page .wa-gallery-note{display:block;margin:10px 0 0;color:inherit;font-family:var(--hm-font-en)!important;font-size:12px;font-weight:300;font-style:normal;line-height:1.35;letter-spacing:var(--hm-track-note);text-shadow:none!important}
html body.work-archive-page .wa-gallery-note[hidden],
html body.work-archive-page .wa-gallery-overlay__body p[hidden]{display:none!important}

/* Full-height 10% hit areas; visible arrow heads remain exactly 32px from media edges. */
html body.work-archive-page .wa-company .reuse-production-gallery__nav{z-index:8!important;top:0!important;width:10%!important;height:100%!important;margin:0!important;padding:0!important;transform:none!important;background:transparent!important}
html body.work-archive-page .wa-company .reuse-production-gallery__nav--prev{left:0!important;color:var(--wa-prev-color,#000)!important}
html body.work-archive-page .wa-company .reuse-production-gallery__nav--next{right:0!important;color:var(--wa-next-color,#000)!important}
html body.work-archive-page .wa-company .reuse-production-gallery__nav::before{top:50%!important;width:18px!important;height:18px!important;border-top:1px solid currentColor!important;border-right:1px solid currentColor!important}
html body.work-archive-page .wa-company .reuse-production-gallery__nav--prev::before{left:32px!important;right:auto!important;transform:translateY(-50%) rotate(-135deg)!important}
html body.work-archive-page .wa-company .reuse-production-gallery__nav--next::before{left:auto!important;right:32px!important;transform:translateY(-50%) rotate(45deg)!important}
html body.work-archive-page .wa-company .reuse-production-gallery__nav:hover::before,
html body.work-archive-page .wa-company .reuse-production-gallery__nav:focus-visible::before{border-color:currentColor!important}
html body.work-archive-page .wa-company .reuse-production-gallery__status{z-index:8!important;right:24px!important;bottom:24px!important;color:var(--wa-next-color,#000)!important}

/* CORE VALUE pages preserve the previously requested single 40% black matte. */
html body.work-archive-page .wa-company .reuse-production-gallery.is-core-value::before{content:"";position:absolute;z-index:4;inset:0;background:rgba(0,0,0,.40);pointer-events:none}

/* Footer — same Himart Design System contract, archive rail aligned with content. */
html body.work-archive-page>.hm-footer{position:relative!important;z-index:2!important;margin:0!important;padding:80px 0 40px!important;border:0!important;background:#000!important}
html body.work-archive-page>.hm-footer>.hm-wrap{width:min(calc(100% - 80px),var(--hm-container-wide,1360px))!important;max-width:var(--hm-container-wide,1360px)!important;margin-inline:auto!important;display:flex!important;justify-content:space-between!important;gap:var(--hm-space-40,40px)!important;padding-top:16px!important;border-top:1px solid var(--hm-line-default)!important}
html body.work-archive-page>.hm-footer a,
html body.work-archive-page>.hm-footer span{font-family:var(--hm-font-en)!important;font-size:12px!important;font-weight:400!important;line-height:1.5!important;letter-spacing:var(--hm-track-base)!important;text-decoration:none!important}
html body.work-archive-page>.hm-footer a{color:var(--hm-text-primary,#fff)!important}
html body.work-archive-page>.hm-footer span{color:var(--hm-text-tertiary,rgba(255,255,255,.38))!important}
html body.work-archive-page>.hm-footer>.hm-wrap>div{display:flex!important;gap:var(--hm-space-20,20px)!important}
@media(min-width:1600px){
  html body.work-archive-page>.hm-footer>.hm-wrap{width:min(calc(100% - 128px),1600px)!important;max-width:1600px!important;margin-inline:auto!important}
}

@media(max-width:780px){
  html body.work-archive-page #live-main>.wa-archive-content{padding:120px 0 120px!important}
  html body.work-archive-page #live-main>.wa-archive-content>.hm-wrap{width:calc(100% - (var(--hm-inset-mobile,18px) * 2))!important;max-width:none!important}
  html body.work-archive-page .wa-switcher{position:relative!important;z-index:20!important;top:auto!important;left:auto!important;width:100%!important;max-width:none!important;margin:0 0 20px!important}
  html body.work-archive-page .wa-switcher__toggle{height:16px!important;padding:0 22px 0 0!important;font-size:12px!important;font-weight:300!important;line-height:1!important;letter-spacing:.02em!important}
  html body.work-archive-page .wa-switcher__toggle::after{right:2px!important;width:6px!important;height:6px!important}
  html body.work-archive-page .wa-switcher__menu{top:24px!important;width:100%!important;max-width:none!important;max-height:calc(100svh - 56px)!important;padding:10px 12px 14px!important;background:rgba(0,0,0,.85)!important}
  html body.work-archive-page .wa-menu-group{padding:10px 0 8px}
  html body.work-archive-page .wa-menu-group a{min-height:32px;font-size:13px}
  html body.work-archive-page .wa-company+.wa-company{margin-top:120px}
  html body.work-archive-page .wa-project__head{margin-bottom:24px}
  html body.work-archive-page .wa-project__meta{margin-bottom:9px;gap:8px}
  html body.work-archive-page .wa-project__index,
  html body.work-archive-page .wa-project__period{font-size:10px!important}
  html body.work-archive-page .wa-project__title{font-size:clamp(22px,6.6vw,28px)!important;line-height:1.08!important}
  html body.work-archive-page .wa-gallery-overlay{top:20px;left:20px;width:calc(100% - 72px)}
  html body.work-archive-page .wa-gallery-overlay__body p{font-size:14px!important;line-height:1.45!important}
  html body.work-archive-page .wa-company .reuse-production-gallery__nav--prev::before{left:32px!important}
  html body.work-archive-page .wa-company .reuse-production-gallery__nav--next::before{right:32px!important}
  html body.work-archive-page .wa-company .reuse-production-gallery__status{right:18px!important;bottom:18px!important}
  html body.work-archive-page>.hm-footer{padding:60px 0 32px!important}
  html body.work-archive-page>.hm-footer>.hm-wrap{width:calc(100% - 36px)!important;max-width:none!important;display:block!important}
  html body.work-archive-page>.hm-footer>.hm-wrap>div{margin-top:20px!important;flex-wrap:wrap!important}
}

@media(prefers-reduced-motion:reduce){
  html body.work-archive-page .wa-switcher__menu,
  html body.work-archive-page .wa-company .reuse-production-gallery{transition:none!important}
  html body.work-archive-page .wa-company .wa-project__head.hm-reveal,
  html body.work-archive-page .wa-company .reuse-production-gallery.hm-reveal{opacity:1!important;transform:none!important;will-change:auto!important}
}