:root {
  --ie-ink: #11110f;
  --ie-paper: #f4f4f1;
  --ie-line: rgba(17, 17, 15, .22);
  --ie-muted: #d9d9d4;
  --ie-muted-dark: #c9c9c3;
}

.interview-edit-body { background: var(--ie-paper); color: var(--ie-ink); overflow-x: visible; }
.interview-edit img { max-width: 100%; }
.interview-edit .top-back-nav { margin: 0 auto; max-width: 1640px; padding: 124px 4vw 38px; }
.interview-edit .top-back-nav a { color: inherit; font: 500 11px/1 "DM Sans", sans-serif; letter-spacing: .18em; text-decoration: none; }
.interview-edit h1,
.interview-edit h2,
.interview-edit h3,
.interview-edit p { margin-top: 0; }
.interview-edit em { font-style: italic; font-weight: 400; }
.ie-label,
.ie-kicker { font: 500 11px/1.2 "DM Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; }

.ie-hero { margin: 0 auto; max-width: 1640px; padding: 38px 4vw clamp(100px, 12vw, 190px); }
.ie-hero-copy { margin-bottom: clamp(54px, 7vw, 104px); }
.ie-hero .ie-label { border-bottom: 1px solid var(--ie-ink); display: inline-block; margin-bottom: clamp(38px, 4.5vw, 68px); padding-bottom: 10px; }
.ie-hero h1 { font: 400 clamp(68px, 8.7vw, 142px)/.84 Italiana, serif; letter-spacing: -.048em; margin-bottom: 44px; max-width: 1500px; }
.ie-hero h1 em { display: inline-block; }
.ie-subtitle { font: 400 clamp(22px, 2vw, 34px)/1.15 Italiana, serif; margin-bottom: 30px; }
.ie-hero-image { display: block; height: auto; width: 100%; }
.ie-standfirst,
.look-description,
.look-explanation,
.ie-takeaway > p:last-child { font: 400 15px/1.55 "DM Sans", sans-serif; }
.ie-standfirst { max-width: 760px; }

.image-placeholder { align-items: center; background: var(--ie-muted); color: rgba(17,17,15,.62); display: flex; justify-content: center; overflow: hidden; position: relative; }
.image-placeholder::before,
.image-placeholder::after { background: rgba(17,17,15,.13); content: ""; height: 1px; left: 50%; position: absolute; top: 50%; transform-origin: center; width: 42%; }
.image-placeholder::before { transform: translate(-50%, -50%) rotate(27deg); }
.image-placeholder::after { transform: translate(-50%, -50%) rotate(-27deg); }
.image-placeholder span { background: var(--ie-muted); font: 500 10px/1.3 "DM Sans", sans-serif; letter-spacing: .16em; max-width: 80%; padding: 10px 14px; position: relative; text-align: center; z-index: 1; }

.ie-note { border-top: 1px solid var(--ie-line); display: grid; grid-template-columns: .55fr 1.45fr; gap: clamp(32px, 6vw, 110px); margin: 0 auto; max-width: 1500px; padding: clamp(76px, 8vw, 124px) 4vw; }
.ie-note blockquote { align-self: end; font: 400 clamp(30px, 3.5vw, 58px)/1.05 Italiana, serif; margin: 0; }

.professional-edit { margin: 0 auto; max-width: 1500px; padding: clamp(120px, 15vw, 240px) 4vw 20px; }
.ie-note + .professional-edit { padding-top: clamp(90px, 9vw, 145px); }
.field-heading { border-top: 1px solid var(--ie-ink); display: grid; grid-template-columns: 100px minmax(0, 1fr) minmax(250px, .48fr); gap: 20px; padding-top: 22px; }
.field-heading > p:first-child { font: 500 11px/1.2 "DM Sans", sans-serif; letter-spacing: .2em; }
.field-heading h2 { font: 400 clamp(60px, 9vw, 145px)/.82 Italiana, serif; letter-spacing: -.04em; margin-bottom: 0; }
.field-industries { align-self: end; font: 400 12px/1.5 "DM Sans", sans-serif; letter-spacing: .08em; margin-bottom: 5px; text-transform: uppercase; }
.field-intro { font: 400 16px/1.55 "DM Sans", sans-serif; grid-column: 2 / 4; margin: 48px 0 0; max-width: 680px; }

.fashion-look { display: grid; margin-top: clamp(100px, 13vw, 210px); }
.look--left,
.look--right { grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); column-gap: clamp(44px, 8vw, 130px); grid-template-rows: auto auto 1fr; }
.look--left { grid-template-areas: "image heading" "image trends" "image explanation"; }
.look--right { grid-template-areas: "heading image" "trends image" "explanation image"; grid-template-columns: minmax(300px, .75fr) minmax(0, 1.25fr); }
.look--wide { grid-template-columns: repeat(12, 1fr); gap: 28px; grid-template-areas: "heading heading heading heading . . . . . . . ." "image image image image image image image image image image image image" ". trends trends trends trends . explanation explanation explanation explanation . ."; }
.look-heading { grid-area: heading; align-self: end; }
.look-heading > p:first-child,
.look-trends > p { font: 500 10px/1.3 "DM Sans", sans-serif; letter-spacing: .19em; margin-bottom: 19px; text-transform: uppercase; }
.look-heading h3 { font: 400 clamp(38px, 4.6vw, 72px)/.92 Italiana, serif; letter-spacing: -.03em; margin-bottom: 28px; }
.look-description { max-width: 360px; }
.look-image { grid-area: image; min-height: 420px; }
.look-image--portrait { aspect-ratio: 4 / 5; }
.look-image--tall { aspect-ratio: 3 / 4.3; }
.look-image--landscape { aspect-ratio: 16 / 9; min-height: 0; }
.look-image--cinematic { aspect-ratio: 2 / 1; min-height: 0; }
.look-trends { align-self: start; border-top: 1px solid var(--ie-ink); grid-area: trends; margin-top: 50px; padding-top: 18px; }
.look-trends ul { list-style: none; margin: 0; padding: 0; }
.look-trends li { border-bottom: 1px solid var(--ie-line); font: 400 13px/1.25 "DM Sans", sans-serif; padding: 10px 0; }
.look-explanation { align-self: end; grid-area: explanation; max-width: 400px; margin: 50px 0 0; }
.look--wide .look-image { margin-top: 34px; }
.look--wide .look-trends,
.look--wide .look-explanation { margin-top: 44px; }

