/* Universal dialog utility typography: captions and Close controls are identical. */
dialog .dialog-bar :is(#lightbox-caption,h2,.micro,.eyebrow),
dialog .dialog-bar > span,
dialog .dialog-bar :is([data-close],#close-image){
 font-family:'Courier New',monospace;
 font-size:11px;
 font-weight:400;
 line-height:1.6;
 letter-spacing:.04em;
 text-transform:uppercase;
}

/* Global copy treatment: no shadows; photograph overlays at 75%. */
*,*::before,*::after{text-shadow:none!important}
.overlay-quote,.hero-note,.hero-overlay,.tile-information,
.image-page .image-tile .gallery-overlay,#index-grid .collection-caption,
.hero-top,.hero-bottom,.comparison-label{opacity:.75!important}
/* Use a solid source color so gallery text is not faded twice. */
.image-page .image-tile .gallery-overlay{color:#fff}

/* Aligned stock/redesign comparisons, shared by every vehicle page. */
.design-comparison .photo{position:relative}.design-comparison .crossfade-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}.comparison-label{position:absolute;top:5%;left:5%;font:11px/1.5 'Courier New',monospace;letter-spacing:.04em;pointer-events:none}.design-comparison .hero-play{z-index:3}

/* Photos stay borderless after pointer clicks; keyboard focus stays visible. */
:is(.photo,.image-tile,.tile,.collection-project,button:has(img),a:has(img)):focus:not(:focus-visible){outline:none!important;box-shadow:none!important}
:is(.photo,.image-tile,.tile,.collection-project,button:has(img),a:has(img)):focus-visible{outline:1px solid #777!important;outline-offset:3px!important}

/* One wordmark scale and alignment for Work and every project hero. */
.cover h1,.hero h1{
 font-family:Helvetica,Arial,sans-serif!important;
 font-size:min(10.1vw,202px)!important;
 color:#eb4935!important;
 white-space:normal!important;
 font-weight:400!important;
 letter-spacing:-.035em!important;
 line-height:1!important;
 left:50%!important;right:auto!important;
 width:100%!important;margin:0!important;
 text-align:center!important;transform:translateX(-50%)!important;
}


/* Editorial body copy matches the gallery sidebar at every breakpoint. */
:root{--editorial-text-size:10px}
.copy p,.gallery-rail{font-size:var(--editorial-text-size)}
.copy p{line-height:1.35}
@media(max-width:650px){:root{--editorial-text-size:8px}}

/* Project introductions follow the Work hero's centered type hierarchy. */
.hero .project-heading{left:50%;top:clamp(30px,4vw,70px);transform:translateX(-50%);width:42%;text-align:center;font-family:Helvetica,Arial,sans-serif;line-height:1.05;text-transform:uppercase;display:flex;flex-direction:column;gap:5px}
.hero .project-heading .project-kicker{font:8px/1.4 'Courier New',monospace;letter-spacing:.04em}
.hero .project-heading strong{font-size:clamp(17px,2vw,36px);font-weight:700}
.hero .project-heading .project-discipline,.hero .project-heading p{font-size:clamp(9px,1vw,18px);font-weight:700;margin:0}
.hero .project-heading .project-focus{font-size:clamp(8px,.6vw,11px);font-weight:700;letter-spacing:.12em}
@media(max-width:650px){.hero .project-heading{top:18px;width:66%;gap:3px}.hero .project-heading strong{font-size:14px}.hero .project-heading .project-discipline,.hero .project-heading p{font-size:7px}.hero .project-heading .project-kicker,.hero .project-heading .project-focus{font-size:5px}}
@media(max-width:650px){
 .hero:has(.project-heading) h1{top:45%!important}
 .hero:has(.project-heading) .slide{aspect-ratio:4/3!important}
}

/* Both comparison layers must share the same image geometry during a fade. */
.carousel.design-comparison .slide{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden}
.carousel.design-comparison .photo{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.carousel.design-comparison .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain!important;object-position:50% 50%!important;transform:none}

/* Global interaction rule: neutral focus indicators, never brand red. */
:focus{outline-color:#777!important}
:focus-visible{outline:1px solid #777!important;outline-offset:3px!important}

/* Contact sheets: consistent photographic cells and equal paper gutters. */
.image-page.contact-sheet #image-grid{gap:5px;grid-auto-rows:auto}
.image-page.contact-sheet #image-grid .image-tile{grid-column:auto;grid-row:auto;aspect-ratio:3/2;height:auto;margin:0;align-self:start}
.image-page.contact-sheet #image-grid .image-tile img{width:100%;height:100%;object-fit:cover}

/* Project-specific source credits stay readable and separate from studio contact. */
.contact .project-credits{width:min(680px,86vw);margin:0 auto 45px;font:10px/1.5 'Courier New',monospace;text-transform:uppercase}
.project-credits h2{font:700 14px Helvetica,Arial,sans-serif;margin:0 0 28px}
.project-credits dl{margin:0;display:grid;gap:12px}
.project-credits dl>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;align-items:baseline}
.project-credits dt{color:#77756e;text-align:left}
.project-credits dd{margin:0;text-align:right;overflow-wrap:anywhere}

/* Editorial slides fill their established window, including portrait sources. */
.carousel:not(.design-comparison) .slide{position:relative;overflow:hidden}
.carousel:not(.design-comparison) .photo{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.carousel:not(.design-comparison) .photo img{width:100%;height:100%;object-fit:cover!important;object-position:center}