/* The approved poster language: a real portrait, Paris, bold type and pink marks. */
.hero { overflow: clip; }
.hero-editorial { display: contents; }
.hero-photo--cutout {
  -webkit-mask: url('../images/portrait-cutout-mask.svg') center / 100% 100% no-repeat;
  mask: url('../images/portrait-cutout-mask.svg') center / 100% 100% no-repeat;
}
.hero-portrait > .hero-photo--cutout { height: auto; width: 100%; max-height: none; object-fit: initial; }
.hero .hero-architecture {
  width: 100%; height: clamp(320px, 30vw, 420px); right: 0; bottom: 0;
  object-fit: cover; object-position: 60% 65%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 100%);
}
@media screen and (min-width: 941px) {
  .hero-inner { isolation: isolate; }
  .hero-portrait { align-self: end; }
  .hero-portrait > .hero-photo--cutout { width: min(100%, 566px); margin-bottom: -3%; }
  .hero .hero-architecture {
    width: 100vw; max-width: none; left: 50%; right: auto; transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%), radial-gradient(ellipse 78% 100% at 15% 20%, transparent 45%, #000 90%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 14%), radial-gradient(ellipse 78% 100% at 15% 20%, transparent 45%, #000 90%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  .hero-copy { z-index: 3; }
  .hero-label { right: 1rem; }
  .hero-actions .button--outline { background: var(--sky); }
  .hero-actions .button--outline:hover { background: var(--ink); }
  .home #convictions .section-heading { display: block; }
  .home #convictions .section-heading h2 { font-family: var(--font-editorial); font-weight: 700; font-size: clamp(2.7rem, 5vw, 4.6rem); text-transform: uppercase; letter-spacing: -.055em; }
  .home #convictions .section-heading h2 br { display: none; }
  .home #convictions .section-heading > .serif { margin-top: 18px; font-size: 1.2rem; }
}

@media screen and (max-width: 940px) {
  :root { --gutter: clamp(20px, 4vw, 32px); }
  .header-inner { min-height: 76px; padding-block: 13px; gap: 12px; }
  .brand-name { font-size: 1.8rem; }
  .brand-role { max-width: none; margin-top: 5px; font-size: .6rem; line-height: 1.25; }
  .js .menu-toggle { min-height: 44px; padding: 10px 0 10px 12px; gap: 10px; border: 0; font-size: .82rem; }
  .primary-nav .menu { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; padding-top: 12px; }
  .primary-nav .menu a { display: flex; align-items: center; min-height: 48px; padding-block: 10px; }
  .header-contact { min-height: 48px; margin: 12px 0 4px; font-size: .88rem; padding-inline: 16px; }
  .header-contact .arrow { display: inline; }

  .hero-inner {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 0; isolation: isolate; min-height: 0; padding-top: 24px; padding-bottom: 0;
  }
  .hero-copy { display: contents; }
  .hero .eyebrow { grid-column: 1 / -1; grid-row: 1; margin: 0 0 18px; font-size: .65rem; letter-spacing: .11em; }
  .hero .eyebrow::after { width: auto; flex: 1; }
  .hero-title {
    grid-row: 2; grid-column: 1; align-self: start; z-index: 3;
    width: 128%; margin: 3px 0 0 -.025em;
    font-size: clamp(3rem, 16.4vw, 6.7rem); line-height: 1.01; letter-spacing: -.035em;
  }
  .hero-title-line { white-space: nowrap; }
  .hero-title::before { width: 18px; height: 18px; right: 0; top: -15px; border-width: 5px; }
  .hero-title .marked::after { height: .09em; bottom: -.05em; transform: rotate(-3deg); }
  .hero-portrait {
    grid-column: 2; grid-row: 2; align-self: end; position: relative;
    height: auto; width: 155%; max-width: 330px; margin: 0 -10% -9px -35%;
    overflow: visible; display: block; z-index: 2;
  }
  .hero-portrait > .hero-photo--cutout {
    display: block; position: static; width: 100%; height: auto; max-width: none; transform: none;
  }
  .hero-portrait > .hero-photo:not(.hero-photo--cutout) {
    display: block; position: static; width: 100%; height: auto; max-width: none; transform: none;
    clip-path: inset(0 0 0 0); max-height: 320px; object-fit: cover; object-position: center 20%;
  }
  .hero-label { left: auto; top: auto; right: 10%; bottom: 20%; z-index: 4; padding: 7px 10px; font-size: clamp(.95rem, 3.6vw, 1.15rem); transform: rotate(-8deg); }
  .hero .hero-architecture {
    position: relative; grid-row: 2; grid-column: 1 / -1; align-self: end;
    inset: auto;
    width: calc(100% + var(--gutter) * 2); max-width: none;
    height: clamp(160px, 48vw, 250px); margin: 0 calc(-1 * var(--gutter)); z-index: 1;
    object-fit: cover; object-position: 65% 65%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 100%);
  }
  .hero-editorial {
    display: block; grid-row: 3; grid-column: 1 / -1; position: relative; z-index: 5;
    margin-inline: calc(-1 * var(--gutter)); padding: 26px var(--gutter) 28px;
    background: var(--sky);
  }
  .hero-subtitle { max-width: 660px; margin: 0 0 12px; font-size: clamp(1.55rem, 5.6vw, 1.95rem); line-height: 1.14; }
  .hero-description { max-width: 620px; font-size: 1rem; line-height: 1.5; margin: 0; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0 0; }
  .hero-actions .button { display: flex; min-height: 48px; padding: 12px 8px; font-size: .82rem; gap: 7px; justify-content: center; line-height: 1.3; }
  .hero-actions .button > [aria-hidden] { display: inline; }
  .hero-strip { padding: 15px 12px; font-size: clamp(1.03rem, 3.65vw, 1.4rem); color: var(--sky); line-height: 1.15; letter-spacing: .055em; }
}
@media screen and (max-width: 360px) {
  .header-inner { min-height: 70px; padding-block: 10px; }
  .brand-name { font-size: 1.65rem; }
  .brand-role { font-size: .55rem; }
  .hero-actions .button { font-size: .78rem; padding-inline: 5px; }
  .hero-actions .button > [aria-hidden] { display: none; }
  .hero-label { right: 10%; font-size: .85rem; }
  .hero-editorial { padding-block: 20px 22px; }
  .hero-subtitle { font-size: 1.4rem; margin-bottom: 10px; }
  .hero-description { font-size: .95rem; line-height: 1.45; }
  .hero-actions { margin-top: 18px; }
}
@media screen and (min-width: 600px) and (max-width: 940px) {
  .hero-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); padding-top: 28px; }
  .hero-title { width: 115%; font-size: clamp(6rem, 12.5vw, 7.3rem); }
  .hero-portrait { width: 118%; margin-left: -9%; max-width: 340px; justify-self: end; }
  .hero .hero-architecture { height: 250px; }
  .hero-editorial { padding-block: 28px 30px; }
  .hero-actions { max-width: 580px; }
}