.corporate-look-image { aspect-ratio: 1 / 2; margin: 0; overflow: hidden; }
.corporate-look-image img { display: block; height: 100%; object-fit: cover; width: 100%; }
.corporate-look-image--01 img { object-position: left center; }
.corporate-look-image--02 img { object-position: center center; }
.corporate-look-image--03 img { object-position: right center; }
.field--corporate .fashion-look { align-items: start; }
.field--corporate .look--left { grid-template-columns: minmax(320px, .78fr) minmax(0, 1.22fr); }
.field--corporate .look--right { grid-template-columns: minmax(0, 1.22fr) minmax(320px, .78fr); }
.field--corporate .look-heading { align-self: start; }
.field--corporate .look-trends { margin-top: 44px; }
.trend-details > div { border-bottom: 1px solid var(--ie-line); padding: 17px 0 19px; }
.trend-details h4 { font: 600 14px/1.25 "DM Sans", sans-serif; letter-spacing: .045em; margin: 0 0 7px; }
.trend-details > div p { font: 400 15px/1.5 "DM Sans", sans-serif; margin: 0; max-width: 470px; }
.interview-adjustment { border-top: 1px solid var(--ie-ink); padding-top: 18px; }
.interview-adjustment > p:first-child { font: 500 10px/1.3 "DM Sans", sans-serif; letter-spacing: .19em; margin: 0 0 14px; text-transform: uppercase; }
.interview-adjustment > p:nth-child(2) { font: 400 15px/1.55 "DM Sans", sans-serif; margin: 0; }
.interview-adjustment .editorial-line { font: italic 400 clamp(22px, 2vw, 31px)/1.18 Italiana, serif; margin: 48px 0 0; max-width: 430px; }

