.work-page { --work-bg:#08090e; --work-surface:#12131b; overflow-x:clip; }
.work-page .header { background:#08090ef2; backdrop-filter:blur(18px); border-bottom:0; }
.work-page .header a[aria-current] { color:var(--accent); }
.work-mobile-home { display:none; }
.work-eyebrow { font-size:11px; letter-spacing:.12em; line-height:1.6; }
.work-intro,.work-detail-intro { padding:180px var(--gutter) 68px; }
.work-intro-top { display:flex; justify-content:space-between; align-items:center; gap:20px; color:var(--muted); }
.work-intro-top>span { font-size:11px; letter-spacing:.08em; }
.work-intro h1 { font-size:clamp(64px,9.4vw,150px); font-weight:450; letter-spacing:-.065em; line-height:1.05; margin:30px 0 48px; }
.work-intro h1 em { color:var(--accent); letter-spacing:-.025em; }
.work-intro-bottom { display:flex; align-items:flex-end; gap:50px; }
.work-intro-bottom>p { font-size:clamp(24px,2.8vw,38px); line-height:1.45; letter-spacing:-.04em; }
.work-intro-bottom>div { margin-left:auto; max-width:440px; font-size:14px; line-height:1.9; color:var(--muted); }
.work-intro-bottom>a { display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; width:52px; height:52px; font-size:24px; flex-shrink:0; }
.work-gallery,.work-detail-body { background:var(--work-bg); color:var(--white); padding:45px var(--gutter) 72px; }
.work-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:38px; min-height:45px; }
.work-filters { display:flex; flex-wrap:wrap; gap:10px; }
.work-filters[hidden],.work-card[hidden] { display:none; }
.work-filters button { border:1px solid var(--line); background:transparent; border-radius:30px; padding:12px 18px; min-height:44px; color:var(--white); font-size:13px; transition:background .2s,color .2s; }
.work-filters button[aria-pressed="true"] { background:var(--accent); color:var(--ink); }
.work-filters span { margin-left:9px; font-size:10px; opacity:.65; }
#work-count { font-size:12px; color:var(--muted); white-space:nowrap; }
.work-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:52px 24px; }
.work-card>a { display:block; }
.work-image { position:relative; overflow:hidden; background:var(--work-surface); aspect-ratio:4/5; }
.work-image img { width:100%; height:100%; object-fit:var(--work-fit,cover); object-position:var(--work-focus,50% 50%); display:block; transition:transform .65s; }
.work-card a:hover img,.work-card a:focus-visible img { transform:scale(1.035); }
.work-view { position:absolute; bottom:16px; right:16px; background:#08090ecf; color:var(--white); font-size:10px; letter-spacing:.05em; padding:12px 14px; opacity:0; transform:translateY(5px); transition:opacity .2s,transform .2s; }
.work-card a:hover .work-view,.work-card a:focus-visible .work-view { opacity:1; transform:none; }
.work-card-meta { display:flex; justify-content:space-between; gap:15px; margin:20px 0 9px; font-size:10px; letter-spacing:.05em; color:var(--muted); }
.work-card-title { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.work-card-title h2 { font-size:clamp(22px,2.5vw,35px); font-weight:450; letter-spacing:-.04em; }
.work-card-title>span { font-size:22px; }
.work-card-subtitle { margin-top:9px; font-size:13px; color:var(--muted); }
.work-badge { display:inline-block; margin-top:15px; font-size:10px; letter-spacing:.01em; padding:6px 9px; border:1px solid currentColor; border-radius:3px; opacity:.65; }
.work-disclosure { margin-top:56px; padding-top:22px; color:var(--muted); font-size:12px; line-height:1.85; max-width:880px; }
.work-cta { padding:95px var(--gutter); }
.work-cta>.work-eyebrow { color:var(--muted); }
.work-cta h2 { margin:22px 0 30px; font-size:clamp(30px,4.5vw,65px); line-height:1.4; letter-spacing:-.04em; font-weight:450; }
.work-cta-link { display:inline-flex; align-items:center; gap:45px; padding:16px 0; color:var(--accent); font-size:15px; }
.work-footer { display:flex; align-items:center; flex-wrap:wrap; gap:32px; padding:32px var(--gutter); }
.work-footer>p { font-size:10px; line-height:1.7; color:var(--muted); }
.work-footer-meta { flex:0 0 100%; display:flex; flex-wrap:wrap; gap:18px; font-size:10px; color:var(--muted); }
.work-footer-meta>span { margin-left:auto; }
.work-back { display:inline-block; font-size:13px; margin-bottom:35px; padding:10px 0; color:var(--accent); }
.work-detail-intro { padding-top:135px; }
.work-detail-intro h1 { font-size:clamp(52px,8.3vw,130px); font-weight:450; letter-spacing:-.055em; margin:28px 0 25px; line-height:1.05; }
.work-detail-lead { display:flex; align-items:center; gap:30px; justify-content:space-between; }
.work-detail-lead>p { font-size:clamp(20px,2.4vw,32px); letter-spacing:-.035em; }
.work-detail-lead .work-badge { margin:0; white-space:nowrap; }
.work-detail-body { padding-top:0; }
.work-detail-image { margin:0; }
.work-detail-image img { display:block; width:100%; height:auto; }
.work-detail-image figcaption { font-size:10px; letter-spacing:.08em; color:var(--muted); padding:15px 0; }
.work-detail-caption { display:grid; grid-template-columns:1fr 1fr; gap:20px 50px; padding:70px 0; }
.work-detail-caption>.work-eyebrow { grid-column:1/-1; color:var(--muted); }
.work-detail-caption h2 { font-size:clamp(28px,3.5vw,52px); font-weight:450; line-height:1.2; letter-spacing:-.04em; }
.work-detail-caption h2 em { font-family:var(--sans); font-style:normal; }
.work-detail-caption>p:last-child { align-self:center; max-width:530px; font-size:16px; line-height:1.85; color:var(--muted); }
.work-direction { display:grid; grid-template-columns:1fr 1fr; gap:50px; padding:70px 0; }
.work-direction h2 { margin-top:20px; font-size:clamp(26px,3vw,44px); font-weight:450; line-height:1.4; letter-spacing:-.04em; }
.work-direction>div>p { max-width:560px; font-size:15px; line-height:1.85; }
.work-direction>div>p+p { margin-top:20px; color:var(--muted); }
.work-direction .work-eyebrow { font-size:11px; }
.work-palette { display:flex; gap:10px; margin-top:24px; }
.work-palette span { width:35px; height:35px; background:var(--swatch); border-radius:50%; border:1px solid #00000012; }
.work-campaign-copy { display:flex; flex-direction:column; justify-content:space-between; min-height:310px; padding:35px 45px; background:#c8c1f8; color:var(--ink); }
.work-campaign-copy>span { font-size:11px; letter-spacing:.12em; }
.work-campaign-copy>p { font-family:var(--serif); font-size:clamp(42px,6vw,84px); padding:45px 0; line-height:1.05; }
.work-campaign-copy.veil { background:#e3d9cb; color:#514947; }
.work-campaign-copy.still { background:#283321; color:#e0d9bb; }
.work-campaign-copy.daybreak { background:#f48333; color:#fff1d4; }
.work-campaign-copy.archive { background:#171821; color:#eeeae3; }
.work-campaign-copy.material { background:#c5c1c9; color:#3c414b; }
.work-project-nav { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:45px var(--gutter); }
.work-project-nav>a:first-child { font-size:13px; padding:15px 0; }
.work-project-nav>a:last-child { display:flex; flex-direction:column; gap:10px; text-align:right; }
.work-project-nav span { font-size:11px; color:var(--muted); }
.work-project-nav strong { font-size:clamp(22px,3vw,38px); font-weight:450; }
@media(min-width:1600px) { .work-intro,.work-gallery,.work-detail-intro,.work-detail-body,.work-project-nav,.work-cta,.work-footer { padding-left:max(var(--gutter),calc((100vw - 1440px)/2)); padding-right:max(var(--gutter),calc((100vw - 1440px)/2)); } }
@media(max-width:1000px) { .work-page .header { gap:22px; } .work-page .header nav { gap:20px; } .work-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .work-intro-bottom { gap:25px; } .work-intro-bottom>div { max-width:330px; font-size:13px; } }
@media(max-width:700px) { .work-page .header { gap:14px; padding-top:18px; padding-bottom:18px; } .work-page .header .wordmark { min-width:88px; font-size:24px; } .work-mobile-home { display:block; margin-left:auto; font-size:12px; padding:14px 0; } .work-page .contact-link { padding:10px 13px; min-height:44px; font-size:12px; gap:10px; } .work-page .contact-link span { font-size:16px; } .work-intro { padding-top:135px; padding-bottom:42px; } .work-intro-top>span { display:none; } .work-intro h1 { margin:25px 0 28px; } .work-intro-bottom { flex-wrap:wrap; gap:24px; } .work-intro-bottom>p { flex:1; } .work-intro-bottom>div { order:3; width:100%; max-width:none; margin-left:0; } .work-gallery { padding-top:25px; padding-bottom:45px; } .work-toolbar { flex-direction:column; align-items:flex-start; margin-bottom:25px; gap:15px; } .work-filters { gap:7px; } .work-filters button { font-size:12px; padding:11px 13px; } .work-grid { grid-template-columns:1fr; gap:36px; } .work-card-title h2 { font-size:32px; } .work-card-meta { margin-top:16px; } .work-view { display:none; } .work-disclosure { margin-top:35px; } .work-cta { padding-top:65px; padding-bottom:65px; } .work-footer { gap:22px; } .work-footer-meta { width:100%; margin:0; line-height:1.6; } .work-footer-meta>span { width:100%; margin-left:0; } .work-detail-intro { padding-top:110px; padding-bottom:35px; } .work-back { margin-bottom:18px; } .work-detail-lead { align-items:flex-start; flex-direction:column; gap:15px; } .work-detail-caption,.work-direction { grid-template-columns:1fr; gap:25px; padding:40px 0; } .work-detail-caption>p:last-child { font-size:14px; } .work-direction>div>p { font-size:14px; } .work-campaign-copy { min-height:240px; padding:25px; } .work-campaign-copy>p { padding:35px 0; } .work-project-nav { padding-top:30px; padding-bottom:30px; } }
@media(prefers-reduced-motion:reduce) { .work-image img,.work-view { transition:none; } .work-card a:hover img,.work-card a:focus-visible img { transform:none; } }

@media(max-width:420px) {
  .work-page .header { gap:10px; }
  .work-page .contact-link { padding:10px; font-size:11px; gap:0; margin-left:0; }
  .work-page .contact-link span { display:none; }
}

/* Website samples and expanded image collection. */
.work-toolbar { align-items:flex-start; }
.work-filters { flex:1; }
#work-count { padding-top:13px; }
.work-card-title h2 { font-size:clamp(22px,2.2vw,33px); }
.work-card[data-category="website"] .work-image { aspect-ratio:16/9; }
.work-card[data-category="website"] .work-image img { object-fit:contain; object-position:top; }
.work-sample-actions { display:flex; gap:28px; align-items:center; padding:30px 0; }
.work-sample-actions>a { background:var(--accent); color:var(--ink); padding:15px 22px; font-size:14px; display:flex; gap:30px; align-items:center; flex-shrink:0; }
.work-sample-actions>p { color:var(--muted); font-size:12px; line-height:1.8; max-width:420px; }
.work-webscreens { display:grid; grid-template-columns:minmax(0,1fr) minmax(170px,25%); gap:30px; align-items:start; }
.work-webscreens figure { margin:0; }
.work-webscreens img { display:block; width:100%; height:auto; border:1px solid var(--line); }
.work-webscreens figcaption { color:var(--muted); font-size:10px; letter-spacing:.05em; margin-top:15px; }
.work-mobile-screen { max-width:300px; justify-self:end; }
.work-extra-image { margin-top:45px; }
.work-detail-image img { max-height:1000px; object-fit:contain; background:var(--work-surface); }
@media(max-width:700px) {
 .work-sample-actions { flex-direction:column; align-items:flex-start; gap:15px; }
 .work-webscreens { grid-template-columns:1fr; gap:35px; }
 .work-mobile-screen { justify-self:center; width:min(76%,300px); }
 .work-filters { flex:initial; }
 #work-count { padding-top:0; }
}

/* Compact gallery with a continuous image viewer. */
.work-intro { padding:140px var(--gutter) 30px; }
.work-intro h1 { font-size:clamp(32px,3.4vw,46px); margin:0; letter-spacing:-.045em; }
.work-gallery { padding-top:16px; }
.work-controls[hidden],.work-filters[hidden] { display:none; }
.work-kinds { display:flex; gap:30px; margin-bottom:18px; }
.work-kinds button { background:transparent; color:var(--muted); padding:10px 0 14px; min-height:48px; border-bottom:2px solid transparent; font-size:18px; }
.work-kinds button[aria-pressed="true"] { color:var(--accent); border-bottom-color:var(--accent); }
.work-kinds span { margin-left:7px; font-size:12px; opacity:.65; }
.work-filters { gap:6px; margin-bottom:24px; }
.work-filters button { padding:9px 15px; font-size:12px; }
.work-toolbar.sr-only { margin:0; padding:0; min-height:0; }
.work-view { opacity:1; transform:none; font-size:11px; letter-spacing:0; padding:9px 12px; }
.work-card-title { margin-top:12px; }
.work-card-title h2 { font-size:14px; font-weight:400; line-height:1.55; letter-spacing:-.015em; }
.work-card-title>span { display:none; }
.work-card .work-badge { margin-top:6px; padding:0; border:0; font-size:11px; opacity:1; color:var(--muted); }
.work-card-detail { margin-top:15px; font-size:12px; padding-bottom:9px; }
.work-card-detail span { float:right; }
.work-card a:focus-visible,.work-controls button:focus-visible,.work-lightbox button:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.work-lightbox { width:min(1100px,calc(100vw - 48px)); max-height:calc(100dvh - 48px); padding:22px; border:0; background:var(--work-bg); color:var(--white); overflow:auto; }
.work-lightbox::backdrop { background:#08090ee8; }
.work-lightbox-bar { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding-bottom:18px; }
.work-lightbox-bar h2 { font-size:20px; font-weight:500; line-height:1.4; }
.work-lightbox-bar p { font-size:11px; margin-top:7px; color:var(--muted); }
.work-lightbox button { border:1px solid var(--line); background:transparent; padding:11px 15px; min-width:64px; min-height:44px; color:var(--white); font-size:13px; white-space:nowrap; }
.work-lightbox button:disabled { opacity:.4; cursor:default; }
#work-lightbox-image { display:block; width:100%; height:auto; max-height:calc(100dvh - 275px); object-fit:contain; }
.work-lightbox-navigation { display:flex; align-items:center; justify-content:center; gap:24px; margin-top:16px; }
#work-lightbox-position { min-width:64px; text-align:center; font-size:12px; font-variant-numeric:tabular-nums; color:var(--muted); }
#work-lightbox-detail { display:block; padding:16px 0 0; font-size:12px; text-align:center; }
body.work-image-open { overflow:hidden; }
@media(min-width:1600px) { .work-intro { padding-left:max(var(--gutter),calc((100vw - 1440px)/2)); padding-right:max(var(--gutter),calc((100vw - 1440px)/2)); } }
@media(max-width:700px) {
 .work-intro { padding-top:112px; padding-bottom:24px; }
 .work-intro h1 { margin:0; }
 .work-kinds { gap:26px; margin-bottom:14px; }
 .work-kinds button { font-size:17px; }
 .work-filters { gap:6px; margin-bottom:22px; }
 .work-filters button { padding:9px 13px; }
 .work-view { display:block; bottom:12px; right:12px; font-size:11px; }
 .work-card-title h2 { font-size:14px; }
 .work-lightbox { width:calc(100vw - 24px); max-height:calc(100dvh - 24px); padding:15px; }
 .work-lightbox-bar h2 { font-size:17px; }
 #work-lightbox-image { max-height:calc(100dvh - 270px); }
 .work-lightbox-navigation { gap:20px; }
}

.work-card:not([data-category="website"]) .work-badge { margin-top:12px; }

/* Added own-brand carousel and character collections. */
.work-card[data-category="character"] .work-image img { object-fit:contain; object-position:center; }
.work-series-intro h1 { font-size:clamp(32px,4vw,58px); line-height:1.3; letter-spacing:-.04em; }
.work-series-intro .work-detail-lead>p { font-size:16px; }
.work-series-description { color:var(--muted); font-size:14px; line-height:1.9; max-width:740px; padding:0 0 32px; }
.work-series-images { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
.work-series-images .work-detail-image img { max-height:none; background:transparent; }
@media(max-width:700px) { .work-series-images { grid-template-columns:1fr; gap:24px; } }

/* Keep poster lettering, grouped products and complete site compositions visible. */
.work-card[data-thumbnail-fit="contain"] a:hover img,
.work-card[data-thumbnail-fit="contain"] a:focus-visible img { transform:none; }
@media(max-width:700px) {
  .work-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .work-filters[hidden] { display:none; }
}