@import './project-results.css?v=results-1';
/* Atlas: Figma desktop frame 1440px; content remains readable on smaller screens. */
.atlas-page { --atlas-purple: #7a2bde; --results-accent: #7a2bde; --results-icon-background: #eee1ff; --results-inline: var(--atlas-inline); --results-radius: var(--atlas-radius); --atlas-inline: 150px; --atlas-radius: 150px; }
.atlas-project { width: 100%; background: white; color: var(--system-text-black); }
.atlas-project p, .atlas-project dd { margin: 0; font: 400 20px/1.4 var(--font-family-body); letter-spacing: .01em; }
.atlas-project strong { font-weight: 700; }
.atlas-hero { background: var(--atlas-purple); border-radius: 0 0 0 var(--atlas-radius); color: white; }
.atlas-hero-inner { width: 100%; min-height: 600px; margin-inline: auto; padding: 100px 0 0 max(var(--atlas-inline), calc((100% - 1140px) / 2)); display: flex; align-items: flex-start; gap: 16px; }
.atlas-hero-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: 16px; }
.atlas-brand { width: auto; height: 48px; object-fit: contain; }
.atlas-hero h1 { display: flex; flex-direction: column; gap: 8px; margin: 0; font: 400 56px/1.2 var(--font-family-headings); letter-spacing: -.04em; }
.atlas-hero h1 span { display: block; }
.atlas-project .atlas-hero-tag { background: #e25352; color: white; padding: 0 8px; font-size: 24px; }
.atlas-hero-art { width: 575px; height: 500px; object-fit: contain; flex-shrink: 0; }
.atlas-context { width: 100%; }
.atlas-context-inner { display: flex; align-items: flex-start; padding-left: max(var(--atlas-inline), calc((100% - 1140px) / 2)); }
.atlas-context-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 48px; padding-top: 150px; }
.atlas-copy-group { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.atlas-label { display: inline-flex; margin: 0; padding: 2px 6px; background: var(--atlas-purple); color: white; font: 700 16px/1.2 var(--font-family-body); letter-spacing: .01em; }
.atlas-metadata { display: grid; gap: 88px; margin: 0; }
.atlas-metadata > div { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.atlas-metadata--intro { grid-template-columns: max-content minmax(0, 1fr); }
.atlas-context-art { width: 575px; height: 373px; object-fit: contain; flex-shrink: 0; }
.atlas-metadata--scope { width: 100%; max-width: 1440px; margin-inline: auto; grid-template-columns: minmax(0, 1fr) 226px; padding: 48px var(--atlas-inline) 150px; }
.atlas-gallery { display: flex; flex-direction: column; gap: 48px; max-width: 1440px; padding: 100px var(--atlas-inline); margin-inline: auto; }
.atlas-gallery figure { max-width: 1140px; margin: 0 auto; }
.atlas-gallery img { width: 100%; height: auto; object-fit: contain; }
@media (max-width: 1250px) {
 .atlas-page { --atlas-inline: 64px; }
 .atlas-hero-art, .atlas-context-art { width: 45%; height: auto; }
 .atlas-hero h1 { font-size: clamp(32px, 4vw, 56px); }
 .atlas-metadata { gap: 40px; }
}
@media (max-width: 900px) {
 .atlas-page { --atlas-inline: 24px; --atlas-radius: 64px; }
 .atlas-hero-inner { min-height: 0; padding: 64px 0 0 var(--atlas-inline); flex-direction: column; gap: 40px; }
 .atlas-hero-art { width: min(575px, 100%); align-self: flex-end; }
 .atlas-context-inner { padding: 0 0 0 var(--atlas-inline); flex-direction: column-reverse; }
 .atlas-context-art { width: min(575px, 100%); align-self: flex-end; }
 .atlas-context-copy { padding-top: 48px; padding-right: var(--atlas-inline); }
 .atlas-metadata--scope { padding-bottom: 64px; }
 .atlas-gallery { padding-block: 64px; }
}
@media (max-width: 600px) {
 .atlas-page { --atlas-inline: 20px; --atlas-radius: 48px; }
 .atlas-hero-inner { padding-top: 48px; }
 .atlas-hero h1 { font-size: clamp(26px, 7.5vw, 40px); }
 .atlas-project .atlas-hero-tag { font-size: 20px; }
 .atlas-metadata { grid-template-columns: minmax(0, 1fr); gap: 32px; }
 .atlas-gallery { padding-block: 48px; }
}

/* One owner for the desktop transition from gallery to related projects. */
@media (min-width: 1251px) {
 .atlas-gallery { padding-bottom: 0; }
 .atlas-page .related-cases { padding-top: 150px; }
}