/* Editorial photography sits behind studio content, outside the project previews. */
.editorial-intro {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, .66fr) minmax(0, .34fr);
  align-items: center;
  padding-block: clamp(1.7rem, 4.2vw, 4rem);
  min-height: clamp(16rem, 29vw, 23.5rem);
}
.editorial-intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: .8rem 0 .8rem 37%;
  background: linear-gradient(90deg, var(--paper), transparent 60%),
    linear-gradient(color-mix(in srgb, var(--paper) 16%, transparent), color-mix(in srgb, var(--paper) 16%, transparent)),
    var(--intro-art) right 54% / cover no-repeat;
  pointer-events: none;
}
.editorial-intro > .intro-copy { grid-column: 1; max-width: 100%; }
.editorial-intro h1 { font-size: clamp(3.6rem, 6.9vw, 7.35rem); line-height: .93; max-width: 15ch; }
.editorial-intro .intro-aside { margin-top: .85rem; max-width: 37rem; }
.editorial-intro .intro-aside p { max-inline-size: 51ch; }
.portfolio-intro.editorial-intro { --intro-art: var(--folio-photo, url('/assets/editorial/folio-atelier.webp')); }
.intro-actions { display: flex; flex-wrap: wrap; gap: .35rem 1.2rem; margin-top: .65rem; }
.intro-actions .text-link { min-height: 33px; align-items: center; }
.studio-shell .home-services { padding-block: clamp(1.5rem, 3vw, 2.75rem); }
.studio-shell .service-card { padding-block: clamp(.85rem, 1.75vw, 1.25rem); }
.studio-shell .service-card h3 { font: 400 clamp(1.6rem, 2.4vw, 2.25rem)/1 var(--display); }
.studio-shell .service-card p { margin-block: .36rem .7rem; }
.studio-shell .service-card .tile-meta { align-self: stretch; margin-top: auto; }
.studio-shell .service-card .tile-meta .text-link { margin: 0; }
.studio-shell .portfolio-forward { margin-block-end: clamp(1.2rem, 2.6vw, 2rem); }

.studio-shell .project-stage .device-composition {
  background: linear-gradient(120deg, color-mix(in srgb, var(--stage-dark) 36%, transparent), color-mix(in srgb, var(--stage-dark) 18%, transparent)), var(--project-art) center / cover, var(--stage-dark);
}
.project-stage .device-composition::before { background: none; border: 1px solid #fff4df45; inset: 5%; mask-image: none; }
.project-stage .device-composition::after { display: none; }
.project-stage .art-batch-and-table { --project-art: url('/assets/editorial/batch.jpg'); --stage-dark: #432f22; }
.project-stage .art-cedar-and-stripe { --project-art: url('/assets/editorial/cedar.jpg'); }
.project-stage .art-merit-and-maple { --project-art: url('/assets/editorial/merit.jpg'); }
.project-stage .art-second-story-vintage { --project-art: url('/assets/editorial/vintage.jpg'); }
.studio-shell .project-stage .desktop-shot { left: 7%; top: 9%; width: 79%; max-height: 84%; }
.studio-shell .project-stage .phone-shot { right: 7%; bottom: 10%; width: 20%; }
.project-stage .feature-copy { position: relative; justify-content: center; }
.project-stage .feature-copy .feature-price { margin-top: .35rem; }
.project-stage .feature-copy > .format-label { align-self: end; }
.project-stage .feature-copy h2 { font-size: clamp(2rem, 3.6vw, 3.7rem); }
.project-stage .feature-copy > p:not(.kicker) { max-width: 45ch; }
.feature-visual { align-self: stretch; display: flex; flex-direction: column; }
.feature-visual .device-composition { flex: 1; }
.feature-visual figcaption { margin-top: auto; }
.format-label {
  display: inline-block;
  color: var(--accent);
  font-size: .66rem;
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: .055em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--detail-rule);
  padding-block-end: .13rem;
}
.tile-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .3rem .65rem;
}
.tile-meta .format-label { margin-inline-start: auto; text-align: end; }
.portfolio-copy .tile-meta { margin-top: auto; width: 100%; }
.concept-card-copy .tile-meta { margin-block-start: auto; padding-block-start: .3rem; }
.concept-card-copy .tile-meta .concept-card-price { margin: 0; padding: 0; }
.tier-entry .tile-meta { width: 100%; }
.concept-collection-header h3 { display: flex; gap: .6rem; align-items: center; }
.concept-collection-header h3::after {
  content: "";
  width: clamp(.8rem, 4vw, 2.8rem);
  height: 1px;
  background: linear-gradient(90deg, var(--detail-metal), transparent);
}
.studio-shell .portfolio-section { padding-bottom: clamp(1.5rem, 3vw, 2.8rem); }
.concepts-section { padding-block: clamp(1.7rem, 3.8vw, 3.5rem); }
.concept-card .concept-card-art { aspect-ratio: 1.95; }

