/* The photographic style used on Home, with room for part data and forms. */
html.part-chapters {
  --part-header: 104px;
  --part-screen: 100vh;
  --part-gutter: clamp(24px, 6vw, 100px);
  scroll-padding-block-start: var(--part-header);
  background: #12181e;
}

@supports (height: 100svh) {
  html.part-chapters { --part-screen: 100svh; }
}

.ei-part-cinema .part-main {
  --part-ink: #f6f7f8;
  --part-muted: #c7d0d7;
  --part-rule: #ffffff36;
  color: var(--part-ink);
  background: #151c23;
}

.part-main .part-chapter {
  min-height: var(--part-screen);
  display: grid;
  align-items: center;
  padding: calc(var(--part-header) + 30px) var(--part-gutter) clamp(42px, 7vh, 88px);
  position: relative;
  isolation: isolate;
}

.part-main .part-chapter > .wrap {
  width: 100%;
  max-width: 1216px;
  padding: 0;
}

.part-chapter .part-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.part-backdrop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 63% 48%;
}

.part-main :is(.part-hero, .part-quote)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #10161c 0%, #10161cf2 29%, #10161cbf 53%, #10161c1a 92%),
              linear-gradient(0deg, #10161cd9, transparent 52%, #10161c77);
  pointer-events: none;
}

.part-main .part-hero {
  grid-template-rows: auto 1fr;
  align-items: stretch;
  gap: clamp(26px, 5vh, 56px);
  padding-top: calc(var(--part-header) + 23px);
  background: #10161c;
}

.part-main .part-hero > .wrap { align-self: center; }
.part-main .part-hero .crumb { border: 0; background: transparent; }
.part-main .part-hero .crumb .wrap {
  width: 100%;
  max-width: 1216px;
  padding: 0;
  color: var(--part-muted);
  font-size: 13px;
  line-height: 1.7;
}

.part-main .part-hero .crumb :is(.here, a:hover) { color: #fff; }
.part-main .part-hero .crumb .sep { margin-inline: 6px; }
.part-main .part-hero .eyebrow,
.part-main .part-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--part-muted);
  font: 500 11px/1.5 "IBM Plex Mono", monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.part-main :is(.part-hero .eyebrow, .part-kicker)::before {
  content: "";
  width: 25px;
  height: 2px;
  background: #e53855;
  flex: none;
}

.part-main .part-hero h1 {
  margin: 20px 0 18px;
  color: var(--part-ink);
  font: 500 17px/1.4 "IBM Plex Sans", Arial, sans-serif;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.part-title-number,
.part-title-description,
.part-main .part-details h2,
.part-main .part-quote .quick-quote-copy h2 {
  font-family: "EI Display", "Arial Narrow", Arial, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -.014em;
}

.part-title-number {
  position: relative;
  display: block;
  margin-block: .07em .1em;
  font-size: clamp(64px, 8vw, 124px);
  line-height: .93;
  white-space: nowrap;
}

.part-title-punctuation {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.part-title-description {
  display: block;
  max-width: 25ch;
  font-size: clamp(39px, 5vw, 72px);
  line-height: .99;
  text-wrap: balance;
}

.part-main .part-hero .lead {
  max-width: 570px;
  color: #e0e5e9;
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.55;
}

.part-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 28px;
}

.part-actions > a,
.part-main .part-quote .quick-quote-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 11px 16px;
  border: 1px solid #ffffff65;
  border-radius: 2px;
  color: #fff;
  font: 600 15px/1.4 "IBM Plex Sans", Arial, sans-serif;
}

.part-actions > .part-primary,
.part-main .part-quote .quick-quote-form button {
  background: #c8102e;
  border-color: #f56d82;
}

