/* Project overview: shared noir palette and global typography roles. */
body.work-page {
  --bg:#050506;
  --work-yellow:#ffd400;
  background:var(--bg);
  color:#f5f5f6;
}
.work-page main > .shell { width:min(1240px,calc(100% - 80px)); }
.work-heading { position:relative; padding-block:clamp(58px,7vw,100px) 0; }
.work-heading-inner { position:relative; isolation:isolate; }
.work-heading-inner::after { content:''; position:absolute; z-index:-1; top:0; right:4%; width:clamp(120px,17vw,220px); aspect-ratio:2.73; background:url('../images/noir-yellow-swipe.svg') center/contain no-repeat; opacity:.3; transform:rotate(-9deg); pointer-events:none; }
.work-kicker { margin:0 0 34px; color:#9898a1; font-size:var(--type-label); font-weight:600; line-height:1.5; letter-spacing:.16em; text-transform:uppercase; }
.work-heading-row { display:grid; grid-template-columns:1.3fr 1fr; align-items:end; gap:clamp(35px,8vw,110px); }
.work-page-label { margin:0 0 14px; color:#d0d0d5; font-size:var(--type-caption); }
.work-heading h1 { margin:0; font-size:var(--type-page-title); font-weight:600; line-height:var(--type-title-leading); letter-spacing:var(--type-title-tracking); }
.work-heading h1 span { position:relative; display:inline-block; color:var(--work-yellow); }
.work-intro { max-width:375px; padding-bottom:5px; }
.work-intro > p { margin:0 0 24px; color:#aaaab2; font-size:var(--type-body); font-weight:400; line-height:1.65; }
.work-selection { display:flex; align-items:center; gap:14px; color:#92929b; font-size:var(--type-caption); }
.work-selection strong { color:var(--work-yellow); font-size:var(--type-card-title); font-weight:600; letter-spacing:-.04em; }
.work-filter-bar { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-top:clamp(45px,6vw,80px); padding:22px 64px 22px 0; }
.work-filter-bar > p { margin:0; color:#8f8f99; font-size:var(--type-caption); }
.work-filters { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.work-filters button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:10px 15px; border:1px solid #303034; color:#b3b3bb; background:#101012; font-family:inherit; font-weight:500; font-size:var(--type-button); line-height:1.3; cursor:pointer; transition:color .2s,background .2s,border-color .2s; }
.work-filters button:hover { color:#fff; border-color:#818185; }
.work-filters button[aria-pressed="true"] { color:#09090b; border-color:var(--work-yellow); background:var(--work-yellow); }
.work-filters small { color:inherit; opacity:.7; font-size:var(--type-label); }
.work-dot { flex:0 0 5px; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--work-yellow); }
.work-filters button[aria-pressed="true"] .work-dot { background:currentColor; }
.work-results { padding-top:8px; }
.work-status { margin:0 0 20px; color:#7f7f89; font-size:var(--type-label); font-weight:400; letter-spacing:.08em; }
.work-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(45px,6vw,80px) 28px; }
.work-card { min-width:0; }
.work-card[hidden] { display:none; }
.work-card a { display:block; }
.work-image { position:relative; aspect-ratio:1.25; overflow:hidden; background:#151517; }
.work-image img { display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.85) contrast(1.06); transition:filter .55s ease,transform .65s cubic-bezier(.22,1,.36,1); }
.work-image-fs img { object-position:50% 18%; }
.work-image > span { position:absolute; right:20px; bottom:20px; display:grid; place-items:center; width:44px; height:44px; color:#0a0a0c; background:var(--work-yellow); font-size:var(--type-lead); font-weight:400; transition:transform .25s,background .25s; }
.work-card a:hover img,.work-card a:focus-visible img { filter:grayscale(0) brightness(1) contrast(1); transform:scale(1.025); }
.work-card a:hover .work-image > span { transform:translate(2px,-2px); background:#fff; }
.work-caption { display:grid; grid-template-columns:30px minmax(0,1fr); gap:7px 12px; padding-top:22px; }
.work-project-number { grid-column:1; grid-row:1; padding-top:6px; color:var(--work-yellow); font-size:var(--type-label); font-weight:500; font-variant-numeric:tabular-nums; }
.work-caption h2 { grid-column:2; margin:0; font-size:var(--type-card-title); line-height:1.2; font-weight:600; letter-spacing:-.025em; }
.work-caption p { grid-column:2; margin:0; color:#a3a3ad; font-size:var(--type-small); font-weight:400; line-height:1.55; }
.work-tags { list-style:none; display:flex; flex-wrap:wrap; gap:10px 18px; padding:0; margin:18px 0 0 42px; }
.work-tags li { display:flex; align-items:center; gap:7px; color:#83838e; font-size:var(--type-label); font-weight:400; }
.work-contact { display:flex; justify-content:space-between; align-items:center; gap:40px; margin-block:clamp(80px,10vw,145px) 80px; padding:clamp(30px,5vw,64px); background:#121214; position:relative; isolation:isolate; overflow:hidden; }
.work-contact::after { content:''; position:absolute; z-index:-1; width:200px; right:18%; bottom:-50px; aspect-ratio:1; background:url('../images/noir-yellow-impact.svg') center/contain no-repeat; opacity:.12; transform:rotate(18deg); pointer-events:none; }
.work-contact .work-kicker { margin-bottom:20px; }
.work-contact h2 { margin:0; font-size:var(--type-section-title); font-weight:600; line-height:1.08; letter-spacing:-.04em; text-wrap:balance; }
.work-contact h2 span { color:var(--work-yellow); }
.work-contact-link { flex-shrink:0; display:inline-flex; justify-content:space-between; align-items:center; gap:30px; padding:17px 20px; color:#09090b; background:var(--work-yellow); font-size:var(--type-button); font-weight:600; }
.work-contact-link > span { font-size:var(--type-lead); font-weight:400; }
.work-contact-link:hover { background:#fff; }
.work-page button:focus-visible,.work-page a:focus-visible { outline:2px solid var(--work-yellow); outline-offset:5px; }
.work-page .nav-left a[href$="projects/index.html"] { color:var(--work-yellow); }
@media(hover:none) { .work-image img { filter:none; } }
@media(max-width:1000px) {
  .work-filter-bar { align-items:flex-start; flex-direction:column; gap:16px; padding-right:0; }
  .work-filters { justify-content:flex-start; }
  .work-contact { align-items:flex-start; flex-direction:column; }
}
@media(max-width:760px) {
  .work-page main > .shell { width:calc(100% - 40px); }
  .work-heading { padding-top:42px; }
  .work-heading-inner::after { top:10px; right:-8px; width:120px; opacity:.22; }
  .work-kicker { margin-bottom:30px; }
  .work-heading-row { grid-template-columns:1fr; gap:25px; }
  .work-intro { max-width:420px; }
  .work-intro > p { margin-bottom:16px; }
  .work-filter-bar { margin-top:32px; padding:12px 0 20px; }
  .work-filters { gap:7px; }
  .work-filters button { padding:10px 13px; }
  .work-grid { grid-template-columns:1fr; gap:42px; }
  .work-image { aspect-ratio:1.2; }
  .work-image img { filter:none; }
  .work-image > span { right:15px; bottom:15px; width:38px; height:38px; }
  .work-caption { padding-top:18px; grid-template-columns:24px minmax(0,1fr); gap:6px 10px; }
  .work-project-number { padding-top:4px; }
  .work-tags { margin-left:34px; gap:10px 15px; }
  .work-contact { margin-block:70px 55px; padding:28px 24px; gap:28px; }
  .work-contact-link { width:100%; }
}
@media(prefers-reduced-motion:reduce) {
  .work-image img,.work-image > span,.work-filters button { transition:none; }
  .work-card a:hover img,.work-card a:hover .work-image > span { transform:none; }
}