.event-product-page { --product-ink: #302722; --product-paper: #f4f2ed; --saboa-brown: #302722; margin: 0; overflow-x: clip; background: var(--product-paper); color: var(--product-ink); }
.event-product-page main { overflow: clip; }
.product-hero { position: relative; min-height: clamp(650px, 78vh, 820px); overflow: hidden; background: var(--product-ink); color: #fff; }
.product-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 52%; }
.product-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(15 11 9 / 68%) 0%, rgb(15 11 9 / 36%) 48%, rgb(15 11 9 / 10%) 100%); }
.product-hero-copy { position: relative; z-index: 1; width: min(100%, var(--event-container-max)); margin: 0 auto; padding: clamp(230px, 22vh, 285px) var(--event-gutter) clamp(90px, 10vh, 124px); }
.product-eyebrow { margin: 0; font-family: "DM Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: .075em; line-height: 1.5; }
.product-hero h1 { max-width: 900px; margin: 0; font-family: "Playfair Display", serif; font-size: clamp(58px, 6.1vw, 92px); font-weight: 400; letter-spacing: -.052em; line-height: .94; }
.product-hero-statement { max-width: 610px; margin: 30px 0 0; font-family: "Playfair Display", serif; font-size: clamp(27px, 2.8vw, 42px); font-weight: 400; letter-spacing: -.035em; line-height: 1.08; }
.product-editorial { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(56px, 8vw, 126px); width: min(100%, var(--event-container-max)); margin: 0 auto; padding: clamp(92px, 10vw, 142px) var(--event-gutter); align-items: center; }
.product-objective { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.product-copy h2 { max-width: none; margin: 0; font-family: "Playfair Display", serif; font-size: clamp(36px, 3.15vw, 48px); font-weight: 400; letter-spacing: -.05em; line-height: 1.02; }
.product-body-copy { max-width: 555px; margin-top: clamp(32px, 3.2vw, 44px); }
.product-body-copy p { margin: 0; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.65; }
.product-body-copy p + p { margin-top: 24px; }
.product-media { min-width: 0; aspect-ratio: 1.32 / 1; margin: 0; overflow: hidden; background: #d9d5ce; }
.product-media img,.product-pillars-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-objective .product-media img { object-position: center 58%; }
.product-pillars { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); min-height: 680px; background: #ebe7e1; }
.product-pillars-media { min-width: 0; min-height: 680px; margin: 0; overflow: hidden; }
.product-pillars-media img { object-position: center 48%; }
.product-pillars-copy { padding: clamp(82px, 8vw, 116px) max(var(--event-gutter), calc((100vw - var(--event-container-max)) / 2 + var(--event-gutter))) clamp(82px, 8vw, 116px) clamp(48px, 6.2vw, 96px); }
.product-pillar-list { margin-top: 36px; }
.product-pillar-list article { display: grid; grid-template-columns: minmax(155px, .75fr) minmax(220px, 1.25fr); gap: clamp(28px, 4vw, 62px); padding: 24px 0; border-top: 1px solid rgb(48 39 34 / 22%); align-items: start; }
.product-pillar-list article:last-child { border-bottom: 1px solid rgb(48 39 34 / 22%); }
.product-pillar-list h2 { margin: 0; color: var(--ink); font-family: "Playfair Display", serif; font-size: clamp(25px, 2vw, 31px); font-weight: 400; letter-spacing: -.035em; line-height: 1.05; transition: color 200ms ease, transform 200ms ease; }
.product-pillar-list p { max-width: 390px; margin: 0; font-size: 15px; line-height: 1.55; }
.product-production { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: clamp(64px, 9vw, 148px); min-height: 0; padding-top: clamp(72px, 7vw, 96px); padding-bottom: clamp(76px, 7.5vw, 104px); align-items: start; }
.product-production .product-copy { display: contents; }
.product-production .product-copy h2 { grid-column: 1; max-width: 690px; font-size: clamp(40px, 3.8vw, 56px); line-height: 1.02; }
.product-production .product-body-copy { grid-column: 2; max-width: 440px; margin-top: clamp(24px, 2.5vw, 36px); }
@media (hover: hover) and (pointer: fine) {
  .product-pillar-list h2:hover { color: var(--saboa-brown); transform: translateX(5px); }
}
@media (max-width: 980px) {
  .product-editorial { gap: 50px; }
  .product-pillars { grid-template-columns: .8fr 1.2fr; }
  .product-pillars-copy { padding-right: var(--event-gutter); padding-left: 44px; }
  .product-pillar-list article { grid-template-columns: 1fr; gap: 12px; }
  .product-production { grid-template-columns: minmax(0, 1.45fr) minmax(250px, 1fr); gap: 54px; }
}
@media (max-width: 760px) {
  .product-hero { min-height: 670px; }
  .product-hero-image { object-position: 58% center; }
  .product-hero-shade { background: linear-gradient(90deg, rgb(15 11 9 / 70%) 0%, rgb(15 11 9 / 38%) 72%, rgb(15 11 9 / 16%) 100%); }
  .product-hero-copy { padding: 190px var(--event-gutter) 74px; }
  .product-eyebrow { font-size: 10px; }
  .product-hero h1 { max-width: 355px; font-size: clamp(43px, 11.4vw, 56px); line-height: .98; }
  .product-hero-statement { max-width: 350px; margin-top: 27px; font-size: clamp(26px, 7.5vw, 34px); }
  .product-editorial { display: flex; padding: 78px var(--event-gutter) 86px; gap: 46px; flex-direction: column; align-items: stretch; }
  .product-copy h2 { font-size: clamp(40px, 11vw, 50px); }
  .product-body-copy { margin-top: 28px; }
  .product-body-copy p { font-size: 16px; }
  .product-media { width: 100%; aspect-ratio: 1 / .92; }
  .product-pillars { display: flex; min-height: 0; flex-direction: column; }
  .product-pillars-media { width: 100%; min-height: 0; aspect-ratio: 1 / .9; }
  .product-pillars-copy { padding: 72px var(--event-gutter) 82px; }
  .product-pillar-list { margin-top: 30px; }
  .product-pillar-list article { gap: 13px; padding: 24px 0; }
  .product-pillar-list h2 { font-size: 29px; }
  .product-pillar-list p { font-size: 15px; }
  .product-production { display: flex; min-height: 0; padding-top: 66px; padding-bottom: 72px; gap: 28px; }
  .product-production .product-copy { display: block; }
  .product-production .product-copy h2 { font-size: clamp(38px, 10.5vw, 46px); }
  .product-production .product-body-copy { max-width: 420px; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .product-pillar-list h2 { transition: none; }
  .product-pillar-list h2:hover { transform: none; }
}