.part-actions > .part-primary:hover,
.part-main .part-quote .quick-quote-form button:hover { background: #a50f26; }
.part-actions > .part-secondary:hover { background: #ffffff16; }
.part-actions svg { width: 17px; height: 17px; flex: none; }
.part-main .body .part-actions a { text-decoration: none; }

.part-main .part-details {
  background: radial-gradient(ellipse at 20% 80%, #222c35 0%, #141b21 66%);
  border-block: 1px solid var(--part-rule);
}

.part-main .part-details > .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  align-items: start;
  gap: clamp(34px, 6vw, 96px);
}

.part-main .part-details h2.sec {
  margin: 0 0 23px;
  color: var(--part-ink);
  font-size: clamp(34px, 4.2vw, 61px);
  line-height: 1.01;
}

.part-main .part-details .part-kicker,
.part-main .part-quote .part-kicker { margin-bottom: 18px; }

.part-main .part-buying {
  padding-top: 28px;
}

.part-main .part-buying p {
  max-width: 64ch;
  margin-bottom: 14px;
  color: var(--part-muted);
  font-size: 16px;
  line-height: 1.62;
}

.part-main .part-buying a,
.part-main .part-buying strong {
  color: #fff;
}

.part-main .part-buying a:hover { color: #ffb2c0; }
.part-main .part-details .pair {
  border: 0;
  border-top: 1px solid var(--part-rule);
  background: none;
  color: var(--part-muted);
  padding: 16px 0 0;
  margin: 20px 0 0;
  overflow-wrap: anywhere;
}

.part-main .part-details .tablewrap {
  margin: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--part-rule);
}

.part-main .part-details .spec {
  min-width: 0;
  width: 100%;
  margin: 0;
  color: var(--part-ink);
}

.part-main .part-details .spec :is(th, td) {
  width: auto;
  min-width: 0;
  padding: 14px 10px 14px 0;
  border-bottom: 1px solid var(--part-rule);
  text-align: left;
  vertical-align: top;
  background: transparent;
  color: var(--part-ink);
  font-size: 16px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}

.part-main .part-details .spec th {
  width: 36%;
  color: var(--part-muted);
  font-size: 14px;
  font-weight: 500;
}

.part-main .part-details .spec .m { font-family: "IBM Plex Mono", monospace; }
.part-main .part-quote { background: #171e25; }
.part-main .part-quote .part-backdrop img { object-position: 58% 45%; }
.part-main .part-quote::before {
  background: linear-gradient(90deg, #11171efc 6%, #11171ee8 52%, #11171e85 100%),
              linear-gradient(0deg, #11171eee, transparent 78%);
}

.part-main .part-quote > .wrap {
  grid-template-columns: minmax(0, 1fr) minmax(320px, .76fr);
  gap: clamp(28px, 6vw, 100px);
  padding: 0;
}

.part-main .part-quote .quick-quote-copy h2 {
  max-width: 16ch;
  margin: 0 0 20px;
  font-size: clamp(47px, 6vw, 86px);
  line-height: .99;
  overflow-wrap: anywhere;
}

.part-main .part-quote .quick-quote-copy p:not(.part-kicker) {
  color: #e2e7eb;
  font-size: 18px;
}

.part-main .part-quote .quick-quote-form {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 19px;
  max-width: none;
  padding: clamp(20px, 3vw, 32px);
  background: #10171eee;
  border: 1px solid var(--part-rule);
}

.part-main .part-quote .quick-quote-fields { gap: 14px; }
.part-main .part-quote .quick-quote-field label { font-size: 14px; }
.part-main .part-quote .quick-quote-field input {
  min-height: 48px;
  font-size: 16px;
  border-radius: 2px;
  padding-inline: 12px;
}

.part-main .part-quote .quick-quote-form button { width: 100%; cursor: pointer; }
.part-main :is(a, button, input):focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) and (min-height: 441px) {
  html.part-chapters { scroll-snap-type: y proximity; }
  .part-chapter, body.ei-part-cinema > footer { scroll-snap-align: start; }
  .part-chapter { scroll-margin-block-start: calc(-1 * var(--part-header)); }
  body.ei-part-cinema > footer { scroll-snap-align: end; }
  html.part-chapters:has(dialog[open], .quick-quote-form:focus-within) { scroll-snap-type: none; }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 901px) and (min-height: 760px) {
  html.part-chapters { scroll-snap-type: y mandatory; }
  .part-chapter { scroll-snap-stop: always; }
}

@media (max-width: 900px) {
  .part-main .part-details > .wrap,
  .part-main .part-quote > .wrap { grid-template-columns: minmax(0, 1fr); }
  .part-main .part-buying { padding-top: 0; }
  .part-main .part-details h2.sec { margin-bottom: 16px; }
  .part-main .part-quote .quick-quote-form { max-width: 560px; }
}

@media (max-width: 700px) {
  html.part-chapters { --part-header: 90px; }
  .part-main :is(.part-hero, .part-quote)::before {
    background: linear-gradient(0deg, #0e151df5 4%, #0e151de0 50%, #10171da1 80%, #10171d9e);
  }
  .part-backdrop img { object-position: 59% 40%; }
  .part-main .part-hero { gap: 24px; }
  .part-main .part-hero .crumb .wrap { font-size: 11.5px; }
  .part-title-number { font-size: clamp(40px, 11.1vw, 69px); }
  .part-title-description { font-size: clamp(35px, 9vw, 53px); }
  .part-actions { margin-top: 22px; gap: 10px; }
  .part-actions > a { font-size: 14px; padding-inline: 12px; }
  .part-main .part-quote .quick-quote-copy h2 { font-size: clamp(41px, 10vw, 62px); }
  .part-main .part-quote .quick-quote-copy p:not(.part-kicker) { font-size: 16px; }
}

@media (max-height: 440px) and (min-width: 701px) {
  html.part-chapters { --part-header: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .ei-part-cinema > header.uniform-header { transition: none; }
}