/* Editable additions to the captured site's original visual theme. */
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { overflow-wrap: break-word; }
main { flex: 1; }
.hero-portrait-frame { overflow: hidden; }
.hero-portrait { object-position: 100% 10%; transform: scale(1.6); transform-origin: 100% 10%; }
.hero-actions { flex-wrap: wrap; }
.hero-actions a { flex-shrink: 0; white-space: nowrap !important; }
footer { padding-bottom: 5rem; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid hsl(var(--primary)); outline-offset: 4px; }
.skip-link { position: fixed; top: -6rem; left: 1rem; padding: .75rem 1rem; background: hsl(var(--primary)); color: white; z-index: 100; border-radius: .5rem; }
.skip-link:focus { top: 1rem; }
#site-header.is-scrolled { background: hsl(var(--background) / .96); backdrop-filter: blur(12px); box-shadow: 0 1px 0 hsl(var(--border)); }
#site-header .site-navigation { display: none; gap: .4rem; }
#site-header nav a, .mobile-navigation a { font-family: var(--font-heading), sans-serif; font-size: .875rem; font-weight: 700; letter-spacing: .01em; background: linear-gradient(145deg, #286e7df5, #194e5df5); color: #fff; border: 1px solid #ffffff60; border-radius: 999px; box-shadow: 0 3px 9px #102c3526, inset 0 1px 0 #ffffff25; transition: background-color 160ms ease; }
#site-header nav a { display: inline-flex; align-items: center; justify-content: center; padding: .65rem 1rem; min-height: 44px; white-space: nowrap; }
#site-header nav a:hover, .mobile-navigation a:hover { background: #174754; color: #fff; }
#site-header nav a[aria-current="page"], .mobile-navigation a[aria-current="page"] { background: #174754; color: #fff; box-shadow: inset 0 -3px 0 #d2ad53; }
#site-header [data-menu-toggle] { display: flex; background: #1f5d6b; color: #fff; min-width: 44px; min-height: 44px; border-radius: 50%; }
.mobile-navigation { position: fixed; inset: 4rem 0 auto; z-index: 49; background: hsl(var(--background)); border-bottom: 1px solid hsl(var(--border)); padding: .75rem 1.5rem 1.25rem; box-shadow: 0 8px 14px #0000000d; }
.mobile-navigation[hidden] { display: none; }
.mobile-navigation a { display: block; padding: .8rem 1rem; margin-top: .5rem; }
.form-status { font-size: .875rem; line-height: 1.6; }
.form-status:empty { display: none; }
.form-status[data-kind="error"] { color: #9b2c22; }
.form-status[data-kind="success"] { color: #176642; }
.error-page { min-height: 65vh; padding: 10rem 1.5rem 5rem; max-width: 48rem; margin: auto; }
.error-page h1 { font: 700 clamp(2rem,5vw,3.5rem)/1.1 var(--font-heading); margin-bottom: 1.5rem; }
.error-page a { display: inline-block; margin-top: 2rem; padding: 1rem 1.5rem; border-radius: 2rem; background: hsl(var(--primary)); color: white; }
@media (min-width: 900px) { .mobile-navigation { display: none; } #site-header .site-navigation { display: flex; } #site-header [data-menu-toggle] { display: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; }

.photo-gallery { width: 100%; background: hsl(var(--background)); }
.photo-gallery__frame { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 4 / 3; background: hsl(var(--muted)); cursor: pointer; }
.photo-gallery--portrait .photo-gallery__frame { aspect-ratio: 4 / 5; }
.photo-gallery--landscape .photo-gallery__frame { aspect-ratio: 1586 / 992; background: #1b231f; }
.photo-gallery--landscape .photo-gallery__image { object-fit: contain; }
.photo-gallery__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 550ms ease; }
.photo-gallery__image--contain { object-fit: contain; background: #1b231f; }
.photo-gallery__image.is-current { opacity: 1; }
.photo-gallery__controls { display: flex; align-items: center; justify-content: center; gap: .25rem; padding: .4rem .6rem; min-height: 3.5rem; border-top: 1px solid hsl(var(--border)); }
.photo-gallery__controls[hidden], .photo-gallery__controls [hidden] { display: none; }
.photo-gallery__controls button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 50%; color: hsl(var(--primary)); background: transparent; cursor: pointer; font-size: 1.5rem; }
.photo-gallery__controls button:hover { background: hsl(var(--primary) / .08); }
.photo-gallery__controls button[data-photo-pause] { border-radius: 2rem; font-size: .875rem; min-width: 3.5rem; padding: 0 .6rem; }
.photo-gallery__dots { display: flex; flex-wrap: wrap; min-width: 0; align-items: center; justify-content: center; }
.photo-gallery__dots button { min-width: 36px; }
.photo-gallery__dots span { width: .5rem; height: .5rem; border-radius: 50%; background: hsl(var(--primary) / .28); }
.photo-gallery__dots [aria-pressed="true"] span { background: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / .14); }
@media (max-width: 380px) { .photo-gallery__controls { gap: 0; padding-inline: .2rem; } .photo-gallery__dots button { min-width: 30px; } }
@media (prefers-reduced-motion: reduce) { .photo-gallery__image { transition: none; } }

.media-project__screen { background: #080d10; }
.media-project__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.media-project__body { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 2.5rem; padding: 2rem; }
.media-project__eyebrow { color: hsl(var(--primary)); font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin-bottom: .85rem; }
.media-project h3 { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.25; margin-bottom: 1rem; }
.media-project__description { color: hsl(var(--foreground) / .7); font-size: .95rem; line-height: 1.75; margin-top: .7rem; }
.media-project__tagline { color: hsl(var(--primary)); font-family: var(--font-heading), sans-serif; font-weight: 600; margin-top: 1.25rem; }
.media-project__details { border-left: 1px solid hsl(var(--border)); padding-left: 2rem; }
.media-project__details h4 { font-size: .95rem; }
.media-project__roles { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1rem 0 1.5rem; padding: 0; }
.media-project__roles li { border-radius: 999px; padding: .45rem .75rem; background: hsl(var(--primary) / .08); color: hsl(var(--primary)); font-size: .75rem; line-height: 1.4; }
.media-project__hint { font-size: .8rem; color: hsl(var(--foreground) / .6); margin-bottom: .8rem; }
.media-project__link { display: inline-block; color: hsl(var(--primary)); font-size: .9rem; font-weight: 700; text-decoration: underline; text-underline-offset: .25em; }
.media-project__transcript { border-top: 1px solid hsl(var(--border)); padding: 1rem 2rem; font-size: .8rem; color: hsl(var(--foreground) / .7); }
.media-project__transcript summary { cursor: pointer; color: hsl(var(--primary)); font-weight: 600; }
.media-project__transcript p { margin-top: .75rem; line-height: 1.7; max-width: 55rem; }
@media (max-width: 700px) { .media-project__body { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem; } .media-project__details { border-left: 0; border-top: 1px solid hsl(var(--border)); padding: 1.5rem 0 0; } .media-project__transcript { padding-inline: 1.5rem; } }
