@import url('24-in-progress.css');

/* Warmer display type against crisp, white supporting copy. */
.hybrid .project-copy h3,
.hybrid .closing-copy .statement{color:#fff6e5}
.hybrid .project-name,
.hybrid .project-body,
.hybrid .project-visit,
.hybrid .project-visit a{color:#fff}

.hybrid .portrait{width:78px;height:auto;aspect-ratio:3/4;cursor:zoom-in}
.hybrid .portrait-face{background:transparent;border-radius:5px}
.portrait-face img{display:block;width:100%;height:100%;object-fit:contain;border-radius:5px}
/* A single short turn reveals both photos, then leaves the footer still. */
.motion-on .portrait-turn{animation:none}
.motion-on .portrait-arrived .portrait-turn{animation:portrait 4s cubic-bezier(.4,0,.2,1) 1 both}
/* Lock the viewport without turning body into a new sticky scroll container. */
.photo-open{overflow:clip!important}
.photo-open .portrait-turn{animation-play-state:paused}
.portrait:focus-visible{outline:2px solid #fff0d3;outline-offset:8px}

.photo-dialog{
 position:fixed;inset:0;margin:auto;padding:0;border:0;
 width:min(360px,calc(100vw - 48px),calc((100svh - 160px) * .75));
 max-width:none;max-height:none;overflow:visible;
 background:transparent;color:white;opacity:0;
 transition:opacity 560ms cubic-bezier(.4,0,.2,1);
}
.photo-dialog::backdrop{
 background:rgba(16,12,21,0);
 -webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);
 transition:background-color 560ms cubic-bezier(.4,0,.2,1),
  -webkit-backdrop-filter 560ms cubic-bezier(.4,0,.2,1),
  backdrop-filter 560ms cubic-bezier(.4,0,.2,1);
}
.photo-dialog.is-visible{opacity:1}
.photo-dialog.is-visible::backdrop{
 background:rgba(16,12,21,.39);
 -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
html:not(.motion-on) .photo-dialog,html:not(.motion-on) .photo-dialog::backdrop{transition:none}
@media(prefers-reduced-motion:reduce){
 .photo-dialog,.photo-dialog::backdrop{transition:none}
}
.photo-flipper{
 display:block;width:100%;aspect-ratio:3/4;padding:0;border:0;
 background:transparent;perspective:1200px;cursor:pointer;border-radius:12px;
}
.photo-turn{
 display:block;position:relative;width:100%;height:100%;
 transform-style:preserve-3d;transition:transform 850ms cubic-bezier(.4,0,.2,1);
}
.photo-face{
 position:absolute;inset:0;display:block;backface-visibility:hidden;
 -webkit-backface-visibility:hidden;transform:translateZ(.5px);border-radius:12px;
 box-shadow:0 20px 64px #0006;
}
.photo-face.back{transform:rotateY(180deg) translateZ(.5px)}
.photo-expanded{display:block;width:100%;height:100%;object-fit:contain;border-radius:12px}
.photo-turn.no-flip,html:not(.motion-on) .photo-turn{transition:none}
@media(prefers-reduced-motion:reduce){.photo-turn{transition:none}}
.visually-hidden{
 position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
 clip-path:inset(50%);white-space:nowrap;border:0;
}
.photo-other{
 position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);
 white-space:nowrap;min-height:44px;padding:8px 16px;border:0;background:none;
 color:white;font:16px/1.4 Barlow,sans-serif;text-decoration:underline;cursor:pointer;
}
.photo-dialog button:focus-visible{outline:2px solid #fff0d3;outline-offset:3px}
@media(max-width:700px){
 /* A quieter reading scale, with the section and project eyebrows unchanged. */
 .hybrid .hero-title{width:90%}
 .hybrid .lead{font-size:26px}
 .hybrid .hero-intro .statement,
 .hybrid .closing-copy .statement{font-size:18px;line-height:1.4}
 .hybrid .project-copy h3{font-size:40px;line-height:1.06}
 .hybrid .project-body,
 .hybrid .closing-copy .body-copy{font-size:16px;line-height:1.6}
 .hybrid .project-visit a,
 .hybrid .project-visit .case-study-note{font-size:16px}
 .hybrid .contact-links a,
 .hybrid .contact-links .email{font:18px/1.4 Barlow,sans-serif;letter-spacing:normal}
 .hybrid .colophon{font-size:12px}
 .hybrid .project:not(:last-child){padding-bottom:68px}
 .photo-other{font-size:14px}
 /* Let the final link finish before the footer color and opening copy arrive. */
 .hybrid #recoup{padding-bottom:64px}
 .hybrid .closing{padding-top:52px}
 .hybrid .portrait{width:66px}
 .photo-dialog{width:min(320px,calc(100vw - 48px),calc((100svh - 160px) * .75))}
}
@media print{.photo-dialog{display:none!important}}
/* Short landscape viewports need phone-scale type, not the tablet/desktop scale.
   Keep zoom available; only suppress Safari's automatic text inflation. */
@media (orientation:landscape) and (max-width:999px) and (max-height:500px){
 html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
 .hybrid .hero{min-height:0;align-items:start;align-content:start;padding-top:14px;padding-bottom:36px}
 .hybrid .hero-title{width:min(100%,78svh,320px)}
 .hybrid .lead{font-size:26px;margin-bottom:12px}
 .hybrid .hero-intro{margin-top:0}
 .hybrid .intro-photo{width:56px;height:56px;margin-bottom:12px}
 .hybrid .hero-intro .statement,
 .hybrid .closing-copy .statement{font-size:18px;line-height:1.4}
 .hybrid .project-copy h3{font-size:40px;line-height:1.06}
 .hybrid .project-body,
 .hybrid .closing-copy .body-copy{font-size:16px;line-height:1.6}
 .hybrid .project-visit a,
 .hybrid .project-visit .case-study-note{font-size:16px}
 .hybrid .project-layout{grid-template-columns:minmax(0,1fr)}
 .hybrid .project-copy{max-width:680px}
 .hybrid .project:not(:last-child){padding-bottom:72px}
 .hybrid .project-media.origins-collage,
 .hybrid .project-media.toolkit-collage,
 .hybrid .project-media.pillot-collage,
 .hybrid .project-media.recoup-collage{
  width:min(100%,90svh,400px);max-width:none;justify-self:center;margin-left:0;
 }
 .hybrid #recoup{padding-bottom:64px}
 .hybrid .closing{padding-top:52px}
 .hybrid .portrait{width:66px}
}
@media (orientation:landscape) and (min-width:701px) and (max-width:999px) and (max-height:500px){
 .hybrid .hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
}
@media (orientation:landscape) and (max-width:700px) and (max-height:500px){
 .hybrid .hero-intro{margin-top:26px}
}
/* Tablet vertical layout: let the artwork use the available canvas, while
   keeping paragraphs readable. Do not affect the short phone landscape view. */
@media (min-width:701px) and (max-width:1180px) and (min-height:501px){
 html:not(.horizontal) .hybrid .work{overflow-x:clip}
 html:not(.horizontal) .hybrid .project-layout{grid-template-columns:minmax(0,1fr);row-gap:32px}
 html:not(.horizontal) .hybrid .project-media.origins-collage,
 html:not(.horizontal) .hybrid .project-media.toolkit-collage,
 html:not(.horizontal) .hybrid .project-media.pillot-collage,
 html:not(.horizontal) .hybrid .project-media.recoup-collage{
  width:100%;max-width:960px;justify-self:start;margin-left:0;
 }
 html:not(.horizontal) .hybrid .project-copy,
 html:not(.horizontal) .hybrid .closing-copy{width:100%;max-width:680px}
 html:not(.horizontal) .hybrid .closing-grid{display:block}
 html:not(.horizontal) .hybrid .closing-grid>.small{margin-bottom:24px}
 html:not(.horizontal) .hybrid .project:not(:last-child){padding-bottom:64px}
 html:not(.horizontal) .hybrid #recoup{padding-bottom:64px}
}
/* Keep a landscape tablet spread readable and short enough for the rail.
   JavaScript still measures the complete content and falls back when needed. */
@media (orientation:landscape) and (min-width:1000px) and (max-width:1180px){
 .horizontal .hybrid .project-copy h3{font-size:40px;line-height:1.06;margin-bottom:22px}
 .horizontal .hybrid .project-body{font-size:16px;line-height:1.6}
 .horizontal .hybrid .project-visit a,
 .horizontal .hybrid .case-study-note{font-size:16px}
}

/* Preserve toolkit collage containment under its descriptive anchor. */
@media(max-width:959px){.hybrid #ai-toolkit{overflow-x:clip}}