/* Yanga v8 · the Archive: four self-dealing albums + the "Now showing" reel. */

.arc-sub { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1.4rem; margin: clamp(1.6rem, 3vw, 2.6rem) 0 1rem; }
.arc-sub__t { margin: 0; font: 400 clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem)/1 var(--sc-font-display); }
.arc-sub .howto { margin: 0; }

/* -------------------------------------------------------------- albums */
.albums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.6vw, 2.6rem); padding: 1rem 0 .5rem; }
.album { position: relative; display: grid; gap: .9rem; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.album:focus-visible { outline: 3px solid var(--orange); outline-offset: 8px; border-radius: 6px; }
.album__deck { position: relative; display: block; aspect-ratio: 4 / 5; margin: 6% 8% 14px; }
.album__card { position: absolute; inset: 0; display: block; padding: 7px 7px 24px; background: #fffdf8; border-radius: 3px;
  box-shadow: 0 1px 1px rgb(40 25 10 / .12), 0 10px 22px -8px rgb(40 25 10 / .35);
  transition: transform 520ms cubic-bezier(.2, .9, .25, 1), opacity 380ms, box-shadow 400ms; transform-origin: 50% 80%; }
.album__card img { width: 100%; height: 100%; object-fit: cover; display: block; background: #e8dfcf; }
.album__card[data-slot="0"] { z-index: 5; transform: rotate(-2deg); }
.album__card[data-slot="1"] { z-index: 4; transform: translate(9px, -7px) rotate(5deg); }
.album__card[data-slot="2"] { z-index: 3; transform: translate(-11px, -4px) rotate(-8deg); }
.album__card[data-slot="3"] { z-index: 2; transform: translate(14px, 5px) rotate(10deg); }
.album__card[data-slot="4"] { z-index: 1; transform: translate(-6px, 9px) rotate(-12deg); }
/* the top print leaves the deck */
.album__card.is-out { z-index: 6; opacity: .0; transform: translate(-46%, -34%) rotate(-26deg) scale(1.04); transition: transform 430ms cubic-bezier(.5, 0, .75, 0), opacity 430ms ease-in; }
/* point at an album and the prints fan out */
@media (hover: hover) {
  .album:hover .album__card[data-slot="0"] { transform: translateY(-10px) rotate(0deg) scale(1.03); box-shadow: 0 1px 1px rgb(40 25 10 / .12), 0 22px 34px -12px rgb(40 25 10 / .45); }
  .album:hover .album__card[data-slot="1"] { transform: translate(34%, -2%) rotate(12deg); }
  .album:hover .album__card[data-slot="2"] { transform: translate(-34%, -1%) rotate(-12deg); }
  .album:hover .album__card[data-slot="3"] { transform: translate(52%, 6%) rotate(20deg); }
  .album:hover .album__card[data-slot="4"] { transform: translate(-52%, 8%) rotate(-20deg); }
}
.album__tab { position: absolute; z-index: 8; left: 2%; top: 0; padding: .32rem .6rem; background: var(--green); color: var(--bone); rotate: -6deg;
  font: 800 .66rem/1 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 4px 10px rgb(0 0 0 / .2); }
.album:nth-child(2) .album__tab { background: var(--cognac); rotate: 5deg; left: auto; right: 4%; }
.album:nth-child(3) .album__tab { background: var(--ink); }
.album:nth-child(4) .album__tab { background: var(--orange); color: var(--ink); rotate: 4deg; left: auto; right: 4%; }
.album__meta { display: grid; gap: .15rem; text-align: center; padding-top: .3rem; }
.album__name { font: 400 clamp(1.15rem, 1rem + .6vw, 1.5rem)/1.1 var(--sc-font-display); color: var(--green); }
.album:nth-child(even) .album__name { color: var(--cognac); }
.album__n { font-size: .9rem; color: var(--ink-2, #5c5148); }
.album__n b { color: var(--ink); }
.album__open { justify-self: center; display: inline-flex; gap: .35rem; align-items: center; padding: .45rem .9rem; border-radius: 99px;
  border: 1px solid color-mix(in oklab, var(--green) 35%, transparent); color: var(--green); font: 700 .84rem/1 var(--sc-font-text); transition: background 250ms, color 250ms; }
.album__open i { font-style: normal; transition: translate 250ms; }
.album:hover .album__open, .album:focus-visible .album__open { background: var(--green); color: var(--bone); }
.album:hover .album__open i { translate: 3px 0; }

/* -------------------------------------------------------- now showing */
.reel { position: relative; margin-top: .4rem; padding: clamp(1rem, 2.4vw, 2rem) 0 1.2rem; border-radius: 18px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 30%, #2a4a3a 0%, var(--green) 45%, var(--green-deep) 100%); color: var(--bone); }
.reel::after { content: ""; position: absolute; inset: auto 0 0; height: 38%; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 100%, rgb(226 119 47 / .14), transparent 70%); }
/* the cinema sign: a row of bulbs chasing round the words */
.reel__marquee { display: flex; justify-content: center; margin-bottom: clamp(.8rem, 2vw, 1.4rem); }
.reel__marquee span { position: relative; padding: .55rem 1.4rem; border-radius: 6px; background: var(--ink);
  font: 800 .78rem/1 var(--sc-font-text); letter-spacing: .32em; text-transform: uppercase; color: var(--cognac-lit); }
.reel__marquee span::before { content: ""; position: absolute; inset: -5px; border-radius: 9px; z-index: -1;
  background: repeating-linear-gradient(90deg, var(--orange) 0 4px, transparent 4px 11px) top / 22px 4px repeat-x,
              repeating-linear-gradient(90deg, var(--orange) 0 4px, transparent 4px 11px) bottom / 22px 4px repeat-x, var(--ink);
  animation: bulbs 1.1s steps(2) infinite; }
@keyframes bulbs { to { background-position: 11px 0, -11px 100%, 0 0; } }

.reel__stage { position: relative; height: clamp(330px, 40vw, 470px); perspective: 1300px; perspective-origin: 50% 40%; transform-style: preserve-3d; touch-action: pan-y; user-select: none; }
.reel__card { position: absolute; left: 50%; top: 0; width: clamp(170px, 19vw, 250px); aspect-ratio: 9 / 16; max-height: 100%; margin-left: calc(clamp(170px, 19vw, 250px) / -2);
  padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: #0d1a14; cursor: pointer;
  transition: transform 520ms cubic-bezier(.3, .9, .25, 1), opacity 380ms, filter 380ms; filter: brightness(.55) saturate(.8);
  box-shadow: 0 24px 50px -18px rgb(0 0 0 / .7); -webkit-box-reflect: below 6px linear-gradient(transparent 72%, rgb(255 255 255 / .16)); }
.reel__card img, .reel__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.reel__vid { z-index: 1; }
.reel__card.is-near { filter: brightness(.78) saturate(.9); }
.reel__card.is-centre { filter: none; }
/* the middle film wears its sprocket holes */
.reel__card.is-centre::before, .reel__card.is-centre::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; width: 13px; background: #0b0b0b;
  -webkit-mask: linear-gradient(90deg, #000 0 3px, transparent 3px 10px, #000 10px), repeating-linear-gradient(180deg, transparent 0 4px, #000 4px 11px);
          mask: linear-gradient(90deg, #000 0 3px, transparent 3px 10px, #000 10px), repeating-linear-gradient(180deg, transparent 0 4px, #000 4px 11px); }
.reel__card.is-centre::before { left: 0; }
.reel__card.is-centre::after { right: 0; }
.reel__card:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.reel__no { position: absolute; z-index: 3; left: 18px; top: 10px; font: 400 1.2rem/1 var(--sc-font-display); color: var(--bone); text-shadow: 0 2px 8px rgb(0 0 0 / .6); }
.reel__card.is-centre .reel__no::after { content: "  ▶ playing"; font: 700 .62rem/1 var(--sc-font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--cognac-lit); vertical-align: 3px; }

.reel__bar { position: relative; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .8rem;
  width: min(760px, calc(100% - 2rem)); margin: 1rem auto 0; }
.reel__nav { width: 48px; height: 48px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--bone) 40%, transparent); background: transparent; color: var(--bone);
  font: 400 1.7rem/1 var(--sc-font-display); cursor: pointer; transition: background 200ms, color 200ms; }
.reel__nav:hover { background: var(--bone); color: var(--green); }
.reel__info { min-width: 0; text-align: center; }
.reel__cap { margin: 0 0 .5rem; min-height: 2.5em; font: 400 clamp(1rem, .9rem + .4vw, 1.25rem)/1.25 var(--sc-font-display); color: var(--bone); white-space: pre-wrap; }
.reel__strip { display: flex; justify-content: center; gap: 5px; }
.reel__strip i { width: 16px; height: 9px; border-radius: 2px; background: color-mix(in oklab, var(--bone) 22%, transparent); transition: background 300ms, width 300ms; }
.reel__strip i.is-on { width: 30px; background: var(--orange); }
.reel__watch { white-space: nowrap; }
.reel__watch svg { width: 18px; height: 18px; margin-right: .35rem; vertical-align: -3px; }

@media (max-width: 1000px) {
  .albums { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.2rem; }
}
@media (max-width: 640px) {
  .albums { gap: 1.6rem 1rem; }
  .album__deck { margin: 8% 10% 0; }
  .album__card { padding: 5px 5px 16px; }
  .album__open { font-size: .78rem; padding: .4rem .7rem; }
  .reel { border-radius: 12px; margin-inline: -4px; }
  .reel__stage { height: 330px; }
  .reel__card { width: 170px; margin-left: -85px; }
  .reel__bar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .reel__watch { grid-column: 1 / -1; justify-self: center; }
  .reel__nav { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .album__card, .reel__card { transition: none; }
  .reel__marquee span::before { animation: none; }
}