/* Shared reading grid: keep headings and their copy on one axis. */
.detail{
  --closing-gutter:max(6vw,calc((100% - 1480px)/2));
  --reading-width:min(88vw,1480px);
  --reading-rail:clamp(140px,13vw,200px);
  --reading-gap:clamp(28px,3vw,48px);
}

/* Carry the reading grid through the next project and contact sections. */
.detail .next-project,
.detail .site-footer.contact-footer{
  padding-inline:var(--closing-gutter);
}
.detail .next-project{
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:24px;
  min-height:clamp(360px,24vw,420px);
  padding-block:clamp(44px,4vw,64px);
}
.detail .next-project>strong{
  min-width:0;
  font-size:clamp(48px,8vw,150px);
  line-height:1.05;
  overflow-wrap:break-word;
}
.detail .next-project>strong,
.detail .next-project:hover>strong,
.detail .next-project:focus-visible>strong{transform:none;letter-spacing:-.075em}
.detail .contact-footer>div{width:100%}
.detail .detail-opening>.detail-side,
.detail .detail-opening>.detail-film-title{
  width:var(--reading-width);
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  gap:22px;
  margin-inline:auto;
  border:0;
}
.detail .detail-opening>.detail-side{padding:24px 0 0;position:static;top:auto}
.detail .detail-opening>.detail-film-title{padding:0}
.detail .detail-opening .detail-side>*{grid-column:1;grid-row:auto;min-width:0}
.detail .detail-opening .detail-category{
  margin:0;font-size:13px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;
}
.detail .detail-opening .detail-film-title>span{font-size:13px;line-height:1.5}
.detail .detail-opening .detail-side>h1,
.detail .detail-opening .detail-film-title>h1{
  grid-column:1;grid-row:auto;margin:0;padding:0;border:0;
  max-width:100%;font-size:clamp(44px,6.2vw,100px);line-height:1.04;
  font-weight:520;letter-spacing:-.055em;text-align:left;text-wrap:balance;
}
.detail .detail-opening .detail-side>p:not(.detail-category){
  grid-column:1;margin:0;max-width:48ch;font-size:clamp(22px,2vw,30px);
  line-height:1.4;letter-spacing:-.025em;
}
.detail .detail-opening .detail-side>dl{
  grid-column:1;display:grid;grid-template-columns:.8fr .65fr 1.2fr 1.7fr 1.2fr;
  gap:24px;margin:20px 0 0;padding:24px 0 0;
  border-top:1px solid color-mix(in srgb,currentColor 25%,transparent);
}
.detail .detail-opening .detail-side>dl>div{
  display:block;min-width:0;margin:0;padding:0;border:0;font-size:1.125rem;line-height:1.5;
}
.detail .detail-opening .detail-side dt{margin:0 0 8px;font-size:.875rem;opacity:.75}
.detail .detail-opening .detail-side dd{margin:0;font-size:.9rem;line-height:1.5;overflow-wrap:break-word}
.detail .detail-opening>.hero-media-label{
  width:var(--reading-width);position:static;inset:auto;
  margin:14px auto 36px;justify-content:flex-end;gap:12px;
  font-size:12px;font-weight:500;letter-spacing:.08em;
}
.detail .detail-opening>.hero-media-label i{width:30px;height:30px;font-size:18px}
.detail .detail-brief{
  display:grid;grid-template-columns:var(--reading-rail) minmax(0,1fr);
  column-gap:var(--reading-gap);row-gap:36px;
  padding:clamp(64px,6vw,96px) max(6vw,calc((100vw - 1480px)/2));
  align-items:start;
}
.detail .detail-brief>.detail-label,
.detail .detail-blocks .detail-block .block-copy>.detail-label{
  grid-column:1;grid-row:1;align-self:start;margin:6px 0 0;
  font-size:13px;line-height:1.5;font-weight:500;letter-spacing:.06em;
}
.detail .detail-brief>.detail-label:before,
.detail .detail-blocks .detail-block .block-copy>.detail-label:before{display:none}
.detail .detail-brief>h2,
.detail .detail-blocks .detail-block .block-copy>h2{
  grid-column:2;grid-row:1;align-self:start;max-width:24ch;margin:0;
  font-size:clamp(36px,4.4vw,72px);line-height:1.08;letter-spacing:-.045em;
  text-wrap:balance;
}
.detail .detail-brief>div{
  grid-column:2;grid-row:2;width:100%;max-width:100%;margin:0;padding-top:28px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--reading-gap);
  align-items:start;border-color:color-mix(in srgb,currentColor 25%,transparent);
}
.detail .detail-brief>div p{
  margin:0;font-size:clamp(17px,1.3vw,20px);line-height:1.6;max-width:48ch;
}
.detail .detail-brief>div strong{font-size:12px;line-height:1.5;margin:0 0 14px}
.detail .detail-blocks .detail-block{
  display:flex;flex-direction:column;align-items:stretch;
}
/* Artwork should meet the next section without an empty band of section color. */
.detail .detail-blocks>.detail-block:has(>.block-media:last-child){padding-bottom:0}
.detail .detail-blocks>.detail-block>.block-media:last-child{margin-bottom:0}
.detail .detail-blocks .detail-block .block-copy{
  position:static;top:auto;display:grid;
  grid-template-columns:var(--reading-rail) minmax(0,1fr);
  column-gap:var(--reading-gap);row-gap:28px;
  width:min(var(--reading-width),100%);max-width:1480px;
  margin:0 auto clamp(44px,5vw,72px);padding:0;align-items:start;
}
.detail.detail-uber .detail-blocks .detail-block .block-copy{
  margin:clamp(44px,5vw,72px) auto 0;
}
.detail .detail-blocks .detail-block .block-copy>p:last-child{
  grid-column:2;grid-row:2;align-self:start;max-width:58ch;
  margin:0;padding:0;font-size:clamp(17px,1.3vw,20px);line-height:1.6;
}
.detail.detail-miele .detail-blocks .detail-block:is(.stage-1,.stage-2,.stage-3) .block-copy>p:last-child{
  font-size:clamp(20.4px,1.56vw,24px);
  max-width:74ch;
  width:100%;
}
.detail .detail-blocks .detail-block:hover .block-copy h2{
  transform:none;letter-spacing:-.045em;
}
@media(max-width:800px){
  .detail{--reading-width:calc(100% - 40px);--reading-gap:24px;--closing-gutter:20px}
  .detail .detail-opening .detail-side>dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}
  .detail .detail-opening .detail-side>dl>div:last-child{grid-column:1/-1}
  .detail .detail-brief{grid-template-columns:minmax(0,1fr);padding:56px 20px;gap:24px}
  .detail .detail-blocks .detail-block .block-copy{grid-template-columns:minmax(0,1fr);width:100%;gap:24px}
  .detail .detail-brief>.detail-label,
  .detail .detail-brief>h2,
  .detail .detail-brief>div,
  .detail .detail-blocks .detail-block .block-copy>.detail-label,
  .detail .detail-blocks .detail-block .block-copy>h2,
  .detail .detail-blocks .detail-block .block-copy>p:last-child{grid-column:1;grid-row:auto;margin:0}
  .detail .detail-brief>div{grid-template-columns:1fr;gap:28px;padding-top:24px}
}

