/* Work page, Phase 2: the darkroom. Loads after system.css. Owns the light table, the stills mosaic, the film-edge footer band
   and the Work-only glass and tile overrides. Palette tokens come from body.page-work (system.css): gold signature, mint accent. */
body.page-work{--lt-gold:#E3B04B;--lt-hot:#FFE2A4;--lt-ink:#050807}
section[data-fsec][hidden]{display:none!important}

/* ---------------------------------------------------------------- light table ---------------------------------------------------------------- */
body.page-work .lt{position:relative;isolation:isolate;padding:calc(var(--b)*2) 0 calc(var(--b)*3);background:var(--th-bg)}
body.page-work .lt::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 46% at 50% 62%,rgba(227,176,75,.16),rgba(227,176,75,0) 72%)}
body.page-work .lt h2{margin:0 0 var(--sp-2,10px)}
body.page-work .lt .lede{margin:0 0 27px;max-width:34ch}
.lt-band{position:relative;width:100%;height:clamp(440px,118vw,540px);border-radius:16px;overflow:hidden;background:var(--lt-ink);
  border:1px solid rgba(227,176,75,.45);box-shadow:0 0 0 1px rgba(227,176,75,.1),0 0 56px -16px rgba(227,176,75,.5),0 24px 48px -28px rgba(0,0,0,.9)}
