/* Studio: architecture, people and the scale of the detail. */
.studio-page--editorial {
  --atelier-paper: #e9e7df;
  --atelier-gutter: clamp(1.25rem,3.2vw,4rem);
  background: var(--atelier-paper);
}
.atelier-hero {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  column-gap: 2rem;
  row-gap: 3.5rem;
  padding: clamp(9rem,12vw,13rem) var(--atelier-gutter) 0;
}
.atelier-heading { grid-column: 1 / 7; grid-row: 1; position: relative; z-index: 1; }
.atelier-heading > p { margin: 0 0 3rem; font-size: .85rem; }
.atelier-heading h1 {
  margin: 0 0 0 -.04em;
  font-size: clamp(6rem,15.5vw,19rem);
  font-weight: 400;
  line-height: .78;
  letter-spacing: -.09em;
}
.atelier-cover { grid-column: 7 / -1; grid-row: 1 / 3; margin: 4rem 0 0; align-self: start; }
.atelier-cover img { height: clamp(34rem,62vw,57rem); object-fit: cover; object-position: 52% center; }
.atelier-cover figcaption { padding: .8rem 0; font-size: .75rem; color: #5e5b55; }
.atelier-hero-copy { grid-column: 1 / 6; grid-row: 2; align-self: end; padding-bottom: 4rem; }
.atelier-hero-copy p { margin: 0; font-size: clamp(1.4rem,2.4vw,2.7rem); line-height: 1.12; letter-spacing: -.04em; }
.atelier-hero-copy a { display: inline-flex; align-items: center; gap: 3rem; padding-bottom: .5rem; border-bottom: 1px solid; margin-top: 2rem; font-size: .8rem; }
.atelier-about {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: 2rem;
  padding: clamp(7rem,13vw,13rem) var(--atelier-gutter);
}
.atelier-label { margin: .5rem 0 0; font-size: .8rem; line-height: 1.4; }
.atelier-about > .atelier-label { grid-column: 1 / 4; }
.atelier-about-copy { grid-column: 5 / -1; }
.atelier-about h2,
.atelier-method h2,
.atelier-practice h2 { margin: 0; font-weight: 400; font-size: clamp(2.5rem,5.2vw,6rem); line-height: .97; letter-spacing: -.065em; }
.atelier-about-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 3rem; }
.atelier-about-columns p { margin: 0; font-size: 1rem; line-height: 1.55; max-width: 31rem; }
.atelier-method {
  scroll-margin-top: 7rem;
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: 2rem;
  padding: 0 var(--atelier-gutter) clamp(7rem,12vw,12rem);
}
.atelier-method-photo { grid-column: 1 / 6; margin: 0; align-self: start; }
.atelier-method-photo img { aspect-ratio: 3 / 4; object-fit: cover; }
.atelier-method-photo figcaption { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; background: var(--ink); color: var(--paper); font-size: .7rem; line-height: 1.4; }
.atelier-method-photo figcaption a { white-space: nowrap; text-decoration: underline; text-underline-offset: .25em; }
.atelier-method-copy { grid-column: 7 / -1; padding-top: 2rem; }
.atelier-method h2 { margin: 2rem 0 3rem; font-size: clamp(3.5rem,6vw,7rem); }
.atelier-steps details { border-top: 1px solid rgba(17,17,16,.3); }
.atelier-steps details:last-child { border-bottom: 1px solid rgba(17,17,16,.3); }
.atelier-steps summary { display: grid; grid-template-columns: 1.7rem 1fr 1rem; align-items: center; gap: .75rem; cursor: pointer; padding: 1.5rem 0; list-style: none; }
.atelier-steps summary::-webkit-details-marker { display: none; }
.atelier-step-number { font-size: .65rem; opacity: .6; }
.atelier-steps h3 { margin: 0; font-size: clamp(1.2rem,1.9vw,2rem); font-weight: 400; letter-spacing: -.04em; }
.atelier-step-icon { position: relative; width: .9rem; height: .9rem; }
.atelier-step-icon::before, .atelier-step-icon::after { content: ""; position: absolute; background: currentColor; }
.atelier-step-icon::before { width: 100%; height: 1px; top: 50%; left: 0; }
.atelier-step-icon::after { height: 100%; width: 1px; left: 50%; top: 0; transition: transform .2s; }
.atelier-steps details[open] .atelier-step-icon::after { transform: rotate(90deg); }
.atelier-steps details > p { max-width: 29rem; margin: 0 1.7rem 1.75rem 2.45rem; font-size: .95rem; line-height: 1.55; color: #57544e; }
.atelier-practice {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: 2rem;
  padding: clamp(4rem,7vw,8rem) var(--atelier-gutter);
  background: #d5d1c6;
}
.atelier-practice-heading { grid-column: 1 / 6; }
.atelier-practice h2 { margin: 3rem 0; }
.atelier-practice-heading > a { display: inline-flex; align-items: center; gap: 2rem; padding-bottom: .6rem; border-bottom: 1px solid; font-size: .85rem; }
.atelier-services { grid-column: 7 / -1; }
.atelier-services article { padding: 2rem 0; border-top: 1px solid rgba(17,17,16,.3); }
.atelier-services article:first-child { padding-top: 0; border: 0; }
.atelier-services article:last-child { padding-bottom: 0; }
.atelier-services h3 { margin: 0 0 1rem; font-size: clamp(1.5rem,2.8vw,3rem); font-weight: 400; letter-spacing: -.05em; }
.atelier-services p { max-width: 29rem; margin: 0; font-size: 1rem; line-height: 1.5; color: #494740; }
.atelier-invitation { display: flex; justify-content: space-between; align-items: end; gap: 3rem; padding: clamp(6rem,11vw,12rem) var(--atelier-gutter); }
.atelier-invitation p { margin: 0; font-size: clamp(3rem,7vw,8rem); letter-spacing: -.07em; line-height: .98; }
.atelier-invitation a { display: flex; justify-content: space-between; gap: 3rem; font-size: 1rem; padding-bottom: .75rem; border-bottom: 1px solid; }
.studio-page--editorial .site-footer { margin-top: 0; padding-top: 4rem; background: var(--atelier-paper); border-top: 1px solid rgba(17,17,16,.3); }
@media (max-width: 1000px) and (min-width: 721px) {
  .atelier-hero { column-gap: 1.25rem; }
  .atelier-about-copy { grid-column: 4 / -1; }
  .atelier-about-columns { gap: 1.5rem; }
  .atelier-cover img { height: 40rem; }
  .atelier-hero-copy { grid-column: 1 / 7; }
}
@media (max-width: 720px) {
  .atelier-hero { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 8.5rem; }
  .atelier-heading { grid-column: 1; grid-row: 1; }
  .atelier-heading > p { font-size: .75rem; margin-bottom: 2.5rem; }
  .atelier-heading h1 { font-size: 28vw; }
  .atelier-hero-copy { grid-column: 1; grid-row: 2; padding: 0; }
  .atelier-hero-copy p { font-size: 1.5rem; }
  .atelier-hero-copy a { margin-top: 1.5rem; }
  .atelier-cover { grid-column: 1; grid-row: 3; width: 86%; justify-self: end; margin: .5rem 0 0; }
  .atelier-cover img { height: auto; aspect-ratio: 3 / 4; }
  .atelier-about { display: block; padding-block: 5rem; }
  .atelier-about-copy { margin-top: 2rem; }
  .atelier-about h2 { font-size: 9vw; }
  .atelier-about-columns { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2rem; }
  .atelier-method { display: flex; flex-direction: column-reverse; gap: 3rem; padding-bottom: 5rem; }
  .atelier-method-copy { padding-top: 0; }
  .atelier-method h2 { font-size: 14vw; margin: 1.5rem 0 2rem; }
  .atelier-method-photo { width: 88%; }
  .atelier-steps h3 { font-size: 1.35rem; }
  .atelier-practice { display: block; padding-block: 4rem; }
  .atelier-practice h2 { font-size: 12vw; margin: 2rem 0; }
  .atelier-services { margin-top: 3.5rem; }
  .atelier-services h3 { font-size: 1.85rem; }
  .atelier-invitation { align-items: start; flex-direction: column; padding-block: 5rem; gap: 2rem; }
  .atelier-invitation p { font-size: 13vw; }
}
@media (prefers-reduced-motion: reduce) {
  .atelier-step-icon::after { transition: none; }
}