.poster{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
  padding:clamp(20px,3vw,32px);
  background:var(--sand-2);
}
.poster__label,
.poster__foot{
  font-family:var(--f-head);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.poster__foot{
  margin-top:auto;
  text-transform:none;
  letter-spacing:0;
  font-size:.88rem;
  font-weight:600;
  color:var(--ink-2);
}
.poster__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:rgba(36,28,20,.1);
  border:1px solid rgba(36,28,20,.1);
}
.poster__cell{
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:1.45;
  background:var(--sand);
  color:var(--ink-2);
}
.poster__cell i{
  position:absolute;
  left:10px;
  top:8px;
  font-style:normal;
  font-family:var(--f-head);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--ink-3);
}
.poster__cell svg{width:26px;height:26px}
.poster__cell:nth-child(8){background:var(--accent-soft);color:var(--accent-deep)}
.poster__cell:nth-child(8) i{color:var(--accent-deep)}

.plate{
  position:relative;
  overflow:hidden;
  background:var(--sand-2);
}
.plate::before,
.plate::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.plate::before{
  width:76%;
  aspect-ratio:1;
  left:-16%;
  bottom:-24%;
  border:1.5px solid rgba(191,79,43,.32);
}
.plate::after{
  width:50%;
  aspect-ratio:1;
  right:-12%;
  top:-16%;
  border:1.5px solid rgba(36,28,20,.14);
}
.plate:nth-of-type(even)::before{left:auto;right:-16%;bottom:auto;top:-22%}
.plate:nth-of-type(even)::after{right:auto;left:-10%;top:auto;bottom:-14%}
.plate > *{position:relative;z-index:1}

.page-hero--journey{
  background-image:repeating-linear-gradient(180deg,rgba(36,28,20,.075) 0 1px,transparent 1px 36px);
  background-position:0 -1px;
}

.page-hero--sessions{
  background-image:
    repeating-linear-gradient(180deg,rgba(36,28,20,.06) 0 1px,transparent 1px 36px),
    repeating-linear-gradient(90deg,rgba(36,28,20,.06) 0 1px,transparent 1px 36px);
}

.page-hero--people{
  background-image:radial-gradient(rgba(36,28,20,.1) 1.4px,transparent 1.5px);
  background-size:22px 22px;
}

.page-hero--years{
  background-image:repeating-linear-gradient(45deg,rgba(36,28,20,.06) 0 1px,transparent 1px 28px);
}

.page-hero--seats{
  background-image:
    repeating-linear-gradient(180deg,rgba(36,28,20,.07) 0 1px,transparent 1px 72px),
    repeating-linear-gradient(90deg,rgba(36,28,20,.07) 0 1px,transparent 1px 72px);
  background-position:0 -1px,-1px 0;
}

.page-hero--join{
  background-image:repeating-radial-gradient(circle at 86% 46%,transparent 0 52px,rgba(36,28,20,.075) 52px 53px);
}

.page-hero--lights{
  background-color:var(--sand);
  background-size:cover;
  background-position:center 40%;
  background-repeat:no-repeat;
}
.page-hero--lights::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(242,229,209,.9);
  z-index:0;
}
.page-hero--lights > *{position:relative;z-index:1}

.motif{
  position:absolute;
  right:clamp(24px,6vw,90px);
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  z-index:0;
}

.motif--journey{display:flex;flex-direction:column;gap:15px;align-items:center}
.motif--journey .motif__rail{position:absolute;left:50%;top:6px;bottom:6px;width:1px;background:rgba(36,28,20,.14)}
.motif__stop{
  position:relative;
  width:13px;
  height:13px;
  border-radius:50%;
  border:1.5px solid rgba(36,28,20,.22);
  background:var(--sand);
}
.motif__stop.is-end{border-color:var(--accent);background:var(--accent)}

.motif--sessions{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;width:148px}
.motif__cell{aspect-ratio:1;border:1.5px solid rgba(36,28,20,.16)}
.motif__cell:nth-child(-n+8){background:rgba(255,116,58,.15);border-color:rgba(255,116,58,.3)}

.motif--people{display:flex;flex-wrap:wrap;width:172px}
.motif__ring{
  width:64px;
  height:64px;
  border-radius:50%;
  border:1.5px solid rgba(36,28,20,.16);
}
.motif__ring:nth-child(n+2){margin-left:-10px}
.motif__ring:nth-child(4){margin-left:0}
.motif__ring:nth-child(n+4){margin-top:-10px}
.motif__ring:nth-child(2n){border-color:rgba(191,79,43,.32)}

.motif--lights{
  top:0;
  transform:none;
  right:clamp(16px,4vw,60px);
  width:clamp(200px,22vw,290px);
  color:rgba(191,79,43,.42);
}
.motif--lights svg{width:100%;height:auto}

.motif--years{display:flex;flex-direction:column;gap:28px}
.motif--years::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:1px;background:rgba(36,28,20,.14)}
.motif__year{
  display:flex;
  align-items:center;
  gap:14px;
  font-family:var(--f-head);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.1em;
  color:rgba(36,28,20,.22);
}
.motif__year i{
  width:13px;
  height:13px;
  border-radius:50%;
  border:1.5px solid rgba(36,28,20,.22);
  background:var(--sand);
  flex:none;
  position:relative;
  z-index:1;
}
.motif__year.is-end{color:rgba(191,79,43,.55)}
.motif__year.is-end i{border-color:var(--accent);background:var(--accent)}

.motif--seats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:150px}
.motif__seat{aspect-ratio:1;border-radius:4px;border:1.5px solid rgba(36,28,20,.18)}
.motif__seat.is-taken{background:var(--accent);border-color:var(--accent)}

.page-hero--installments{
  background-image:repeating-linear-gradient(90deg,rgba(36,28,20,.07) 0 1px,transparent 1px 48px);
  background-position:-1px 0;
}

.motif--installments{display:flex;flex-direction:column;gap:11px;width:132px}
.motif__bar{height:13px;border-radius:3px;border:1.5px solid rgba(36,28,20,.18)}
.motif__bar:nth-child(-n+3){background:rgba(255,116,58,.28);border-color:rgba(255,116,58,.34)}

.motif--join{display:flex}
.motif__disc{
  width:122px;
  height:122px;
  border-radius:50%;
  border:1.5px solid rgba(36,28,20,.16);
}
.motif__disc:last-child{margin-left:-48px;border-color:rgba(191,79,43,.34)}

.history__item{position:relative}
.history__ghost{
  position:absolute;
  right:0;
  top:14px;
  font-family:var(--f-head);
  font-size:clamp(3.4rem,8vw,5.6rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.05em;
  color:rgba(36,28,20,.045);
  pointer-events:none;
  z-index:0;
}
.history__body{position:relative;z-index:1}

@media (max-width:1120px){
  .motif{display:none}
}

@media (max-width:820px){
  .history__ghost{display:none}
}

@media (max-width:560px){
  .poster__grid{grid-template-columns:repeat(4,1fr)}
  .poster__cell{aspect-ratio:1}
  .poster__cell svg{width:22px;height:22px}
}