@media (min-width:760px){.lt-band{height:clamp(440px,46vw,660px)}}
.lt-poster{position:absolute;left:0;top:0;width:100%;height:calc(100% - 68px);object-fit:cover;transition:opacity .9s ease}
.lt-band picture{display:contents}
.lt-band canvas{position:absolute;left:0;top:0;width:100%;height:calc(100% - 68px);display:block;opacity:0;touch-action:pan-y;cursor:grab;z-index:1;transition:opacity 1s ease;-webkit-tap-highlight-color:transparent}
.lt-band canvas:active{cursor:grabbing}
.lt-band canvas:focus-visible{outline:3px solid var(--lt-hot);outline-offset:-6px}
.lt-band.is-live canvas{opacity:1}
.lt-band.is-live .lt-poster{opacity:0}
.lt-band.is-fb canvas{display:none}
.lt-ui{position:absolute;left:0;right:0;bottom:0;height:68px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;background:#060908;border-top:1px solid rgba(227,176,75,.5);box-shadow:0 -1px 18px rgba(227,176,75,.22)}
.lt-hint{font:600 15px/1.2 var(--font-text);color:var(--th-text)}
.lt-btns{display:flex;gap:8px}
.lt-btns button{min-height:44px;min-width:44px;padding:0 16px;border-radius:999px;border:2px solid rgba(243,245,241,.7);background:transparent;color:var(--th-text);font:700 15px/1 var(--font-text);cursor:pointer}
.lt-btns button:hover{background:var(--th-text);color:var(--th-bg)}
.lt-btns button:focus-visible{outline:3px solid var(--lt-hot);outline-offset:2px}
@media (max-width:480px){.lt-ui{padding:0 12px}.lt-hint{font-size:14px;max-width:44%}.lt-btns button{padding:0 12px}}

/* no WebGL: a swipeable strip that lights the frame in the middle */
.lt-strip{display:none;margin:0;padding:0;list-style:none}
.lt-band.is-fb{background:radial-gradient(60% 60% at 50% 46%,rgba(227,176,75,.28),rgba(5,8,7,0) 72%),radial-gradient(92% 78% at 50% 46%,rgba(227,176,75,.1),rgba(5,8,7,0) 85%),var(--lt-ink)}
.lt-band.is-fb .lt-poster{display:none}
.lt-band.is-fb .lt-strip{display:flex;position:absolute;left:0;right:0;top:0;bottom:68px;align-items:center;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:0 calc(50% - 130px);scrollbar-width:none}
.lt-band.is-fb .lt-strip::-webkit-scrollbar{display:none}
.lt-strip li{position:relative;flex:0 0 260px;scroll-snap-align:center;padding:40px 10px;background:#0c100f;--hole:#27312c;transition:background .4s ease}
.lt-strip li::before,.lt-strip li::after{content:"";position:absolute;left:0;right:0;height:12px;background:repeating-linear-gradient(90deg,var(--hole) 0 14px,transparent 14px 28px);transition:background .4s ease}
.lt-strip li::before{top:14px}.lt-strip li::after{bottom:14px}
.lt-f{display:block;aspect-ratio:3/2;border-radius:2px;filter:brightness(.44);transition:filter .5s ease,transform .5s ease}
.lt-strip li.lit{background:#5a3a12;--hole:#FFE2A4}
.lt-strip li.lit .lt-f{filter:none;transform:scale(1.04);box-shadow:0 0 0 3px #FFE2A4,0 0 44px 8px rgba(255,200,110,.75)}

/* ---------------------------------------------------------------- stills mosaic ---------------------------------------------------------------- */
body.page-work .wk-sec{position:relative;isolation:isolate}
body.page-work .wk-sec::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(70% 34% at 50% 0,var(--wk-glow,rgba(95,209,154,.12)),rgba(0,0,0,0) 72%)}
#sites{--wk-glow:rgba(227,176,75,.1);--g:rgba(227,176,75,.45)}
#brands{--g:rgba(95,209,154,.45)}
.mosaic{columns:2;column-gap:12px;padding-bottom:calc(var(--b)*2)}
@media (min-width:760px){.mosaic{columns:3;column-gap:16px}}
@media (min-width:1100px){.mosaic{columns:4;column-gap:18px}}
.wk{display:block;position:relative;width:100%;margin:0 0 12px;padding:0;border:0;border-radius:12px;overflow:hidden;background:#000;color:var(--th-text);text-align:left;font:inherit;cursor:pointer;break-inside:avoid;-webkit-column-break-inside:avoid;
  outline:1px solid rgba(255,255,255,.2);outline-offset:-1px;box-shadow:0 0 28px -10px var(--g,rgba(95,209,154,.4)),0 14px 28px -18px rgba(0,0,0,.9);transition:transform .25s ease,box-shadow .25s ease,outline-color .25s ease}
@media (min-width:760px){.wk{margin-bottom:16px}}
.wk img{display:block;width:100%;height:auto}
.wk .cap{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;background:#0B100E;border-top:1px solid rgba(255,255,255,.14);font:700 14px/1.25 var(--font-text);color:var(--th-text)}
.wk .cap b{font-weight:700}
.wk .cap span{display:none;color:var(--lt-gold);white-space:nowrap}
@media (min-width:760px){.wk .cap span{display:inline}}
.wk:hover,.wk:focus-visible{transform:translateY(-3px);outline-color:var(--lt-gold);box-shadow:0 0 36px -6px rgba(227,176,75,.6),0 18px 34px -18px rgba(0,0,0,.9)}
.wk:focus-visible{outline-width:3px;outline-offset:2px}
.wk.tyler{outline-color:rgba(227,176,75,.7)}
.wk[hidden]{display:none}

/* video tiles added to the shot wall */
body.page-work .wwall .wt.ls{grid-column:span 2;aspect-ratio:960/402}
body.page-work .wwall .wt.ls .cap{left:12px;right:12px}

/* still viewer */
dialog.wk-lb .stage{inset:76px 12px 12px}
dialog.wk-lb img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:6px;box-shadow:0 0 60px -8px rgba(227,176,75,.35)}

/* ---------------------------------------------------------------- glass + panels, Work ---------------------------------------------------------------- */
body.page-work .wc.glass{background:rgba(14,22,19,.6);--rim-c:rgba(95,209,154,.18)}
body.page-work .wwall .cta-tile.glass{background:rgba(14,22,19,.84);border:1px solid var(--glass-border);box-shadow:var(--glass-hi),0 18px 40px -22px rgba(0,0,0,.85)}
body.page-work .wwall .cta-tile.glass::before,body.page-work .wwall .cta-tile.glass::after{background:none}
body.page-work .wcgrid{padding-block:6px}

/* ---------------------------------------------------------------- footer: a film edge in place of the knot ---------------------------------------------------------------- */
body.page-work .foot2 .foot-mark{display:none!important}
body.page-work .foot2{position:relative}
body.page-work .foot2::before{content:"";display:block;height:26px;background:repeating-linear-gradient(90deg,rgba(227,176,75,.9) 0 16px,transparent 16px 36px) 0 50%/100% 10px repeat-x,#080B0A;border-bottom:1px solid rgba(227,176,75,.35);box-shadow:0 8px 28px -10px rgba(227,176,75,.35)}

@media (prefers-reduced-motion:reduce){.wk,.lt-poster,.lt-band canvas,.lt-strip li,.lt-f{transition:none}.wk:hover,.wk:focus-visible{transform:none}}
html.lite .lt-band{box-shadow:0 0 0 1px rgba(227,176,75,.15)}