.creative-look-image { aspect-ratio: 1 / 2; margin: 0; overflow: hidden; }
.creative-look-image img { display: block; height: 100%; object-fit: cover; width: 100%; }
.creative-look-image--01 img { object-position: left center; }
.creative-look-image--02 img { object-position: center center; }
.creative-look-image--03 img { object-position: right center; }
.field--creative .creative-look { align-items: start; }
.field--creative .creative-look--01 { grid-template-columns: minmax(0, 1.36fr) minmax(340px, .84fr); }
.field--creative .creative-look--02 { grid-template-columns: minmax(370px, 1.18fr) minmax(300px, .68fr); }
.field--creative .creative-look--02 .creative-look-image { margin-top: 118px; }
.field--creative .creative-look--03 { grid-template-areas: "heading heading heading heading heading . . . . . . ." "image image image image image image image image image image image image" "trends trends trends trends trends trends . explanation explanation explanation explanation ."; }
.field--creative .creative-look--03 .creative-look-image { justify-self: end; width: 64%; }
.field--creative .creative-look--03 .trend-details { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.field--creative .creative-look--03 .trend-details > p { grid-column: 1 / 3; }
.digital-look-image { aspect-ratio: 1 / 2; margin: 0; overflow: hidden; }
.digital-look-image img { display: block; height: 100%; object-fit: cover; width: 100%; }
.digital-look-image--01 img { object-position: left center; }
.digital-look-image--02 img { object-position: center center; }
.digital-look-image--03 img { object-position: right center; }
.field--digital .digital-look { align-items: start; margin-top: clamp(92px, 10vw, 158px); }
.field--digital .digital-look--01 { grid-template-columns: minmax(320px, .74fr) minmax(0, 1.26fr); }
.field--digital .digital-look--02 { grid-template-columns: minmax(310px, .76fr) minmax(0, 1.24fr); }
.field--digital .digital-look--02 .digital-look-image { justify-self: end; width: 94%; }
.field--digital .digital-look--03 { grid-template-areas: "heading heading heading heading heading . . . . . . ." "image image image image image image image image image image . ." "trends trends trends trends trends trends trends . explanation explanation explanation ."; }
.field--digital .digital-look--03 .digital-look-image { margin-left: 7%; width: 84%; }
.field--digital .digital-look--03 .trend-details { column-gap: 30px; display: grid; grid-template-columns: 1fr 1fr; }
.field--digital .digital-look--03 .trend-details > p { grid-column: 1 / 3; }
.people-look-image { aspect-ratio: 1 / 2; margin: 0; overflow: hidden; }
.people-look-image img { display: block; height: 100%; object-fit: cover; width: 100%; }
.people-look-image--01 img { object-position: left center; }
.people-look-image--02 img { object-position: center center; }
.people-look-image--03 img { object-position: right center; }
.field--people .people-look { align-items: start; margin-top: clamp(112px, 12vw, 190px); }
.field--people .people-look--01 { grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); }
.field--people .people-look--01 .people-look-image { width: 96%; }
.field--people .people-look--02 { grid-template-columns: minmax(290px, .62fr) minmax(0, 1.15fr); }
.field--people .people-look--02 .people-look-image { justify-self: end; width: 96%; }
.field--people .people-look--03 { grid-template-areas: "heading heading heading heading heading . . . . . . ." "image image image image image image image image image image image image" "trends trends trends trends trends trends trends . explanation explanation explanation ."; }
.field--people .people-look--03 .people-look-image { justify-self: end; width: 66%; }
.field--people .people-look--03 .trend-details { column-gap: 34px; display: grid; grid-template-columns: 1fr 1fr; }
.field--people .people-look--03 .trend-details > p { grid-column: 1 / 3; }
.services-statement { font: 400 clamp(52px, 7.2vw, 112px)/.88 Italiana, serif; letter-spacing: -.04em; margin: clamp(100px, 12vw, 190px) 0 0 7%; max-width: 1040px; }
.services-look-image { aspect-ratio: 1 / 2; margin: 0; overflow: hidden; }
.services-look-image img { display: block; height: 100%; object-fit: cover; width: 100%; }
.services-look-image--01 img { object-position: left center; }
.services-look-image--02 img { object-position: center center; }
.services-look-image--03 img { object-position: right center; }
.field--services .services-look { align-items: start; column-gap: clamp(42px, 7vw, 112px); margin-top: clamp(105px, 12vw, 190px); }
.field--services .services-look--01 { grid-template-areas: "image heading" "image wardrobe" "image trends" "image explanation"; grid-template-columns: minmax(0, 1.14fr) minmax(330px, .86fr); grid-template-rows: auto auto auto 1fr; }
.field--services .services-look--02 { grid-template-areas: "heading image" "wardrobe image" "trends image" "explanation image"; grid-template-columns: minmax(330px, .9fr) minmax(0, 1.1fr); grid-template-rows: auto auto auto 1fr; }
.field--services .services-look--03 { gap: 28px; grid-template-areas: "heading heading heading heading heading . image image image image image image" "wardrobe wardrobe wardrobe wardrobe wardrobe . image image image image image image" "trends trends trends trends trends trends . explanation explanation explanation explanation ."; grid-template-columns: repeat(12, 1fr); }
.services-wardrobe { border-top: 1px solid var(--ie-line); display: grid; gap: 26px; grid-area: wardrobe; grid-template-columns: 1.2fr .8fr; margin-top: 42px; padding-top: 18px; }
.services-wardrobe > div > p:first-child { font: 500 10px/1.35 "DM Sans", sans-serif; letter-spacing: .16em; margin: 0 0 13px; text-transform: uppercase; }
.services-wardrobe > div > p:last-child { font: 400 clamp(20px, 1.8vw, 28px)/1.24 Italiana, serif; margin: 0; }
.field--services .look-trends { margin-top: 44px; }
.field--services .look-explanation { align-self: end; }
.field--services .services-look--03 .look-trends,
.field--services .services-look--03 .look-explanation { margin-top: 52px; }
.services-takeaway { border-top: 1px solid var(--ie-ink); display: grid; gap: 9vw; grid-template-columns: 1.3fr .7fr; margin-top: clamp(135px, 16vw, 250px); padding: 28px 0 clamp(80px, 10vw, 150px); }
.services-takeaway > p { font: 400 clamp(45px, 6vw, 92px)/.9 Italiana, serif; letter-spacing: -.04em; margin: 0; }
.services-takeaway > div { align-self: end; font: 400 16px/1.55 "DM Sans", sans-serif; max-width: 430px; }
.services-takeaway > div p:last-child { font: italic 400 clamp(23px, 2vw, 31px)/1.2 Italiana, serif; margin: 38px 0 0; }

