/* Products: Philip Martin's. A full-bleed picture hero, three plain points beside a poster, a quiz band. */

.p-hero{position:relative;height:85vh;height:85svh;min-height:560px;max-height:920px;color:#fff;overflow:hidden;background:#3a2414}
.p-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform:scale(1.035)}  /* trims the thin white edge printed on the poster */
.p-shade{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(14,8,4,.5) 0%,rgba(14,8,4,0) 22%,rgba(14,8,4,0) 40%,rgba(14,8,4,.78) 100%),
  linear-gradient(90deg,rgba(14,8,4,.5) 0%,rgba(14,8,4,0) 55%)}
.p-copy{position:absolute;left:0;right:0;bottom:clamp(40px,8vh,84px)}
.p-copy .h1{font-size:clamp(54px,8.4vw,132px);line-height:.94;letter-spacing:-.02em}
.p-line{margin-top:22px;font-size:clamp(17px,1.5vw,19px);line-height:1.5;max-width:34ch;opacity:.94}
.p-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* three points beside the poster */
.pts{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,8vw,128px);align-items:center;padding-block:clamp(88px,11vw,160px)}
.pts-pic{margin:0;width:100%;max-width:440px;aspect-ratio:2/3;overflow:hidden;background:#1d1d24;justify-self:start}
.pts-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transform:scale(1.035);transform-origin:50% 0}
.pt{border-top:1px solid var(--ink);padding-top:20px;margin-top:clamp(28px,3.4vw,44px)}
.pt:first-child{margin-top:0}
.pt h2{font:400 clamp(30px,3vw,42px)/1.08 var(--d);letter-spacing:-.01em}
.pt p{margin-top:12px;color:var(--mute);font-size:clamp(16px,1.3vw,18px);line-height:1.6;max-width:46ch}

/* quiz band */
.qband{background:var(--night);color:var(--snow);padding-block:clamp(80px,10vw,140px)}
.qband-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end}
.qband .h2{font-size:clamp(40px,5vw,76px);max-width:11ch}
.qband-side{display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.qband-side p{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--night-mute);max-width:32ch}

@media (max-width:980px){
  .pts{grid-template-columns:1fr}
  .pts-pic{max-width:340px;aspect-ratio:4/5}
  .qband-in{grid-template-columns:1fr;align-items:start}
}
@media (max-width:700px){
  .p-hero>img{transform:scale(1.26);transform-origin:50% 72%}  /* on a tall phone screen the printed logo would sit under ours: crop it out */
}
@media (max-width:520px){
  .p-hero{min-height:620px}
  .p-btns .btn{flex:1 1 auto}
}