/* Official-site extension: shared palette and typography live in ../css/home.style.css. */
.portfolio-page{--magenta:#ff2f92;--magenta-strong:#c21f70;--magenta-soft:#ffc2df;--panel-start:#66123f;--panel-end:#b71f66}
.portfolio-header{padding:24px;text-align:center;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.portfolio-header img{display:block;width:auto;height:96px;max-width:100%;margin:auto}
.portfolio-page .top-nav a{font-size:.875rem;min-height:44px;display:inline-flex;align-items:center}
.portfolio-page .top-nav a[aria-current="page"]{background:var(--accent);color:#fff}
.portfolio-page .wrap{max-width:1040px}
.breadcrumb{display:flex;flex-wrap:wrap;gap:10px;font-size:.875rem;color:#c5c1cf;margin-bottom:28px}
.breadcrumb a{color:var(--magenta-soft);text-underline-offset:4px}
.portfolio-intro{margin-bottom:32px}
.eyebrow{font-family:"Saira Stencil One",sans-serif;font-size:.875rem;letter-spacing:.14em;color:var(--magenta-soft)}
.portfolio-intro h1{font-size:clamp(1.5rem,4vw,2rem);line-height:1.5;margin:8px 0 14px}
.portfolio-intro p,.work-content p,.portfolio-contact p{font-size:1rem;line-height:1.9;color:#d0ccd6}
.works-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.work-card{min-width:0;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column}
.work-image{aspect-ratio:3/2;overflow:hidden;background:#242424}
.work-image img{width:100%;height:100%;display:block;object-fit:cover;object-position:top}
.work-title-panel{aspect-ratio:3/2;padding:28px;display:flex;flex-direction:column;justify-content:center;gap:24px;background:linear-gradient(135deg,var(--panel-start),var(--panel-end));border-bottom:1px solid var(--line)}
.work-title-panel span{font-size:.875rem;color:var(--magenta-soft)}
.work-title-panel strong{font-family:"Saira Stencil One",sans-serif;font-weight:400;font-size:clamp(1.75rem,3.5vw,2.5rem);line-height:1.15;overflow-wrap:anywhere}
.work-content{padding:24px;display:flex;flex-direction:column;flex:1;gap:16px}
.work-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:.875rem;color:#d0ccd6}
.work-kind{padding:4px 10px;background:rgba(255,47,146,.18);border:1px solid rgba(255,120,180,.5);border-radius:999px;color:var(--magenta-soft)}
.work-content h2{font-size:1.25rem;line-height:1.6;overflow-wrap:anywhere}
.work-content .work-scope{padding-top:16px;border-top:1px solid var(--line);font-size:.875rem}
.work-scope b{color:#fff;margin-right:12px}
.work-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.work-link{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:10px 16px;border:1px solid var(--magenta);border-radius:12px;text-decoration:none;color:#fff;font-size:1rem;font-weight:600;background:rgba(255,47,146,.18)}
.work-link span{color:var(--magenta-soft)}.work-link:hover{background:var(--magenta-strong)}
.work-content .access-note{font-size:.875rem;color:#d0ccd6}
.portfolio-contact{margin-top:48px;padding:32px;background:var(--surface);border:1px solid var(--line);border-radius:16px;text-align:center}
.portfolio-contact h2{font-size:1.25rem;margin-bottom:12px}.contact-actions{display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap;margin-top:24px}
.portfolio-page .contact-btn{font-size:1rem}.service-link{color:var(--magenta-soft);font-size:1rem;text-underline-offset:5px}
.portfolio-page a:focus-visible{outline:3px solid var(--magenta);outline-offset:4px}
@media(max-width:640px){.works-grid{grid-template-columns:1fr}.work-content{padding:20px}.work-title-panel{aspect-ratio:2/1;padding:24px}.work-title-panel strong{font-size:2rem}.portfolio-contact{padding:24px 20px}.desktop-break{display:none}.portfolio-header{padding:20px 16px}.portfolio-header img{height:72px}.portfolio-page .top-nav{padding:12px 16px;gap:8px}.portfolio-page .top-nav a{padding:8px 12px}}
@media(prefers-reduced-motion:reduce){.portfolio-page *{scroll-behavior:auto!important;transition:none!important}}