/* Small layout additions to the original Spectral theme.
   The opening animation, navigation, colors, and typography live in main.css. */
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 10003; background: #fff; color: #121212; padding: 10px 18px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid #007bff; outline-offset: 5px; }
#selected-work, #one { scroll-margin-top: 4em; }

/* Retain the original animated name and rules, with a little more context. */
#banner .original-tagline { margin-bottom: 0; }
#banner .banner-description { max-width: 44em; margin: 1.8em auto 0; padding-inline: 1.5em; font-size: .95em; line-height: 1.8; letter-spacing: .025em; text-transform: none; color: #ccc; }
#banner .banner-actions { margin-top: 1.9em; margin-bottom: 0; }
#banner .banner-actions .button { font-size: .7em; }

/* Photo cards use the same white reading surface as the original project pages. */
.portfolio-work .inner, .archive .inner { max-width: 1200px; }
.portfolio-work header.major, .archive header.major { margin-bottom: 3em; }
.portfolio-work header.major p, .archive header.major p { letter-spacing: .025em; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2em; }
.project { min-width: 0; }
.project-link { display: flex; flex-direction: column; height: 100%; border: 0; }
.project-image { overflow: hidden; background: #efefef; }
.project-image img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .25s ease; }
.project-image .contain { object-fit: contain; padding: 12px; }
.project-link:hover .project-image img { transform: scale(1.025); }
.project-body { display: flex; flex-direction: column; flex: 1; padding-top: 1.5em; }
.project-body .eyebrow { display: block; color: #62626a; font-size: .65em; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .7em; }
.project-title h3 { font-size: 1.15em; line-height: 1.45; letter-spacing: .12em; margin-bottom: .8em; }
.project-link:hover h3 { color: #007bff; }
.project-description { font-size: .9em; line-height: 1.75; letter-spacing: .02em; margin: 0; }
.project-role { font-size: .75em; letter-spacing: .015em; margin: 1.25em 0 0; }
.project-result { margin: auto 0 0; padding-top: 1.35em; font-size: .75em; letter-spacing: .015em; }
.project-result span { display: block; border-top: 1px solid #ddd; padding-top: 1em; }
.all-projects { text-align: center; margin: 3em 0 0; }
.archive { border-top: 1px solid #ddd; }
.archive .project-grid { row-gap: 3em; }
.archive .project-image img { aspect-ratio: 3 / 2; }
.archive .project-title h3 { font-size: 1em; letter-spacing: .08em; }

/* Keep the field photography and biography together, below the selected work. */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4em; align-items: start; }
.about-photo { margin: 0; }
.about-photo img { display: block; width: 100%; height: auto; }
.about-photo figcaption, .field-intro figcaption { margin-top: .8em; color: #bbb; font-size: .7em; letter-spacing: .025em; }
.about-copy p { font-size: .9em; letter-spacing: .02em; line-height: 1.8; margin-bottom: 1.5em; }
.capabilities { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em 2em; border-top: 1px solid #ffffff26; padding-top: 1.8em; margin-top: 2em; }
.capabilities h3 { font-size: .8em; letter-spacing: .1em; margin-bottom: .75em; }
.capabilities p { font-size: .8em; margin: 0; }

.portfolio-recordings { background: #121212; }
.field-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 4em; align-items: center; margin-bottom: 3em; }
.field-intro figure { margin: 0; }
.field-intro img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.field-intro p { font-size: .95em; letter-spacing: .025em; }
.audio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2em; }
.audio-group { min-width: 0; border-top: 1px solid #ffffff26; padding-top: 1.5em; }
.audio-group h3 { font-size: .9em; line-height: 1.7; letter-spacing: .1em; margin-bottom: .4em; }
.audio-location { color: #bbb; font-size: .75em; letter-spacing: .025em; margin-bottom: 1.5em; }
.audio-group .audio-label { font-size: .75em; letter-spacing: .015em; margin: 1.3em 0 .6em; }
.audio-group audio { display: block; width: 100%; height: 38px; }
.audio-group .text-link { display: inline-block; font-size: .75em; margin-top: 1.7em; }
.portfolio-footer { background: #121212; border-top: 1px solid #ffffff20; padding: 2em; text-align: center; font-size: .7em; letter-spacing: .08em; color: #aaa; }
.portfolio-footer p { margin: 0 0 .7em; }
.portfolio-footer p:last-child { margin: 0; }

@media screen and (max-width: 980px) {
	.about-grid, .field-intro { grid-template-columns: 1fr; gap: 2.5em; }
	.project-grid { gap: 1.5em; }
	.project-title h3 { font-size: 1em; }
	.project-role, .project-result { font-size: .8em; }
}
@media screen and (max-width: 736px) {
	#banner { padding: 7em 1.5em 4em; }
	#banner .inner { width: 100%; }
	#banner h2 { max-width: 100%; font-size: 1.15em; padding-inline: .6em; }
	#banner .original-tagline { font-size: .8em; }
	#banner .banner-description { padding-inline: 0; font-size: .95em; }
	#banner .banner-actions { gap: 1em; padding-left: 0; }
	#banner .banner-actions li { padding-left: 0; }
	#banner .banner-actions .button { padding-inline: 1.25em; }
	.project-grid { grid-template-columns: 1fr; gap: 2.75em; }
	.project-image img { aspect-ratio: 3 / 2; }
	.project-title h3 { font-size: 1.2em; }
	.project-description { font-size: 1em; }
	.project-role, .project-result { font-size: .85em; }
	.about-grid, .field-intro { grid-template-columns: 1fr; gap: 2em; }
	.about-copy p { font-size: 1em; }
	.capabilities { gap: 1.5em; }
	.capabilities h3 { font-size: .85em; }
	.audio-grid { grid-template-columns: 1fr; gap: 2.5em; }
	.audio-group h3 { font-size: 1em; }
	.audio-group .audio-label, .audio-location, .audio-group .text-link { font-size: .85em; }
	.archive .project-title h3 { font-size: 1.1em; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .001ms !important; transition-delay: 0s !important; }
}