/* ==========================================================================
   PLOP! — the parts of the site that would ordinarily be cards.

   The collage, how it works, the party tickets, the information for grown-ups
   and the FAQ. Every one of these is where a landing page reaches for a grid of
   rounded rectangles, and none of them is one here: three physical objects, a
   stack of tickets you pull one out of, four numbers stamped on the table, and
   six strips of folded paper.
   ========================================================================== */

/* --- the collage moment -------------------------------------------------- */
/* One composed image, held for a moment, with a real headline over it. The
   lettering inside the photograph is decoration and is never read as content —
   the H2 above it is the only heading here. */
.scrap__hold { position: relative; }
.scrap__photo {
  position: relative;
  --tilt: 0deg;
  box-shadow: var(--lift-photo);
  border: .6rem solid #fff;
}
/* the collage is busy in every corner, so the print carries its own shade in
   the one corner the headline needs — inside the photograph, not a grey panel
   sitting on the table beside it */
.scrap__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, rgba(14, 10, 6, .78) 0%, rgba(14, 10, 6, .34) 34%, transparent 62%);
  pointer-events: none;
}
.scrap__headline {
  position: absolute;
  left: clamp(1.5rem, 3vw, 3rem);
  bottom: clamp(1.5rem, 6vw, 5rem);
  max-width: 12ch;
  color: var(--paper);
  text-shadow: 0 3px 18px rgba(20, 14, 10, .55);
  z-index: 3;
}
.scrap__note {
  position: absolute;
  right: 3%;
  top: -1.8rem;
  color: var(--ink-soft);
  z-index: 3;
}
@media (max-width: 899px) {
  .scrap__headline { position: static; color: var(--ink); text-shadow: none; margin-top: 1rem; }
  .scrap__note { position: static; margin-top: .5rem; }
}

/* --- how it works -------------------------------------------------------- */
.how__title { color: var(--ink-soft); }
.how__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 2.4rem);
  margin: clamp(1.2rem, 3vw, 2rem) 0 clamp(1.5rem, 4vw, 2.6rem);
}
/* the three steps are objects dropped on a table, so they sit at different
   heights: three equal boxes in a row is the feature grid the brief rules out */