.ie-takeaway { border-top: 1px solid var(--ie-line); margin: 0 auto; max-width: 1500px; padding: clamp(110px, 15vw, 240px) 4vw; }
.ie-takeaway h2 { font: 400 clamp(54px, 9.2vw, 146px)/.84 Italiana, serif; letter-spacing: -.045em; margin: clamp(54px, 7vw, 104px) 0 70px; max-width: 1300px; }
.ie-takeaway > p:last-child { max-width: 420px; margin-left: auto; }

.ie-sources { border-top: 1px solid var(--ie-line); display: grid; grid-template-columns: 1fr 2fr; gap: 60px; margin: 0 auto; max-width: 1500px; padding: 30px 4vw clamp(48px, 5vw, 76px); }
.ie-sources h2 { font: 500 10px/1.3 "DM Sans", sans-serif; letter-spacing: .18em; margin: 0; }
.source-list { list-style: none; margin: 0; padding: 0; }
.source-list li { border-top: 1px solid var(--ie-line); font: 500 11px/1.35 "DM Sans", sans-serif; letter-spacing: .14em; padding: 12px 0; }
.source-list li:last-child { border-bottom: 1px solid var(--ie-line); }

@media (max-width: 800px) {
  .interview-edit .top-back-nav { padding: 98px 22px 26px; }
  .ie-hero { padding: 24px 22px 110px; }
  .ie-hero-copy { margin-bottom: 42px; }
  .ie-hero .ie-label { margin-bottom: 42px; }
  .ie-hero h1 { font-size: clamp(40px, 12.6vw, 58px); letter-spacing: -.04em; line-height: .88; margin-bottom: 30px; max-width: 100%; }
  .ie-hero h1 em { display: block; max-width: 100%; }
  .ie-subtitle { font-size: 24px; }
  .ie-hero-image { aspect-ratio: 4 / 3; object-fit: cover; object-position: left center; }
  .ie-note { grid-template-columns: 1fr; gap: 40px; padding: 74px 22px 78px; }
  .ie-note blockquote { font-size: clamp(28px, 9.5vw, 44px); margin-top: 34px; max-width: 100%; }
  .professional-edit { padding: 124px 22px 10px; }
  .ie-note + .professional-edit { padding-top: 96px; }
  .field-heading { grid-template-columns: 1fr; }
  .field-heading > p:first-child,
  .field-heading h2,
  .field-industries,
  .field-intro { grid-column: 1; }
  .field-heading h2 { font-size: clamp(42px, 14vw, 62px); letter-spacing: -.035em; max-width: 100%; }
  .field-industries { margin-top: 14px; }
  .field-intro { margin-top: 38px; }
  .fashion-look,
  .look--left,
  .look--right,
  .look--wide,
  .field--creative .look--left,
  .field--creative .look--right,
  .field--creative .creative-look--03,
  .field--corporate .look--left,
  .field--corporate .look--right,
  .field--digital .digital-look--01,
  .field--digital .digital-look--02,
  .field--digital .digital-look--03,
  .field--people .people-look--01,
  .field--people .people-look--02,
  .field--people .people-look--03,
  .field--services .services-look--01,
  .field--services .services-look--02,
  .field--services .services-look--03 { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "image" "wardrobe" "trends" "explanation"; margin-top: 104px; }
  .fashion-look > *,
  .look-heading,
  .look-trends,
  .look-explanation { min-width: 0; }
  .look-heading h3 { font-size: clamp(34px, 10.8vw, 50px); letter-spacing: -.025em; line-height: .94; max-width: 100%; overflow-wrap: normal; word-break: normal; }
  .look-image { margin-top: 28px !important; min-height: 0; }
  .corporate-look-image { aspect-ratio: 1 / 2; }
  .creative-look-image { aspect-ratio: 1 / 2; width: 100% !important; }
  .field--creative .creative-look--03 .trend-details { display: block; }
  .digital-look-image { aspect-ratio: 1 / 2; margin-left: 0 !important; width: 100% !important; }
  .field--digital .digital-look--03 .trend-details { display: block; }
  .people-look-image { aspect-ratio: 1 / 2; width: 100% !important; }
  .field--people .people-look--03 .trend-details { display: block; }
  .services-statement { font-size: clamp(40px, 12.5vw, 58px); margin: 90px 0 0; max-width: 100%; }
  .services-look-image { aspect-ratio: 1 / 2; width: 100%; }
  .services-wardrobe { gap: 28px; grid-template-columns: 1fr; margin-top: 34px; }
  .services-wardrobe > div > p:last-child { font-size: clamp(23px, 7.2vw, 30px); }
  .look-trends { margin-top: 34px !important; }
  .look-explanation { margin-top: 28px !important; }
  .look-image--cinematic, .look-image--landscape { aspect-ratio: 4 / 5; }
  .ie-takeaway { padding: 110px 22px; }
  .services-takeaway { gap: 44px; grid-template-columns: 1fr; margin-top: 130px; padding-bottom: 90px; }
  .services-takeaway > p { font-size: clamp(38px, 11.8vw, 54px); max-width: 100%; }
  .ie-takeaway h2 { font-size: clamp(38px, 11.5vw, 56px); letter-spacing: -.035em; line-height: .88; max-width: 100%; }
  .ie-sources { grid-template-columns: 1fr; gap: 28px; padding: 28px 22px 48px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
