/** IPMS Seattle hidden jigsaw-puzzle page. */
.jigsaw-hero {
  min-height:clamp(34rem,66vw,47rem);
  padding:clamp(4rem,7vw,7rem) max(4.5vw,calc((100vw - 81.875rem)/2));
  display:grid;
  grid-template-columns:1fr .75fr;
  gap:clamp(3rem,8vw,9rem);
  align-items:center;
  overflow:hidden;
  background:var(--blue);
  color:#fff
}
.jigsaw-hero-copy h1 {
  margin:1.4rem 0 2rem;
  font:500 clamp(4.5rem,9vw,8rem)/.83 var(--font-display);
  letter-spacing:-.04em;
  text-transform:uppercase
}
.jigsaw-hero-copy h1 em {
  color:var(--gold);
  font-style:normal
}
.jigsaw-hero-copy>p:last-child {
  max-width:39rem;
  color:#d2dbea;
  font-size:1.05rem;
  line-height:1.8
}
.jigsaw-piece {
  position:relative;
  aspect-ratio:1;
  transform:rotate(8deg);
  background:var(--gold);
  box-shadow:1.3rem 1.3rem 0 rgba(0,0,0,.13)
}
.jigsaw-piece::before,.jigsaw-piece::after {
  content:"";
  position:absolute;
  z-index:2;
  width:30%;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--gold)
}
.jigsaw-piece::before {
  top:-15%;
  left:35%
}
.jigsaw-piece::after {
  right:-15%;
  top:35%
}
.jigsaw-piece span:nth-child(1),.jigsaw-piece span:nth-child(2) {
  position:absolute;
  z-index:3;
  width:30%;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--blue)
}
.jigsaw-piece span:nth-child(1) {
  bottom:-15%;
  left:35%
}
.jigsaw-piece span:nth-child(2) {
  left:-15%;
  top:35%
}
.jigsaw-library {
  padding:clamp(4rem,7vw,7rem) max(4.5vw,calc((100vw - 81.875rem)/2))
}
.jigsaw-heading {
  margin-bottom:clamp(3rem,5vw,4.5rem);
  display:grid;
  grid-template-columns:.55fr 1.45fr;
  gap:clamp(2rem,5vw,5rem)
}
.jigsaw-heading h2 {
  margin:0;
  font:500 clamp(3rem,6vw,5rem)/.95 var(--font-display);
  text-transform:uppercase
}
.jigsaw-heading>div:last-child>p {
  max-width:42rem;
  margin:1.25rem 0 0;
  color:#69717d;
  line-height:1.7
}
.jigsaw-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--ink);
  border-left:1px solid var(--ink)
}
.jigsaw-card {
  display:flex;
  min-width:0;
  flex-direction:column;
  border-right:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  background:var(--paper)
}
.jigsaw-image {
  position:relative;
  display:block;
  overflow:hidden;
  border-bottom:1px solid var(--ink);
  background:#e4e1d9
}
.jigsaw-image img {
  width:100%;
  height:clamp(15rem,24vw,22rem);
  object-fit:cover;
  transition:transform .35s ease,filter .35s ease
}
.jigsaw-image>span {
  position:absolute;
  right:1rem;
  bottom:1rem;
  padding:.55rem .72rem;
  background:var(--ink);
  color:#fff;
  font:.65rem var(--font-display);
  letter-spacing:.12em;
  text-transform:uppercase
}
.jigsaw-image:hover img,.jigsaw-image:focus-visible img {
  transform:scale(1.035);
  filter:saturate(1.08)
}
.jigsaw-image:focus-visible {
  outline:4px solid var(--gold);
  outline-offset:-4px
}
.jigsaw-card-copy {
  min-height:20rem;
  padding:clamp(1.5rem,3vw,2.4rem);
  display:flex;
  flex-direction:column
}
.jigsaw-card-copy small {
  color:var(--red);
  font:.65rem var(--font-display);
  letter-spacing:.14em
}
.jigsaw-card-copy h3 {
  margin:2.2rem 0 1rem;
  font:500 clamp(2rem,3vw,3rem)/1 var(--font-display);
  text-transform:uppercase
}
.jigsaw-card-copy p {
  margin:0;
  color:#69717d;
  font-size:.82rem;
  line-height:1.7
}
.jigsaw-start {
  width:max-content;
  margin-top:auto;
  padding-top:2rem;
  border-bottom:2px solid var(--gold);
  font-size:.75rem;
  font-weight:800
}
.jigsaw-start:hover,.jigsaw-start:focus-visible {
  color:var(--red);
  outline:none
}
.jigsaw-note {
  padding:clamp(3rem,6vw,5rem) max(4.5vw,calc((100vw - 81.875rem)/2));
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:4vw;
  align-items:center;
  background:var(--ink);
  color:#fff
}
.jigsaw-note h2 {
  margin:.7rem 0 0;
  font:500 clamp(2.5rem,4vw,4rem)/1 var(--font-display);
  text-transform:uppercase
}
.jigsaw-note>p {
  color:#d4dae3;
  line-height:1.7
}
@media(max-width:950px) {
  .jigsaw-grid {
    grid-template-columns:1fr
  }
  .jigsaw-image img {
    height:clamp(18rem,60vw,32rem)
  }
  .jigsaw-card-copy {
    min-height:16rem
  }
  .jigsaw-note {
    grid-template-columns:1fr 1fr
  }
  .jigsaw-note .button {
    grid-column:2;
    justify-self:start
  }
}
@media(max-width:700px) {
  .jigsaw-hero,.jigsaw-heading,.jigsaw-note {
    grid-template-columns:1fr
  }
  .jigsaw-piece {
    width:min(70vw,18rem);
    margin:0 auto
  }
  .jigsaw-note .button {
    grid-column:auto
  }
}
@media(prefers-reduced-motion:reduce) {
  .jigsaw-image img {
    transition:none
  }
}
@media print {
  .jigsaw-hero {
    min-height:0;
    background:#fff;
    color:#000
  }
  .jigsaw-piece {
    display:none
  }
  .jigsaw-grid {
    grid-template-columns:repeat(3,1fr)
  }
  .jigsaw-note {
    background:#fff;
    color:#000
  }
}