.studio-shell .editorial-callout::before {
  content: "";
  position: absolute;
  inset: 0 0 0 26%;
  z-index: -1;
  background: linear-gradient(90deg, var(--callout), color-mix(in srgb, var(--callout) 52%, transparent) 56%, color-mix(in srgb, var(--callout) 32%, transparent)),
    var(--callout-art) right 52% / cover no-repeat;
  opacity: 1;
  pointer-events: none;
}
.home-note { --callout-art: url('/assets/editorial/home-note.jpg'); }
.services-note { --callout-art: url('/assets/editorial/services-note.jpg'); }
.studio-shell .inquiry-aside-art {
  background: linear-gradient(125deg, var(--callout), transparent 85%), var(--stationery-photo, url('/assets/editorial/contact-atelier.webp')) right center / cover;
}
.studio-shell .inquiry-aside { align-self: stretch; display: flex; flex-direction: column; }
.studio-shell .inquiry-aside-art { flex: 1; min-height: 9rem; aspect-ratio: auto; }
.studio-shell .contact-intro { padding-block: clamp(1.5rem, 3vw, 2.6rem) clamp(1rem, 2.3vw, 1.85rem); }
.studio-shell .inquiry-form .form-note { margin-block: .4rem .8rem; }
.studio-shell .form-fields { gap: .7rem .9rem; }
.studio-shell .form-fields textarea { min-height: 6rem; }
.about-profile { gap: clamp(1.1rem, 4vw, 3.7rem); padding-block: clamp(1.45rem, 4vw, 3.8rem); }
.about-profile .studio-profile-copy p:not(.kicker) { color: var(--muted); max-width: 42ch; font-size: clamp(.98rem, 1.4vw, 1.18rem); }
.about-profile .studio-profile-copy .text-link { margin-top: .85rem; }
.about-photo { position: relative; border: 1px solid var(--rule); }
.about-photo::after { content: ""; position: absolute; inset: .65rem; border: 1px solid #fff4df90; pointer-events: none; }
.about-photo img { aspect-ratio: 1.62; object-fit: cover; }
.about-background { padding-block: 1.3rem clamp(1.45rem, 3vw, 2.5rem); border-top: 1px solid var(--rule); }
.about-background-grid { margin-top: .9rem; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); background: var(--panel); border: 1px solid var(--rule); }
.about-background-grid article { padding: clamp(.85rem, 2.1vw, 1.5rem); }
.about-background-grid article + article { border-inline-start: 1px solid var(--rule); }
.about-background-grid h3 { font: 400 clamp(1.55rem, 2.7vw, 2.2rem)/1 var(--display); margin-block: .3rem .5rem; }
.about-background-grid article p:not(.kicker) { color: var(--muted); font-size: .91rem; }
.about-approach { padding-block: 1.35rem clamp(1.45rem, 3.1vw, 2.7rem); align-items: start; }
.about-approach h2 { max-width: 16ch; }
.studio-shell .process-band { padding-block: clamp(1.4rem, 3vw, 2.8rem); }
.process-band li { background: linear-gradient(140deg, var(--detail-wash), transparent 75%); padding-inline: .65rem; }

@media (max-width: 825px) {
  .editorial-intro { grid-template-columns: minmax(0, .75fr) minmax(0, .25fr); }
  .editorial-intro::before { inset-inline-start: 41%; }
  .editorial-intro h1 { font-size: clamp(3.2rem, 8.1vw, 5.8rem); }
  .studio-shell .inquiry-aside { display: grid; }
}
@media (max-width: 600px) {
  .editorial-intro { grid-template-columns: 1fr; min-height: 0; padding-block: 1.4rem 1.1rem; }
  .editorial-intro::before { inset: .45rem -.45rem .45rem 34%; opacity: .6; background-position: center, center, 70% center; }
  .editorial-intro h1 { font-size: clamp(2.9rem, 11vw, 4.75rem); }
  .editorial-intro .intro-aside { margin-top: .65rem; }
  .editorial-intro .intro-aside p { background: linear-gradient(90deg, var(--paper), color-mix(in srgb, var(--paper) 87%, transparent) 85%, transparent); }
  .about-background-grid { grid-template-columns: 1fr; }
  .about-background-grid article + article { border-inline-start: 0; border-block-start: 1px solid var(--rule); }
  .studio-shell .inquiry-aside-art { min-height: 6.75rem; }
  .feature-visual .device-composition { flex: none; }
}
@media (max-width: 370px) {
  .tile-meta { gap: .2rem .45rem; }
  .format-label { font-size: .61rem; }
}

.home-intro::before {
  inset: .4rem 0 .6rem 45%;
  background: url('/assets/editorial/home-atelier.jpg') right 54% / cover no-repeat;
  mask-image: linear-gradient(90deg, transparent 4%, #000 58%, #000 88%, transparent),
    linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  mask-composite: intersect;
  opacity: .64;
}
.home-intro .intro-actions { align-items: center; margin-top: .85rem; }
.home-intro::after {
  content: "";
  position: absolute;
  inset-inline-end: 3%;
  inset-block-end: 4%;
  width: min(28%, 16rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--detail-metal) 76%, transparent);
  opacity: .62;
  pointer-events: none;
}
:root[data-theme="dark"] .home-intro::before { opacity: .4; }
.portfolio-intro.editorial-intro::before {
  inset-inline-start: 44%;
  mask-image: linear-gradient(90deg, transparent, #000 38%);
  opacity: .72;
}
.home-intro .intro-aside p,
.portfolio-intro.editorial-intro .intro-aside p {
  max-inline-size: 34ch;
  background: none;
}

@media (max-width: 825px) {
  .home-intro::before,
  .portfolio-intro.editorial-intro::before { inset-inline-start: 51%; }
}
@media (max-width: 600px) {
  .home-intro::before { inset: 0 -.35rem 0 50%; opacity: .31; }
  .home-intro::after { display: none; }
  :root[data-theme="dark"] .home-intro::before { opacity: .24; }
  .portfolio-intro.editorial-intro::before { inset-inline-start: 55%; opacity: .32; }
}