.work-main { max-width:1400px; margin:0 auto; padding:0 36px; }
.work-heading { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:52px 0 46px; }
.work-heading h1 { font-size:clamp(2.8rem,5.5vw,5rem); letter-spacing:-.065em; line-height:1.06; }
.studio-return { display:inline-flex; align-items:center; gap:22px; font-size:.875rem; padding:12px 0; color:var(--muted); }
.studio-return:hover { color:var(--blue); }
.work-page [aria-current=page] { color:var(--blue); text-decoration:underline; text-underline-offset:6px; }
.project-intro { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:36px; border-top:1px solid var(--line); padding:32px 0 36px; }
.project-intro .eyebrow { margin-bottom:10px; }
.project-intro h2 { font-size:clamp(2.8rem,5vw,4.7rem); letter-spacing:-.06em; line-height:1; }
.project-summary { max-width:410px; }
.project-summary>p { font-size:1.25rem; line-height:1.55; letter-spacing:-.02em; }
.project-summary ul { list-style:none; display:flex; flex-wrap:wrap; gap:8px 22px; color:var(--muted); padding:0; margin:16px 0 0; font-size:.875rem; }
.campaign-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:42px 28px; }
.campaign-card { min-width:0; margin:0; }
.campaign-image { position:relative; display:block; aspect-ratio:1; background:#eeede9; border-radius:7px; overflow:hidden; cursor:zoom-in; }
.campaign-image img { display:block; width:100%; height:100%; object-fit:contain; }
.campaign-context .campaign-image { background:#e8e9e8; }
.campaign-landscape .campaign-image { aspect-ratio:16/9; }
.image-open { position:absolute; bottom:16px; right:16px; display:flex; gap:24px; align-items:center; min-height:40px; padding:6px 13px; border-radius:4px; background:#fcfdfef2; color:var(--ink); font-size:.875rem; opacity:0; transform:translateY(5px); transition:opacity .18s,transform .18s; }
.campaign-image:hover .image-open,.campaign-image:focus-visible .image-open { opacity:1; transform:none; }
.campaign-card figcaption { display:flex; justify-content:space-between; align-items:start; gap:20px; padding-top:17px; }
.campaign-card h3 { font-size:1.25rem; line-height:1.3; letter-spacing:-.025em; }
.campaign-card figcaption p { color:var(--muted); font-size:.875rem; margin-top:3px; }
.campaign-source { display:inline-flex; gap:13px; padding-block:4px; min-height:32px; flex-shrink:0; color:var(--muted); font-size:.875rem; }
.campaign-source:hover,.viewer-footer a:hover { color:var(--blue); text-decoration:underline; text-underline-offset:4px; }
.work-contact { display:flex; align-items:center; justify-content:space-between; gap:30px; border-block:1px solid var(--line); padding:44px 0; margin-top:72px; }
.work-contact h2 { font-size:clamp(2.5rem,4vw,3.8rem); letter-spacing:-.06em; line-height:1.1; }
.campaign-viewer { width:100%; max-width:none; height:100dvh; max-height:none; padding:0; border:0; margin:0; color:var(--ink); background:var(--paper); }
.campaign-viewer[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.campaign-viewer::backdrop { background:#172a3bcc; }
.viewer-bar,.viewer-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:16px 28px; }
.viewer-bar { border-bottom:1px solid var(--line); }
.viewer-bar h2 { font-size:1.2rem; letter-spacing:-.025em; }
.viewer-client { font-size:.75rem; color:var(--muted); letter-spacing:.06em; }
.viewer-close { display:flex; align-items:center; gap:24px; background:none; border:1px solid #aabfcb; border-radius:5px; min-height:44px; padding:7px 14px; font-size:.875rem; }
.viewer-close span { font-size:1.5rem; line-height:1; }
.viewer-art { display:flex; align-items:center; justify-content:center; min-height:0; padding:20px 28px; }
.viewer-art img { display:block; width:100%; height:100%; object-fit:contain; }
.viewer-footer { border-top:1px solid var(--line); font-size:.875rem; }
.viewer-footer>a { padding-block:10px; }
.viewer-controls { display:flex; align-items:center; gap:17px; }
.viewer-controls button { display:grid; place-items:center; background:none; border:1px solid #aabfcb; border-radius:5px; width:44px; height:44px; font-size:1.2rem; }
.viewer-controls button:disabled { opacity:.3; cursor:default; }
.viewer-controls span { min-width:44px; text-align:center; font-variant-numeric:tabular-nums; color:var(--muted); }
.client-words { margin-top:72px; border-top:1px solid var(--line); padding-top:36px; }
.client-words h2 { font-size:2.8rem; letter-spacing:-.05em; }
.quote-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px; }
.quote-grid figure { margin:30px 0 0; }
.quote-grid blockquote { margin:0 0 24px; font-size:1.5rem; line-height:1.5; }
.quote-grid figcaption { font-size:1rem; }
.quote-grid figcaption span { display:block; font-size:.875rem; color:var(--muted); }
@media(hover:none) { .image-open { opacity:1; transform:none; } }
@media(max-width:1250px) { .work-main { padding-inline:26px; } }
@media(max-width:900px) { .work-main { padding-inline:24px; } .work-heading { padding-block:36px; } .campaign-grid { gap:32px 20px; } .campaign-card figcaption { flex-direction:column; gap:6px; } .campaign-source { min-height:40px; align-items:center; } }
@media(max-width:700px) { .work-page .desktop-nav { gap:15px; } .work-page .site-header { gap:18px; } }
@media(max-width:600px) { .work-main { padding-inline:20px; } .work-heading { display:block; padding:30px 0 24px; } .work-heading h1 { font-size:2.8rem; } .studio-return { margin-top:8px; } .project-intro { grid-template-columns:1fr; gap:22px; padding-block:26px; } .project-intro h2 { font-size:3.2rem; } .project-summary>p { font-size:1.125rem; } .project-summary ul { margin-top:12px; gap:7px 18px; } .campaign-grid { grid-template-columns:1fr; gap:30px; } .campaign-card figcaption { padding-top:13px; flex-direction:row; gap:10px; flex-wrap:wrap; } .campaign-source { font-size:.875rem; gap:8px; } .work-contact { margin-top:44px; padding-block:30px; flex-wrap:wrap; } .viewer-bar,.viewer-footer { padding:12px 16px; gap:12px; } .viewer-art { padding:12px 8px; } .viewer-controls { gap:8px; } .viewer-close { gap:18px; } .quote-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .image-open { transition:none; transform:none; } }