/* 02 only. The existing Hero world continues behind the heading; real work
   remains the focus. No duplicated matter, image overlays or new motion. */
.ls-public:has(.hero-world) .work{background:transparent;z-index:3}
/* Fade only the existing far field over its already-reserved responsive tail.
   The mask is opaque throughout Hero: no repositioning or new background. */
.ls-public:has(.hero-world) .hero-plane-far{mask-image:linear-gradient(#000 0 calc(100% - var(--hero-world-tail)),transparent 100%)}
.work .work-heading{grid-column:2/12;padding-top:24px}
.work .work-primary{grid-column:2/13;margin:0}
.work .work-secondary{grid-column:2/8;margin:0}
.work .work-tertiary{grid-column:9/13;margin-top:clamp(72px,8vw,144px)}
.work .work-entry{display:block;color:inherit;text-decoration:none;cursor:default;outline:none}
.work .work-entry:focus-visible{outline:none}
.work .work-media{aspect-ratio:var(--work-ratio);background:var(--paper);border:0;overflow:hidden}
.work .work-primary,.work .work-secondary{--work-ratio:1672 / 941}
.work .work-tertiary{--work-ratio:3 / 2}
.work .work-media img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;object-position:50% 50%;transform:none;filter:none}
.work .work-media img[hidden]{display:none}
.work .work-image-fallback{position:absolute;inset:0;display:none;place-content:center;padding:24px;font-size:14px;color:#615e5a}
.work .work-media:has(img[hidden]) .work-image-fallback{display:grid}
.work .work-media.has-media .work-image-fallback{display:none}
.work .work-caption{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;row-gap:8px;padding-top:20px}
.work .work-caption h3{grid-column:1;font-size:14px;line-height:1.3;letter-spacing:.08em;font-weight:600}
.work .work-description{grid-column:1;font-size:16px;line-height:1.5;color:#615e5a}
.work .work-caption .work-cta{grid-column:2;grid-row:1/3;align-self:end;max-width:none;text-align:left;font-size:14px;line-height:1.5;color:var(--ink);white-space:nowrap}
.work .work-cta span{display:inline-block;margin-left:4px;transition:transform 160ms ease-out}
.work .work-entry:focus-visible .work-cta{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.work .work-entry:focus-visible .work-cta span{outline:2px solid var(--ink);outline-offset:4px;border-radius:50%;transform:translateX(2px)}
.work .work-entry:focus-visible h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.work .work-preview-note{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(hover:hover) and (pointer:fine){.work .work-entry:hover .work-cta span{transform:translateX(2px)}}
/* One compact editorial field: dominant opening, close metadata, then a
   related 7/5 pair with a moderate stagger. Mobile geometry stays unchanged. */
@media(min-width:1200px){
  /* Consume only the shared transition's spare space. Hero bounds/layers and
     every distance inside Work stay unchanged. */
  .ls-public:has(.hero-world) .work{margin-top:-72px}
  .work{padding-bottom:clamp(100px,7.5vw,144px);row-gap:clamp(72px,5vw,96px)}
  .work .work-primary{grid-column:1/13;margin-inline:calc(var(--gutter) * -.5);margin-bottom:0}
  .work .work-primary .work-caption{padding-inline:calc(var(--gutter) * .5)}
  .work .work-secondary{grid-column:1/8}
  .work .work-tertiary{grid-column:8/13;margin-top:clamp(120px,9vw,173px)}
}
@media(min-width:761px) and (max-width:1199px){
  .ls-public:has(.hero-world) .work{margin-top:-48px}
  .work{padding-bottom:clamp(90px,10vw,120px);row-gap:56px}
  .work .work-primary{margin-bottom:0}
  .work .work-secondary{grid-column:2/12}
  .work .work-tertiary{grid-column:5/13;margin-top:16px}
}
@media(max-width:760px){
  .work .work-heading{padding:0;margin:0 0 38px}
  .work .work-primary{margin:0}
  .work .work-secondary{margin:54px 0 0}
  .work .work-tertiary{margin:64px 0 0 20px}
  .work .work-caption{column-gap:16px;row-gap:7px;padding-top:16px}
  .work .work-caption h3{font-size:13px}
  .work .work-description{font-size:14px}
  .work .work-caption .work-cta{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.work .work-cta span{transition:none}.work .work-entry:is(:hover,:focus-visible) .work-cta span{transform:none}}
@media(forced-colors:active){.work .work-entry:focus-visible .work-cta span{outline-color:Highlight}}