.portfolio-page .page-hero h1 { font-size: clamp(2.4rem, 5vw, 4.8rem); }
.portfolio-page .portfolio-note { font-size: .92rem; max-width: 760px; padding-left: 16px; border-left: 3px solid var(--magenta); }
.portfolio-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding-top: 12px; }
.portfolio-card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: var(--shadow); }
.preview-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: var(--blush); color: var(--plum); font-size: .78rem; gap: 14px; }
.preview-bar span:first-child { letter-spacing: 3px; color: var(--magenta); }
.preview-window { height: 300px; position: relative; overflow: hidden; background: var(--soft-rose); border-bottom: 1px solid var(--line); }
.preview-window iframe { width: 1280px; height: 800px; border: 0; transform: scale(.45); transform-origin: top left; pointer-events: none; }
.portfolio-copy { padding: 28px; }
.portfolio-copy h2 { font-size: 1.65rem; line-height: 1.2; margin: 0; }
.portfolio-copy > p:not(.eyebrow) { color: var(--muted); min-height: 78px; }
.portfolio-inquiry { display: grid; grid-template-columns: .8fr 1.2fr; gap: 42px; align-items: center; }
.portfolio-inquiry .hero-actions { align-items: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 850px) { .portfolio-gallery, .portfolio-inquiry { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .preview-window { height: 210px; } .preview-window iframe { transform: scale(.29); } .portfolio-copy { padding: 22px; } .portfolio-copy > p:not(.eyebrow) { min-height: 0; } }
.portfolio-categories { width: min(1180px, calc(100% - 36px)); margin: 0 auto 20px; display: flex; flex-wrap: wrap; gap: 12px; }
.portfolio-categories a { padding: 12px 20px; border: 1px solid var(--line); background: var(--blush); border-radius: 999px; color: var(--plum); font-weight: 700; }
.portfolio-web-heading { padding-top: 32px; padding-bottom: 20px; }
.portfolio-web-heading h2 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); }
.portfolio-web-heading, .social-section { scroll-margin-top: 190px; }
.social-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.social-project { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: var(--shadow); }
.social-art { display: block; background: var(--soft-rose); }
.social-art img { display: block; width: 100%; height: auto; }
.social-copy { padding: 24px; flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.social-copy h3 { font-size: 1.3rem; margin: 0; }
.social-copy > p:not(.eyebrow) { color: var(--muted); }
.social-copy .text-link { margin-top: auto; }
.social-art:focus-visible { outline-offset: -4px; }
@media (max-width: 1000px) { .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { .social-grid { grid-template-columns: 1fr; } }
.video-section { scroll-margin-top: 190px; }
.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.video-project { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: var(--shadow); }
.video-project video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: contain; background: #180b14; }
.video-copy { padding: 24px; }
.video-copy h3 { margin: 0 0 18px; font-size: 1.4rem; }
@media (max-width: 1000px) { .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { .video-grid { grid-template-columns: 1fr; } }
.content-section { scroll-margin-top: 190px; }
.content-project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.content-project { display: flex; flex-direction: column; border-radius: 16px; }
.content-project > img { display: block; width: 100%; height: 340px; object-fit: contain; padding: 24px; background: var(--soft-rose); }
.content-project .ebook-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.content-project .ebook-body h3 { line-height: 1.4; }
.content-project .ebook-body .btn { margin-top: auto; }
@media (max-width: 1000px) { .content-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { .content-project-grid { grid-template-columns: 1fr; } }