/* Hallmark · genre: editorial · macrostructure: Feature Stack · F2 pinned=left, content=brand panels, steps=5
 * theme: custom · vibe: "brand-book, measured, graphic, archival" · paper: var(--color-brand-paper) · accent: var(--color-brand-blue)
 * display: Montserrat · body: Roboto · axes: light / geometric-sans / cool
 * enrichment: official EPL logo, palette and pattern assets · nav: N6 Masthead · footer: Ft6 Letter close
 * pre-emit critique: P5 H5 E5 S5 R5 V5
 * slop test: 58/58 · contrast: pass (40–41) · mobile: pass (34, 49–57)
 */
@import url("/epl-common.css?v=20260724-7");

.book-masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-sm) var(--brand-gutter) 0;
  background: var(--color-brand-white);
  color: var(--color-brand-charcoal);
}

.book-masthead > p {
  justify-self: center;
  font-family: var(--font-brand-display);
  font-size: var(--text-brand-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.book-masthead > a {
  display: grid;
  min-width: 10rem;
  min-height: 2.75rem;
  align-items: center;
  justify-self: start;
}

.book-masthead > a img {
  width: 11rem;
}

.book-masthead nav {
  display: flex;
  gap: var(--space-lg);
  justify-self: end;
}

.nav-link {
  display: grid;
  min-height: 2.75rem;
  place-items: center;
  font-family: var(--font-brand-display);
  font-size: var(--text-brand-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.book-masthead__rule {
  grid-column: 1 / -1;
  width: 100%;
  height: 0.3rem;
  border-block: var(--rule-hair) solid var(--color-brand-charcoal);
}

.book-intro {
  display: grid;
  gap: var(--space-2xl);
  padding: var(--space-2xl) var(--brand-gutter) var(--space-3xl);
}

.book-intro > div {
  display: grid;
  gap: var(--space-md);
}

.book-intro h1 {
  max-width: 13ch;
  font-size: var(--text-brand-display);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1.02;
}

.book-intro > p {
  align-self: end;
  color: var(--color-brand-ink-soft);
  font-size: var(--text-brand-md);
}

.feature-stack {
  display: grid;
  gap: var(--space-2xl);
  padding: 0 var(--brand-gutter) var(--space-3xl);
}

.feature-stack__sticky {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-lg);
  padding-block: 0 var(--space-xl);
}

.feature-stack__sticky h2 {
  max-width: 12ch;
  font-size: var(--text-brand-3xl);
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 1.07;
}

.feature-stack__sticky > p:not(.eyebrow) {
  color: var(--color-brand-ink-soft);
}

.feature-stack__panels {
  display: grid;
  min-width: 0;
  gap: var(--space-xl);
}

.book-panel {
  display: grid;
  min-width: 0;
  min-height: 28rem;
  align-content: space-between;
  gap: var(--space-xl);
  padding: var(--space-xl);
  background: var(--color-brand-white);
  color: var(--color-brand-charcoal);
}

.book-panel__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  font-family: var(--font-brand-display);
  font-size: var(--text-brand-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.book-panel--name {
  background-image: url("/assets/epl-ep-dark.png");
  background-position: center;
  background-size: cover;
  color: var(--color-brand-white);
}

.book-panel--name > p {
  max-width: none;
  padding: var(--space-lg);
  background: var(--color-brand-charcoal);
  font-family: var(--font-brand-display);
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 300;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.book-panel--identity {
  background: var(--color-brand-paper-warm);
}

.book-panel--identity img {
  width: min(88%, 34rem);
  place-self: center;
}

.book-panel--palette {
  background: var(--color-brand-paper-2);
}

.book-colors {
  display: grid;
  min-height: 18rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.book-colors > span {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.book-colors i {
  min-height: 10rem;
}

.book-colors b {
  padding: var(--space-xs) var(--space-3xs);
  font-family: var(--font-brand-display);
  font-size: clamp(0.55rem, 1.5vw, 0.75rem);
  font-weight: 600;
  text-align: center;
}

.book-colors span:nth-child(1) i { background: var(--color-brand-charcoal); }
.book-colors span:nth-child(2) i { background: var(--color-brand-blue); }
.book-colors span:nth-child(3) i { background: var(--color-brand-gray); }
.book-colors span:nth-child(4) i { background: var(--color-brand-champagne); }
.book-colors span:nth-child(5) i { background: var(--color-brand-white); }

.book-panel--type {
  align-content: start;
  background: var(--color-brand-white);
}

.book-panel__display {
  max-width: none;
  font-family: var(--font-brand-display);
  font-size: var(--text-brand-3xl);
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 1.08;
}

.book-panel__subhead {
  max-width: none;
  color: var(--color-brand-blue-deep);
  font-family: var(--font-brand-display);
  font-size: var(--text-brand-md);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}

.book-panel__body {
  color: var(--color-brand-ink-soft);
  font-size: var(--text-brand-md);
}

.book-panel--domain {
  background: var(--color-brand-blue);
  color: var(--color-brand-white);
}

.book-panel--domain > p {
  max-width: none;
  font-family: var(--font-brand-display);
  font-size: clamp(2.4rem, 6.5vw, 5.5rem);
  font-weight: 300;
  letter-spacing: -0.055em;
  line-height: 1;
  overflow-wrap: anywhere;
}

.book-panel--domain .action {
  justify-self: start;
}

.book-contact {
  position: relative;
  display: grid;
  min-width: 0;
  background: var(--color-brand-charcoal);
  color: var(--color-brand-white);
}

.book-contact__pattern {
  min-height: 18rem;
  background-image: url("/assets/epl-brick-tan.png");
  background-position: center;
  background-size: cover;
}

.book-contact > div:last-child {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--space-lg);
  padding: var(--space-3xl) var(--brand-gutter);
}

.book-contact h2 {
  max-width: 13ch;
  font-size: var(--text-brand-3xl);
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 1.06;
}

.book-contact > div:last-child > p:not(.eyebrow) {
  color: var(--color-brand-gray);
}

.book-contact > div:last-child > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.book-foot {
  display: grid;
  gap: var(--space-xl);
  max-width: 70rem;
  padding: var(--space-3xl) var(--brand-gutter);
}

.book-foot__close {
  font-family: var(--font-brand-display);
  font-size: var(--text-brand-xl);
  font-weight: 300;
  line-height: 1.35;
}

.book-foot__close span {
  font-size: var(--text-brand-sm);
  font-weight: 600;
}

@media (min-width: 48rem) {
  .book-intro {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  }

  .book-contact {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}

@media (max-width: 36rem) {
  .book-masthead {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-sm);
  }

  .book-masthead > p,
  .book-masthead nav a:first-child {
    display: none;
  }

  .book-masthead > a img {
    width: 9.75rem;
  }

  .book-masthead nav {
    gap: 0;
  }
}

@media (min-width: 64rem) {
  .feature-stack {
    grid-template-columns: minmax(16rem, 0.65fr) minmax(0, 1.35fr);
  }

  .feature-stack__sticky {
    position: sticky;
    inset-block-start: var(--space-xl);
    align-self: start;
    z-index: var(--z-sticky);
  }

  .book-panel {
    min-height: 38rem;
  }
}