/* ========================================================================== 10 RECENT WORK โ€” the photograph IS the section (M1, refs 01 and 06). 100vw, no container, no chamfer, no inset frame, no card. Three unequal tiles butted with a 1px seam, an 11px mono label parked bottom-left, and zero padding at the foot so the band butts ยง11 directly. 3 images. ========================================================================== */ .work { background: var(--surface-page); padding-block: var(--space-section) 0; overflow: hidden; } .work__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-md); margin-block-end: var(--space-stack); } .work__social { display: flex; flex-wrap: wrap; gap: var(--space-md); font-family: var(--font-mono); font-size: var(--text-caption); color: var(--text-muted); } .work__social a { transition: color var(--dur-fast) var(--ease-state); } .work__social a:hover { color: var(--text-primary); } .work__social-link { display: inline-flex; align-items: center; gap: var(--space-3xs); } /* -------------------------------------------------------------------------- THE BAND โ€” the one place on the page where an image is not in a box -------------------------------------------------------------------------- */ /* NO 100vw HERE. The band is already a direct child of
, which is a child of and therefore exactly as wide as the page โ€” so `width: auto` IS the full bleed, in every engine, with no arithmetic to get wrong. The 100vw version measured 1500px against a 1485px body on Windows Chrome and hung 7.5px off each edge, where .work's overflow: hidden cut 15px of photograph off the band and shifted both seams; above --width-page it overhung by half the excess. Neither is visible until it is measured, which is why it survived. */ .workband { display: grid; gap: var(--bleed-seam); background: var(--bleed-seam-ink); } .workband__tile { position: relative; display: block; overflow: hidden; aspect-ratio: var(--ratio-bleed); background: var(--surface-media); } .workband__tile picture { display: contents; } .workband__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-entrance); } .workband__tile::after { content: ""; position: absolute; inset: 0; background: var(--scrim-bleed); pointer-events: none; } .workband__tile:hover img { transform: scale3d(var(--scale-bleed-hover), var(--scale-bleed-hover), 1); } .workband__tile:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); } .workband__label { position: absolute; z-index: var(--z-content); inset-block-end: var(--bleed-label-inset); /* the band bleeds to the viewport edge, so under viewport-fit=cover this label is the one piece of copy that can land under a landscape notch */ inset-inline-start: max(var(--bleed-label-inset), env(safe-area-inset-left, 0px)); max-width: calc(100% - var(--bleed-label-inset) * 2); font-family: var(--font-mono); font-size: var(--text-micro); font-weight: var(--weight-medium); line-height: var(--leading-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-on-media); } .workband__label b { color: var(--text-accent); font-weight: var(--weight-medium); } @media (min-width: 768px) { .workband { grid-template-columns: 38fr 34fr 28fr; height: var(--bleed-band-h); } .workband__tile { aspect-ratio: auto; height: 100%; } /* one tile, one track. The 3-track grid puts a lone tile in a 38fr column and leaves two thirds of a 100vw band empty. */ .workband--single { grid-template-columns: minmax(0, 1fr); } }