/* Portfolio direction: Aesop 40 / Apple 35 / Stripe Press 25.
   Existing Manrope + Instrument Serif, paper/forest palette; complete artwork. */
.portfolio-pieces { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:14px; padding:20px; background:#e7e9df; margin:18px 0; }
.portfolio-piece { display:block; min-width:0; position:relative; color:var(--ink); text-decoration:none; }
.portfolio-piece img { display:block; width:100%; height:clamp(200px,24vw,350px); object-fit:contain; }
.portfolio-piece>span { display:block; font-size:11px; line-height:1.6; padding-top:12px; text-align:center; text-decoration:underline; text-underline-offset:4px; }
.portfolio-piece:focus-visible, .portfolio-dialog button:focus-visible { outline:2px solid #728b4d; outline-offset:6px; }
.case-story>.portfolio-caption { font-size:12px; line-height:1.7; margin:0 0 22px; }
.creative-heading { display:flex; align-items:end; justify-content:space-between; gap:6vw; border-top:1px solid var(--line); margin-top:64px; padding-top:46px; }
.creative-heading .eyebrow { margin-bottom:22px; }
.creative-heading h3 { font-size:clamp(32px,3.5vw,52px); line-height:1.12; letter-spacing:-1.2px; }
.creative-heading>p { max-width:320px; font-size:14px; line-height:1.8; color:var(--muted); }
.creative-cases { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; margin-top:36px; }
.creative-case { min-width:0; border-top:1px solid var(--ink); padding-top:20px; display:flex; flex-direction:column; }
.creative-brand { display:flex; align-items:center; justify-content:space-between; gap:16px; height:65px; }
.creative-brand>span { font-size:11px; color:var(--muted); }
.creative-brand img { width:145px; height:60px; object-fit:contain; filter:grayscale(1) brightness(0); opacity:.8; }
.creative-client { font-size:15px; font-weight:650; margin-top:18px; }
.creative-case .portfolio-pieces { margin:19px 0 21px; padding:16px 12px; gap:10px; }
.creative-case .portfolio-piece img { height:clamp(140px,13vw,210px); }
.creative-case:nth-child(1) .portfolio-pieces { background:#eee6ed; }
.creative-case:nth-child(2) .portfolio-pieces { background:#e8e2ed; }
.creative-case:nth-child(3) .portfolio-pieces { background:#e4ebe6; }
.creative-scope { font-size:10px; line-height:1.7; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); }
.creative-case h3 { font-size:clamp(24px,2.25vw,34px); line-height:1.18; letter-spacing:-.9px; margin:19px 0; }
.creative-case>p:not(.creative-scope):not(.creative-client) { font-size:14px; line-height:1.85; color:var(--muted); }
.creative-case details { margin:22px 0 18px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.creative-case summary { cursor:pointer; font-size:13px; padding:16px 0; min-height:48px; }
.creative-case details p { font-size:13px; line-height:1.8; color:var(--muted); padding-bottom:16px; }
.creative-case>.text-link { margin-top:auto; font-size:12px; min-height:44px; }
.portfolio-note { margin-top:32px; max-width:820px; font-size:12px; line-height:1.8; color:var(--muted); }
.portfolio-dialog { color:var(--ink); background:var(--paper); border:0; padding:24px 30px; width:min(1080px,94vw); max-height:94dvh; margin:auto; overflow:auto; }
.portfolio-dialog::backdrop { background:#101b16e8; }
.portfolio-dialog-head { display:flex; align-items:start; justify-content:space-between; gap:20px; }
.portfolio-dialog-head p { font-size:10px; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:7px; }
.portfolio-dialog-head h2 { font-family:Manrope,sans-serif; font-size:20px; line-height:1.5; letter-spacing:-.4px; }
.portfolio-dialog button { font:inherit; color:inherit; background:transparent; border:1px solid #abb5a5; cursor:pointer; padding:10px 14px; min-height:44px; }
.portfolio-close { flex-shrink:0; font-size:12px!important; }
.portfolio-dialog-stage { margin:20px 0 16px; background:#e7e9df; display:grid; place-items:center; min-height:180px; }
.portfolio-dialog-stage img { display:block; max-width:100%; max-height:65dvh; width:auto; height:auto; object-fit:contain; }
.portfolio-dialog-controls { display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:12px; }
.portfolio-dialog-controls span { min-width:42px; text-align:center; }
.portfolio-dialog-note { font-size:11px; line-height:1.8; color:var(--muted); margin-top:14px; }
html.portfolio-open { overflow:hidden; }
@media(max-width:1050px) and (min-width:761px) { .creative-cases { gap:20px; } .creative-case .portfolio-pieces { grid-template-columns:1fr; } .creative-case .portfolio-piece img { height:190px; } }
@media(max-width:760px) {
  .portfolio-pieces { padding:16px 12px; gap:12px; }
  .portfolio-piece img { height:240px; }
  .creative-heading { display:block; margin-top:45px; padding-top:34px; }
  .creative-heading h3 { font-size:36px; }
  .creative-heading>p { max-width:520px; margin-top:20px; }
  .creative-cases { grid-template-columns:1fr; gap:38px; margin-top:27px; }
  .creative-case h3 { font-size:32px; }
  .creative-case .portfolio-piece img { height:clamp(140px,39vw,250px); }
  .creative-case>p:not(.creative-scope):not(.creative-client) { font-size:15px; }
  .creative-case>.text-link { font-size:14px; }
  .portfolio-dialog { padding:18px 16px; width:96vw; }
  .portfolio-dialog-head h2 { font-size:16px; }
  .portfolio-dialog-stage img { max-height:59dvh; }
  .portfolio-dialog-controls { gap:8px; }
  .portfolio-dialog button { padding:9px 10px; }
}
@media(prefers-reduced-motion:reduce) { .portfolio-dialog *, .portfolio-piece { scroll-behavior:auto; transition:none; } }