.how__step { rotate: var(--tilt, 0deg); }
.how__step:nth-child(1) { margin-top: 1.6rem; }
.how__step:nth-child(2) { margin-top: 4.2rem; }
.how__step:nth-child(3) { margin-top: .4rem; }
.how__obj {
  position: relative;
  padding: 1.4rem 1.3rem 1.5rem;
  background: var(--paper);
  box-shadow: var(--lift-card);
  height: 100%;
}
/* three different objects, so three steps do not read as three cards */
.how__obj--ticket {
  background: var(--butter);
  -webkit-mask: radial-gradient(circle at left center, transparent 10px, #000 10.5px),
                radial-gradient(circle at right center, transparent 10px, #000 10.5px);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle at left center, transparent 10px, #000 10.5px),
        radial-gradient(circle at right center, transparent 10px, #000 10.5px);
  mask-composite: intersect;
}
.how__obj--note {
  background: #fff;
  clip-path: polygon(0 2%, 22% 0, 55% 3%, 84% 0, 100% 3%, 98% 30%, 100% 60%,
                     99% 97%, 72% 100%, 44% 97%, 16% 100%, 0 98%, 2% 62%, 0 30%);
}
.how__obj--stamp {
  background: var(--turquoise);
  border: 3px dashed rgba(255, 255, 255, .75);
}
.how__n {
  display: block;
  font-family: var(--display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--tomato);
}
.how__obj--stamp .how__n { color: #fff; }
.how__steptitle { margin: .4rem 0 .5rem; }
.how__stepbody { font-size: var(--t-small); color: var(--ink-soft); }
.how__cta { --tilt: -1.6deg; }

/* --- the party tickets --------------------------------------------------- */
.tickets__title { max-width: 14ch; }
.tickets__body { margin-top: .8rem; }
.tickets__hint { margin-top: .4rem; }

.tickets__stage {
  display: grid;
  grid-template-columns: minmax(15rem, 22rem) 1fr;
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: start;
  margin-top: clamp(1.4rem, 4vw, 2.6rem);
}

.tickets__stack { position: relative; display: grid; }
.partyticket {
  position: relative;
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  padding: 1.1rem 1.2rem 1.1rem 2.4rem;
  border: 0;
  background: var(--c);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--lift-card);
  rotate: var(--tilt, 0deg);
  translate: 0 calc(var(--depth) * 4.6rem);
  transition: translate var(--t-mid) var(--push), box-shadow var(--t-fast);
  z-index: calc(10 - var(--depth));
}
/* the pulled-out ticket slides left, out of the stack */
.partyticket.is-out {
  translate: -1.1rem calc(var(--depth) * 4.6rem);
  box-shadow: var(--lift-held);
}
.partyticket__stub {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1.5rem;
  border-right: 2px dashed rgba(23, 23, 23, .3);
}
.partyticket__name { display: block; font-size: 1.05rem; letter-spacing: -.01em; }
.partyticket__line { display: block; font-size: var(--t-small); color: rgba(23,23,23,.72); }

/* the stack is absolutely stacked, so the container needs its own height */
.tickets__stack { min-height: 19rem; }

.tickets__sheet {
  background: #fff;
  padding: clamp(1.2rem, 3vw, 2rem);
  box-shadow: var(--lift-card);
  rotate: .5deg;
}
.tickets__sheet.is-fresh { animation: sheetin 320ms var(--settle); }
@keyframes sheetin {
  from { opacity: 0; transform: translateY(6px) rotate(-.8deg); }
  to   { opacity: 1; transform: none; }
}
.tickets__line { margin: .5rem 0 1rem; color: var(--ink-soft); }
.tickets__includes { display: flex; flex-direction: column; gap: .45rem; }
.tickets__includes li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--t-body);
}
.tickets__includes li::before {
  content: '';
  position: absolute;
  left: 0; top: .5em;
  width: .8rem; height: .8rem;
  background: var(--turquoise);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.tickets__price { margin: 1.2rem 0 1rem; color: var(--tomato); }

/* --- for the grown-ups --------------------------------------------------- */
.info__title { color: var(--ink-soft); }
.info__rows {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.8rem, 2.5vw, 2rem);
  margin: clamp(1rem, 3vw, 1.8rem) 0 clamp(2rem, 6vw, 3.4rem);
}
.info__row {
  rotate: var(--tilt, 0deg);
  padding: 1rem 0 .9rem;
  border-top: 3px solid var(--ink);
}
.info__k { display: block; color: var(--ink-soft); margin-bottom: .3rem; }

.info__statements { display: flex; flex-direction: column; gap: .1rem; margin-bottom: 1.4rem; }
.info__statement { color: var(--ink); }
.info__statement:nth-child(2) { color: var(--cobalt); margin-left: clamp(0rem, 4vw, 3rem); }
.info__statement:nth-child(3) { color: var(--tomato); margin-left: clamp(0rem, 8vw, 6rem); }

/* --- the FAQ: folded strips ---------------------------------------------- */
.faq__title { color: var(--ink-soft); }
.faq__hint { margin: .3rem 0 1.2rem; }
.faq__strips { display: flex; flex-direction: column; gap: .7rem; }

.strip {
  rotate: var(--tilt, 0deg);
  background: var(--c);
  box-shadow: var(--lift-scrap);
}
.strip__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.strip__qtext { font-size: clamp(1rem, 2.4vw, 1.4rem); }
/* the fold mark: a corner that turns down when the strip is open */
.strip__mark {
  flex: 0 0 auto;
  width: 1.4rem; height: 1.4rem;
  background: rgba(23, 23, 23, .78);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  transition: transform var(--t-mid) var(--push);
}
.strip.is-open .strip__mark { transform: rotate(90deg); }

/* the unfold: a grid row from 0fr to 1fr, so no pixel height is ever measured */
.strip__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-mid) var(--push);
}
.strip.is-open .strip__a { grid-template-rows: 1fr; }
.strip__inner { overflow: hidden; }
.strip__inner > p {
  padding: 0 1.2rem 1.2rem;
  border-top: 1px dashed rgba(23, 23, 23, .28);
  padding-top: 1rem;
  background: rgba(255, 255, 255, .5);
}
/* with no script the strips are simply open documents */
html:not(.js) .strip__a { grid-template-rows: 1fr; }

@media (max-width: 899px) {
  .how__steps { grid-template-columns: 1fr; }
  /* stacked, the staggered heights are just gaps */
  .how__step:nth-child(1), .how__step:nth-child(2), .how__step:nth-child(3) { margin-top: 0; }
  .tickets__stage { grid-template-columns: 1fr; }
  .tickets__stack { min-height: 0; display: flex; flex-direction: column; gap: .5rem; }
  .partyticket { translate: none; }
  .partyticket.is-out { translate: -.6rem 0; }
  .info__rows { grid-template-columns: repeat(2, 1fr); }
}