/* Shared portfolio styles. Plain CSS; no framework or runtime compiler. */
*, ::before, ::after { box-sizing: border-box; border: 0 solid #e5e7eb; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-feature-settings: normal; font-variation-settings: normal; -webkit-tap-highlight-color: transparent; }
body { margin: 0; line-height: inherit; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0; }
menu, ol, ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
small { font-size: 80%; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; padding: 0; }
button, [role="button"] { cursor: pointer; }
button { background: transparent; }
audio, canvas, embed, iframe, img, object, svg, video { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
[hidden] { display: none; }
.smooth-scroll { scroll-behavior: smooth; }
.portfolio-site { font-size: 1.25rem; line-height: 1.75rem; }

/* Navigation and footer */
.site-nav { position: fixed; top: 0; right: 0; z-index: 10; max-width: 100%; mix-blend-mode: difference; }
.site-nav-list { display: flex; flex-wrap: wrap; justify-content: flex-end; row-gap: .5rem; padding: .5rem; font-size: .875rem; line-height: 1.25rem; color: #fff; }
.nav-divider { margin-right: 1rem; border-right: 2px solid #fff; padding-right: 1rem; text-decoration: underline; }
.text-link, .footer-divider { text-decoration: underline; }
.nav-divider:hover, .text-link:hover, .footer-divider:hover { text-decoration: none; }
.site-footer { border-top: 2px solid #000; }
.site-footer-spaced { margin-top: 1rem; }
.site-footer-list { padding: 1rem; font-size: .875rem; line-height: 1.25rem; }
.footer-divider { margin-right: 1rem; border-right-width: 2px; }
.footer-divider-black { border-right-color: #000; }

/* Homepage hero and project cards */
.hero-video { position: fixed; top: 0; }
.hero-video-mobile { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-video-desktop { display: none; width: auto; min-width: 100%; min-height: 100%; max-width: none; }
.hero { position: relative; display: flex; align-items: flex-end; justify-content: center; height: calc(100vh - 150px); overflow: hidden; background: #000; }
.hero-title { padding: 1rem; font-size: 1.875rem; line-height: 2.25rem; color: #fff; text-align: justify; mix-blend-mode: difference; text-transform: uppercase; }
.home-main { position: relative; background: #fff; }
.home-intro { border-bottom: 2px solid #000; padding: 1rem; }
.content-block { padding-bottom: .5rem; }
.portfolio-grid { display: grid; gap: 1rem; padding: 1rem; }
.portfolio-item-compact { padding-bottom: .5rem; }
.portfolio-item-spaced { padding-bottom: 1rem; }
.project-name { text-transform: uppercase; }
.project-thumbnail { object-fit: cover; height: 16rem; width: 100%; border-radius: .75rem; border: 2px solid #000; }
.project-link { display: inline-flex; align-items: center; width: 100%; padding: .25rem; border-radius: .75rem; border: 2px solid #000; background: #000; color: #fff; text-align: left; text-transform: uppercase; }
.project-link:hover { color: #000; background: #f8fafc; }
.project-link-arrow { width: .875rem; height: .875rem; margin-inline-start: .5rem; }
.project-link-arrow:where([dir="rtl"], [dir="rtl"] *) { transform: rotate(180deg); }

/* Case studies and Music */
.case-main { position: relative; background: #fff; padding-top: 2.5rem; margin-left: .5rem; margin-right: .5rem; }
.case-title, .music-title { font-size: 1.875rem; line-height: 2.25rem; }
.case-title { text-align: justify; }
.case-grid, .playlist-grid { display: grid; padding-top: .5rem; gap: 1rem; }
.case-grid-inset, .playlist-grid { margin: 1rem; }
.music-paragraph { margin-bottom: .5rem; }
.section-title { width: 100%; }
.section-title-uppercase { text-transform: uppercase; }
.rounded-media, .case-image { border-radius: .75rem; }
.case-image { object-fit: cover; width: 100%; }
.media-placeholder { background: #334155; }
.video-frame { width: 100%; aspect-ratio: 16 / 9; }
.case-grid > *, .playlist-grid > * { min-width: 0; }
.instagram-media { min-width: 0 !important; max-width: min(540px, 100%) !important; }
.tiktok-embed { min-width: 0 !important; max-width: 100% !important; }

@media (min-width: 768px) {
 .site-nav-list { margin-right: 1rem; padding-top: 1rem; }
 .nav-divider-tablet, .footer-divider { border-right-width: 4px; }
 .site-footer { border-top-width: 4px; }
 .hero-video-mobile { display: none; }
 .hero-video-desktop { display: block; }
 .hero { height: calc(100vh - 50px); }
 .hero-title, .case-title { font-size: 4.5rem; line-height: 1; }
 .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 1.25rem; line-height: 1.75rem; }
 .case-main { padding-top: 0; margin-left: 1rem; margin-right: 1rem; }
 .case-title { margin-right: 24rem; }
 .case-grid-tablet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .case-grid-tablet-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
 .nav-divider-desktop { border-right-width: 4px; }
 .music-title { font-size: 4.5rem; line-height: 1; }
 .case-grid-desktop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .case-grid-desktop-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
 .playlist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .section-title, .section-heading { font-size: 3.75rem; line-height: 1; }
 .section-title-small { font-size: 3rem; }
}
@media (min-width: 1280px) {
 .portfolio-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: 1.5rem; line-height: 2rem; }
}
@media (min-width: 1536px) {
 .portfolio-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Keyboard focus, narrow-screen navigation and shared page transition. */
a:focus-visible, button:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.page-fade { animation: page-fade-in .5s ease; }
@keyframes page-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 360px) {
 .nav-divider { margin-right: .5rem; padding-right: .5rem; }
}

/* Explicit hero layers keep the image/video behind the heading and controls. */
.hero-video, .hero-poster { position: fixed; z-index: 0; pointer-events: none; }
.hero-video { display: none; }
.hero-poster { inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hero-poster-desktop { display: none; }
.hero { background: transparent; }
.hero-title { position: relative; z-index: 1; }
.home-main { z-index: 1; }
.hero-motion .hero-poster { display: none; }
.hero-motion .hero-video-mobile { display: block; }
@media (min-width: 768px) {
 .hero-poster-mobile, .hero-motion .hero-video-mobile { display: none; }
 .hero-poster-desktop, .hero-motion .hero-video-desktop { display: block; }
}
@media (prefers-reduced-motion: reduce) {
 .smooth-scroll { scroll-behavior: auto; }
 .page-fade { animation: none; }
}