/* Case-study editorial sections have no divider hairlines. */
.detail .detail-opening .detail-hero-media,
.detail .detail-opening .detail-film-title,
.detail .detail-opening .detail-side,
.detail .detail-opening .detail-side>dl,
.detail .detail-opening .detail-side>dl>div,
.detail .detail-brief,
.detail .detail-brief>div,
.detail .detail-blocks .detail-block,
.detail .detail-blocks .detail-block .block-copy,
.detail .detail-blocks .detail-block .media-caption{
  border:0;
}

@media(max-width:800px){.detail .next-project{min-height:300px;padding-block:40px}}

/* Short dividers between the Uber discipline labels. */
.discipline-items{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0}
.discipline-items>span{display:inline-flex;align-items:center;white-space:nowrap}
.discipline-items>span+span:before{content:"";height:.75em;border-left:1px solid currentColor;opacity:.3;margin-inline:.5em}

/* Fit the Future Kitchen hero to its artwork without a letterbox frame. */
.detail.detail-miele .detail-opening .detail-hero-media{height:auto;min-height:0;aspect-ratio:600/338;padding:0;background:transparent;box-shadow:none}
.detail.detail-miele .detail-opening .detail-hero-media img{display:block;width:100%;height:auto;padding:0;transform:none!important}
.detail.detail-miele .detail-opening .detail-hero-media:before,
.detail.detail-miele .detail-opening .detail-hero-media:after{display:none}

/* Leto customer artwork meets the next section; provider boards are smaller. */
.detail.detail-leto .detail-blocks .detail-block.stage-1{padding-bottom:0}
.detail.detail-leto .stage-1 .block-media{margin-bottom:0}
.detail.detail-leto .detail-block.stage-2 .block-media.gallery>img{width:80%;max-width:80%;height:auto;justify-self:center;margin-inline:auto;transform:none!important}

/* Align the entire project contact footer to the shared content edges. */
.detail .contact-footer>div{max-width:none;margin-inline:0;text-align:left}
.detail .contact-footer>div:first-child{display:flex;flex-direction:column;align-items:stretch}
.detail .contact-footer>div:first-child>a{width:100%;text-align:left}
.detail .contact-footer .footer-email-label{align-items:flex-start;text-align:left}
.detail .contact-footer .footer-email-label strong{display:block;margin-left:-.055em}
.detail .contact-footer .footer-email-action{justify-self:end}
.detail .contact-footer>div:last-child{grid-template-columns:1fr 1fr auto}
.detail .contact-footer .footer-home{justify-self:start;text-align:left}
.detail .contact-footer .footer-work{justify-self:end;text-align:right}
@media(max-width:600px){.detail .contact-footer>div:last-child{grid-template-columns:1fr auto}}

.detail .next-project strong:after{color:var(--next-hover-ink)}
.detail .next-project:focus-visible{outline-color:var(--case-ink)}

/* A left-hand hairline for every project metadata field. */
.detail .detail-opening .detail-side>dl>div{border-left:1px solid color-mix(in srgb,currentColor 25%,transparent);padding-left:16px}

/* Match the visible left edge of the large E to the address and page gutter. */
body .site-footer.contact-footer>div:first-child>a{justify-self:start;text-align:left;margin-inline:0;padding-inline:0}
body .site-footer.contact-footer .footer-email-label strong{display:block;justify-self:start;margin:0 0 0 -.055em;padding:0;text-align:left}
body .site-footer.contact-footer .footer-email-label small{display:block;justify-self:start;margin:0;padding:0;text-align:left}

/* Let Kitchen chapter headings fill the reading column before wrapping. */
.detail.detail-miele .detail-blocks .detail-block .block-copy>h2{
  max-width:none;text-wrap:wrap;
}
/* Bring the first projection image closer to its explanation. */
.detail.detail-miele .detail-blocks .detail-block.stage-1 .block-copy{
  margin-bottom:16px;
}