.work-hero { padding: 10rem 0 4rem; background: radial-gradient(ellipse at 50% 10%, #24282b 0, transparent 65%); }
.work-hero h1 { font-size: clamp(2.8rem, 6.5vw, 5.4rem); }
.work-hero p { color: #aaa; max-width: 620px; }
.work-jump { display: inline-block; margin-top: 2rem; font-size: .85rem; border-bottom: 1px solid #666; padding-bottom: .4rem; }
.work-projects { position: relative; z-index: 1; padding-bottom: 5rem; }
.work-story { margin: 0 0 2rem; border: 1px solid #343434; border-radius: 16px; background: linear-gradient(125deg, #17191a, #0b0b0b 65%); padding: 2.8rem; }
.work-story-heading { display: grid; grid-template-columns: 65px 1fr; gap: 1.5rem; align-items: start; }
.work-number { font-size: 2.7rem; line-height: 1; color: #999; font-weight: 300; letter-spacing: -.08em; }
.work-story .eyebrow { margin-bottom: .9rem; color: #b1b1b1; }
.work-story h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); max-width: 650px; line-height: 1.15; }
.work-story-body { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem 3rem; margin-top: 2.5rem; }
.work-story h3 { font-size: .72rem; text-transform: uppercase; letter-spacing: .13em; color: #ddd; margin-bottom: .8rem; line-height: 1.5; }
.work-story p { color: #b7b7b7; font-size: .95rem; }
.work-outcome { grid-column: 1 / -1; padding: 1.5rem 1.8rem; border-left: 2px solid #ddd; background: #ffffff05; }
.work-outcome p { color: #e3e3e3; max-width: 820px; }
.work-story-bottom { border-top: 1px solid #333; margin-top: 2rem; padding-top: 1.4rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; }
.work-story-bottom ul { list-style: none; display: flex; gap: .6rem; flex-wrap: wrap; }
.work-story-bottom li { font-size: .7rem; color: #bbb; border: 1px solid #3b3b3b; border-radius: 30px; padding: .3rem .8rem; }
.work-story-bottom a { font-size: .8rem; text-decoration: underline; text-underline-offset: 5px; }
.work-privacy { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; padding: 1.5rem .3rem 3rem; }
.work-privacy h2 { font-size: 1rem; line-height: 1.5; }
.work-privacy p, .work-contact p { color: #aaa; font-size: .9rem; }
.work-contact { border-top: 1px solid #444; padding-top: 3rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.work-contact h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 1rem; }
.work-page a:focus-visible { outline: 2px solid white; outline-offset: 6px; }
.work-page #projects { scroll-margin-top: 100px; }
@media(max-width: 760px) { .work-hero { padding-top: 8rem; } .work-story { padding: 1.5rem; } .work-story-heading { grid-template-columns: 1fr; gap: 1rem; } .work-number { font-size: 1.8rem; } .work-story-body, .work-privacy { grid-template-columns: 1fr; gap: 1.5rem; } .work-contact { align-items: flex-start; flex-direction: column; } .work-outcome { padding: 1rem; } }
/* Portfolio-only grayscale lighting. */
.work-page:not(.ai-page) { background: #050505; }
.work-page:not(.ai-page)::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 92% 18%, rgba(255, 255, 255, .13), transparent 48%),
    radial-gradient(ellipse at 5% 80%, rgba(255, 255, 255, .10), transparent 46%);
}
.work-page:not(.ai-page) .mesh { display: none; }
.work-page:not(.ai-page) .work-hero { background: transparent; }
.work-page:not(.ai-page) .work-story {
  background: linear-gradient(125deg, rgba(24, 24, 24, .96), rgba(11, 11, 11, .96));
  border-color: #343434;
}