/* Odds & ends: the newsletter up top, then a drawer of mismatched paper things. */

.title-q { padding: 20px 28px 16px; border-radius: 8px; background-color: var(--sky); transform: rotate(-1.5deg); filter: var(--lift); }
.title-q h1 { font: 400 54px/1 var(--font-head); }

.kick { font: 700 11px var(--font-type); letter-spacing: 1.5px; text-transform: uppercase; }

/* ---- featured: the newsletter envelope and the letter with the subscribe box ---- */
.news-feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; margin-bottom: 60px; }
.env-w { filter: var(--lift); transform: rotate(1.5deg); }
.env { position: relative; aspect-ratio: 1.6; padding: 24px 26px; background-color: var(--pink); }
.env::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 52%; background: rgba(0, 0, 0, .07); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.stamp2 {
  position: absolute;
  top: 16px; right: 18px;
  width: 72px; height: 86px;
  background: radial-gradient(circle, #0000 3.2px, var(--cream) 3.7px) -1px -1px / 9px 9px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2));
}
.stamp2 > span {
  position: absolute;
  inset: 5px;
  display: grid;
  place-content: center;
  text-align: center;
  border: 1.5px solid rgba(238, 90, 60, .5);
  background-color: var(--cream);
  background-image: var(--grain);
}
.stamp2 b { display: block; font: 400 24px/1 var(--font-head); color: var(--tomato-ink); }
.stamp2 small { font: 800 9px var(--font-body); letter-spacing: 1px; }
.pm {
  position: absolute;
  top: 30px; right: 104px;
  display: grid;
  place-items: center;
  width: 74px; height: 74px;
  border: 2px solid rgba(29, 27, 25, .45);
  border-radius: 50%;
  font: 700 10px/1.2 var(--font-type);
  text-align: center;
  color: rgba(29, 27, 25, .6);
  transform: rotate(-12deg);
}
.env .body { position: absolute; left: 26px; right: 26px; bottom: 22px; }
.env .to { font: 700 25px/1.05 var(--font-hand); }
.env .body > p:not(.kick):not(.to):not(.sub) { max-width: 360px; margin-top: 6px; font-size: 14.5px; line-height: 1.45; }
.env .sub { margin-top: 8px; font: 700 22px var(--font-hand); }
.arr-d { display: none; }
.letter-w { filter: var(--lift); transform: rotate(-1.2deg); }
.letter { position: relative; padding: 20px 18px 14px; background-color: #fff; }
.letter .tape { left: 50%; top: -14px; transform: translateX(-50%) rotate(-3deg); }
.letter iframe { display: block; width: 100%; height: 320px; border: 0; background: #fff; }

/* ---- the drawer ---- */
.odds { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.odds .col { position: relative; display: flex; flex-direction: column; gap: 44px; }

.qcard { padding: 24px 26px 26px; border-radius: 10px; background-color: var(--sky); transform: rotate(-.8deg); filter: var(--lift); }
.qcard .q { margin: 8px 0 16px; font: 700 34px/1.02 var(--font-hand); }
.ans { position: relative; perspective: 900px; }
.ans-body { padding: 14px; border-radius: 6px; background: rgba(255, 255, 255, .6); }
.ans-body p { margin-bottom: 12px; font-size: 15px; line-height: 1.5; }
.ans-body .vid { border-radius: 6px; }
.ans-body .play { width: 66px; height: 66px; margin: -33px 0 0 -33px; }
.ans-body .go { display: inline-block; margin-top: 10px; font-weight: 800; }
.flap {
  position: absolute;
  z-index: 2;
  inset: -4px;
  display: grid;
  place-content: center;
  border: 0;
  border-radius: 6px;
  font: 700 30px var(--font-hand);
  background-color: var(--mustard);
  filter: var(--lift);
  cursor: pointer;
  transform-origin: top center;
  transition: transform .6s cubic-bezier(.3, 1.25, .5, 1), opacity .2s .4s;
}
.flap small { display: block; font: 700 13px var(--font-body); }
html:not(.js) .flap { display: none; }
html.js .qcard:not(.open) .ans-body { visibility: hidden; }
.qcard.open .flap {
  transform: rotateX(84deg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .6s cubic-bezier(.3, 1.25, .5, 1), opacity .2s .4s, visibility 0s .6s;
}

.gig-w { filter: var(--lift); transform: rotate(1.2deg); }
.gig {
  display: grid;
  grid-template-columns: 1fr 64px;
  color: var(--pink);
  background-color: #26201f;
  -webkit-mask: radial-gradient(circle 11px at calc(100% - 64px) 0, #0000 97%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 11px at calc(100% - 64px) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 11px at calc(100% - 64px) 0, #0000 97%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 11px at calc(100% - 64px) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}
.gig .main { padding: 22px 24px; }
.gig .pres { font: 700 11px var(--font-type); letter-spacing: 2px; text-transform: uppercase; color: #d9cfc8; }
.gig h2 { margin: 6px 0 8px; font: 400 38px/1 var(--font-head); }
.gig p { font-size: 14.5px; line-height: 1.5; color: #efe6df; }
.gig .pres { color: #d9cfc8; }
.gig a { display: inline-block; margin-top: 10px; font-weight: 800; color: var(--mustard); }
.gig .stub { display: flex; align-items: center; justify-content: center; border-left: 2px dashed rgba(245, 169, 195, .5); writing-mode: vertical-rl; font: 700 13px var(--font-type); letter-spacing: 3px; }

.score-w { filter: var(--lift); transform: rotate(-1deg); }
.score { padding: 22px 24px; background-color: var(--white); }
.score h3 { margin: 6px 0 12px; font: 400 30px/1.05 var(--font-head); }
.score table { width: 100%; border-collapse: collapse; font: 13px var(--font-type); }
.score th, .score td { padding: 6px 8px; border: 1px solid #b8c9b0; text-align: left; }
.score th { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: #dfe9d8; }
.score td.r { text-align: right; font-weight: 700; }
.score a { display: inline-block; margin-top: 12px; font-weight: 800; }

.odds .key { position: relative; width: 110px; margin: -24px 0 0 auto; }

@media (max-width: 860px) {
  .news-feat, .odds { grid-template-columns: minmax(0, 1fr); }
  .arr-r { display: none; }
  .arr-d { display: inline; }
}
@media (max-width: 760px) {
  .title-q h1 { font-size: 42px; }
  .env { aspect-ratio: auto; padding: 118px 20px 20px; }
  .env .body { position: static; }
  .env-w, .letter-w, .qcard, .gig-w, .score-w { transform: rotate(0); }
  .letter { padding: 18px 10px 10px; }
  .qcard { padding: 20px 16px 22px; }
  .qcard .q { font-size: 28px; }
  .gig h2 { font-size: 30px; }
  .gig { grid-template-columns: 1fr 48px; }
  .score { padding: 18px 14px; }
  .score th, .score td { padding: 5px 6px; }
  .odds .key { width: 90px; }
}