/* ==========================================================================
   THE PIANO LOUNGE | CHANNEL I — "One Key, Five Colours".
   The show's logo is a pair of piano keys, so the page is played on a
   keyboard: the season's line-up stands behind a real keyboard in the hero,
   the five episodes are five keys you can press, and the YouTube art is
   shown through the crop each screen really gets. Ivory and soft black,
   one Channel i red; each singer's colour lives only in their episode.
   ========================================================================== */

@property --g {
  syntax: "<color>";
  inherits: true;
  initial-value: #d0388f;
}

.pl-page {
  --ivory: #f4f0e8;
  --paper: #fffdf8;
  --sand: #ebe5d9;
  --ink: #131114;
  --ink-2: #1c191d;
  --text: #131114;
  --text-2: rgba(19, 17, 20, 0.66);
  --hair: rgba(19, 17, 20, 0.14);
  --red: #e20613;
  --ivory-2: rgba(244, 240, 232, 0.7);
  --ivory-hair: rgba(244, 240, 232, 0.16);
  --serif: "Instrument Serif", "Times New Roman", serif;
  --body: "Geist", var(--font-sans);
  --mono: "Google Sans Code", var(--font-mono);
  --ease-o: cubic-bezier(0.22, 1, 0.36, 1);
  background: var(--ivory);
  color: var(--text);
  font-family: var(--body);
}

.pl-page .site-header .brand,
.pl-page .site-header .nav { color: var(--ink); }

.pl-wrap {
  width: min(1160px, 100% - 32px);
  margin-inline: auto;
}

/* ---------- Shared type ---------- */
.pl-kick {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}

.pl-kick-d { color: var(--ivory-2); }

.pl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
}

.pl-eye {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pl-eye-n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
}

.pl-cols {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: start;
  margin-bottom: 64px;
}

.pl-h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 4.8vw, 68px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.pl-h2 em {
  font-style: italic;
  color: var(--red);
}

.pl-h3 {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ivory-2);
}

.pl-body p {
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-2);
}

.pl-body p:last-child { margin-bottom: 0; }

.pl-dark .pl-body p { color: var(--ivory-2); }

.pl-page figure { margin: 0; }

.pl-page [data-zoom] { cursor: zoom-in; }

.pl-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}

.pl-link svg {
  width: 11px;
  height: 11px;
}

.pl-facts a svg {
  display: inline;
  width: 10px;
  height: 10px;
  margin-left: 6px;
  vertical-align: 0;
}

/* ---------- The keyboard (built by pianolounge.js) ---------- */
.pl-kb {
  position: relative;
  display: flex;
  gap: 1px;
  padding-top: 7px;
  background: linear-gradient(180deg, #1d1a1c, #0c0a0c);
}

/* the show's red stripe becomes the keyboard's front lip */
.pl-kb::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  height: 5px;
  background: var(--red);
}

.pl-w {
  flex: 1;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, #d9d5cc 0%, #f7f5ef 14%, #fff 62%, #efebe3 100%);
  box-shadow: inset 0 -6px 0 #dcd6ca, inset 0 3px 5px rgba(0, 0, 0, 0.28);
  transform-origin: top;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.pl-w.is-down {
  transform: scaleY(0.985);
  background: linear-gradient(180deg, #cbc6bc 0%, #efece5 22%, #f6f3ed 100%);
  box-shadow: inset 0 -2px 0 #dcd6ca, inset 0 6px 9px rgba(0, 0, 0, 0.32);
}

.pl-bk {
  position: absolute;
  top: 7px;
  z-index: 2;
  height: 58%;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, #2a2729 0%, #0b0a0b 80%, #3a3638 100%);
  box-shadow: inset 0 -5px 0 #2b2829, 0 3px 4px rgba(0, 0, 0, 0.45);
  transform: translateX(-50%);
  transition: height 0.14s ease, box-shadow 0.14s ease;
}

.pl-bk.is-down {
  height: 56.5%;
  box-shadow: inset 0 -2px 0 #2b2829, 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* ---------- Hero: the line-up behind the keys ---------- */
.pl-hero {
  padding: 48px 0 104px;
}

.pl-stage {
  position: relative;
  aspect-ratio: 2460 / 1260;
  overflow: hidden;
  border-radius: 18px;
  background: radial-gradient(85% 90% at 50% 30%, #f7f7f6 0%, #dcdcdb 46%, #a7a6a6 100%);
  container-type: inline-size;
}

.pl-h1 {
  position: absolute;
  inset: 3.4% 0 auto;
  z-index: 1;
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 10.6cqw;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--ink);
}

.pl-h1 em {
  font-style: italic;
  color: var(--red);
}

.pl-crowd {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* the cover's dark band behind the singers */
.pl-band {
  position: absolute;
  inset: 67.9% 0 0;
  background: #2b2128;
}

.pl-sg {
  position: absolute;
  max-width: none;
  height: auto;
}

.pl-kb-hero {
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  height: 19%;
}

.pl-hero-foot {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: start;
  margin-top: 40px;
}

.pl-sub {
  margin: 0;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--text-2);
}

.pl-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 32px;
  margin: 0;
}

.pl-facts dt {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}

.pl-facts dd {
  margin: 6px 0 0;
  font-size: 17px;
  font-weight: 500;
}

.pl-facts a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}

/* ---------- Sections ---------- */
.pl-sec {
  padding: 120px 0;
}

.pl-dark {
  background: var(--ink);
  color: var(--ivory);
}

.pl-sand { background: var(--sand); }

/* ---------- 01 The episode keyboard ---------- */
.pl-eps {
  background:
    radial-gradient(55% 45% at 50% 52%, color-mix(in srgb, var(--g) 30%, transparent), transparent 72%),
    var(--ink);
  transition: --g 0.6s ease;
}

.pl-ep {
  max-width: 860px;
  margin: 0 auto;
}

.pl-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 40px 110px -30px color-mix(in srgb, var(--g) 75%, transparent), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.pl-scr {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 0.5s ease, transform 0.9s var(--ease-o);
}

.pl-scr.is-on {
  opacity: 1;
  transform: none;
}

.pl-scr:not(.is-on) { pointer-events: none; }

.pl-ep-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 22px 0 18px;
}

.pl-ep-now {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 17px;
  font-weight: 500;
}

.pl-ep-sw {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--g);
  box-shadow: 0 0 14px var(--g);
}

.pl-ep-t,
.pl-ep-hint {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--ivory-2);
}

.pl-ep-hint { margin: 0; }

.pl-ekeys {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  padding: 8px 8px 0;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #1d1a1c, #0c0a0c);
}

.pl-ekeys::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: 10px 10px 0 0;
  background: var(--red);
}

.pl-ebk {
  position: absolute;
  top: 8px;
  z-index: 2;
  width: 6.4%;
  height: 36%;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(180deg, #2a2729 0%, #0b0a0b 78%, #3a3638 100%);
  box-shadow: inset 0 -6px 0 #2b2829, 0 4px 6px rgba(0, 0, 0, 0.5);
  transform: translateX(-50%);
  pointer-events: none;
}

.pl-ek {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  height: 176px;
  padding: 14px 14px 18px;
  border: 0;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #d8d3c9 0%, #f8f6f0 12%, #fff 60%, #efebe2 100%);
  box-shadow: inset 0 -10px 0 #dcd5c8, 0 12px 22px rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font-family: var(--body);
  text-align: left;
  cursor: pointer;
  transform-origin: top;
  transition: transform 0.2s var(--ease-o), box-shadow 0.2s ease;
}

.pl-ek::before {
  content: "";
  position: absolute;
  inset: auto 14px 10px;
  height: 3px;
  border-radius: 3px;
  background: var(--c);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.pl-ek b {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 400;
  line-height: 1;
}

.pl-ek span {
  min-height: 2.5em;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-2);
}

.pl-ek:hover { transform: scaleY(0.99); }

.pl-ek[aria-selected="true"] {
  transform: scaleY(0.975);
  box-shadow: inset 0 -4px 0 #dcd5c8, inset 0 8px 14px rgba(0, 0, 0, 0.22), 0 4px 10px rgba(0, 0, 0, 0.35);
}

.pl-ek[aria-selected="true"]::before { opacity: 1; }

.pl-ek[aria-selected="true"] b { color: var(--c); }

.pl-ek:focus-visible {
  outline: 2px solid var(--g);
  outline-offset: 3px;
}

/* anatomy */
.pl-anat {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 56px;
  align-items: center;
  margin-top: 112px;
  padding-top: 72px;
  border-top: 1px solid var(--ivory-hair);
}

.pl-anat-fig { position: relative; }

.pl-anat-fig > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.pl-pin {
  position: absolute;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(226, 6, 19, 0.28);
  color: #fff;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.pl-legend {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pin;
}

.pl-legend li {
  position: relative;
  padding: 14px 0 14px 46px;
  border-bottom: 1px solid var(--ivory-hair);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ivory-2);
  counter-increment: pin;
}

.pl-legend li::before {
  content: counter(pin);
  position: absolute;
  left: 0;
  top: 14px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
}

.pl-legend b {
  display: block;
  color: var(--ivory);
  font-size: 17px;
  font-weight: 500;
}

/* ---------- 02 Setlist ---------- */
.pl-set {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 32px;
  align-items: stretch;
}

.pl-card {
  display: flex;
  flex-direction: column;
  padding: 34px 30px 26px;
  border: 1px solid var(--hair);
  border-radius: 4px;
  background: var(--paper);
  box-shadow: 0 34px 60px -42px rgba(19, 17, 20, 0.45);
}

.pl-card-k {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}

.pl-card-t {
  margin: 14px 0 22px;
  font-family: var(--serif);
  font-size: 38px;
  line-height: 1.1;
}

.pl-card-t em {
  font-style: italic;
  color: var(--red);
}

.pl-card-l {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hair);
}

.pl-card-l li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px dashed var(--hair);
  cursor: default;
}

.pl-card-l span {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
}

.pl-card-l b {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.15;
  transition: color 0.25s ease;
}

.pl-card-l li.is-hot b { color: var(--red); }

.pl-card-f {
  margin: auto 0 0;
  padding-top: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-2);
}

.pl-songs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-content: center;
}

.pl-song img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.pl-song { transition: opacity 0.3s ease; }

.pl-set.is-hovering .pl-song:not(.is-hot) { opacity: 0.4; }

/* ---------- 03 Feed collage: every poster at its true shape, nothing cropped ----------
   The 2:3 launch poster on the left matches the 2 × 3 squares on the right: with a gap g,
   its column is g/3 wider, so both sides end on the same line. */
.pl-bento {
  --gap: 16px;
  display: grid;
  grid-template-columns: calc(50% - var(--gap) / 3) calc(50% - var(--gap) * 2 / 3);
  gap: var(--gap);
  align-items: start;
}

.pl-bento-sq {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}

.pl-b img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* ---------- 04 Facebook covers ---------- */
.pl-fb-lead { margin-bottom: 16px !important; }

.pl-fb {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.pl-fb-lead img,
.pl-fb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--ivory-hair);
}

/* ---------- 05 YouTube: one picture, every screen ---------- */
.pl-dv-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pl-dv-l {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}

.pl-dv-devs {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: 99px;
  background: rgba(19, 17, 20, 0.07);
}

.pl-dv-b {
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 99px;
  background: transparent;
  color: var(--text-2);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.pl-dv-b:hover { color: var(--ink); }

.pl-dv-b[aria-pressed="true"] {
  background: var(--ink);
  color: var(--ivory);
}

.pl-dv-b:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.pl-dv-fig {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-top: 18px !important;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
}

.pl-dv-i {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.45s ease;
}

/* the window: what that screen shows (YouTube's 2560 × 1440 channel-art areas) */
.pl-dv-win {
  --x: 19.8%;
  --y: 35.31%;
  --w: 60.39%;
  --h: 29.38%;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 0 0 200vmax rgba(19, 17, 20, 0.66);
  pointer-events: none;
  transition: left 0.6s var(--ease-o), top 0.6s var(--ease-o), width 0.6s var(--ease-o), height 0.6s var(--ease-o);
}

.pl-dv[data-a="tv"] .pl-dv-win { --x: 0%; --y: 0%; --w: 100%; --h: 100%; }
.pl-dv[data-a="desktop"] .pl-dv-win { --x: 0%; --y: 35.31%; --w: 100%; --h: 29.38%; }
.pl-dv[data-a="tablet"] .pl-dv-win { --x: 13.77%; --y: 35.31%; --w: 72.46%; --h: 29.38%; }

.pl-dv-size {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(19, 17, 20, 0.82);
  color: #fff;
  font-family: var(--mono);
  font-size: 12px;
  font-style: normal;
}

/* ---------- Finale ---------- */
.pl-end {
  padding: 0 0 120px;
  background: var(--ink);
  color: var(--ivory);
}

.pl-kb-end {
  height: 84px;
  margin-bottom: 104px;
}

.pl-end-in {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 88px;
  align-items: center;
}

.pl-end-logo {
  display: block;
  width: 200px;
  height: auto;
}

.pl-end-t { max-width: 720px; }

.pl-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}

.pl-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px;
  border-radius: 99px;
  background: var(--ivory);
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.pl-btn svg {
  width: 12px;
  height: 12px;
}

.pl-btn:hover { background: #fff; }
.pl-btn:active { transform: scale(0.97); }

.pl-btn-ghost {
  background: transparent;
  color: var(--ivory);
  box-shadow: inset 0 0 0 1px var(--ivory-hair);
}

.pl-btn-ghost:hover {
  background: var(--ivory);
  color: var(--ink);
}

.pl-page .site-footer { padding-top: 40px; }

/* the Studio AH logo file sits on white; multiply drops that white box on the ivory footer */
.pl-page .footer-studio img { mix-blend-mode: multiply; }

/* ---------- Before the hero plays ---------- */
.pre-motion .pl-sg,
.pre-motion .pl-h1,
.pre-motion .pl-hero-foot > * {
  opacity: 0;
}

/* ---------- Tablet / mobile ---------- */
@media (max-width: 900px) {
  .pl-hero { padding: 36px 0 72px; }
  .pl-sec { padding: 84px 0; }
  .pl-end { padding-bottom: 84px; }
  .pl-kb-end { height: 64px; margin-bottom: 72px; }
  .pl-cols,
  .pl-hero-foot { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
  .pl-hero-foot { margin: 28px 0 0; }
  .pl-anat { grid-template-columns: 1fr; gap: 32px; margin-top: 72px; padding-top: 48px; }
  .pl-set { grid-template-columns: 1fr; }
  .pl-end-in { grid-template-columns: 1fr; gap: 40px; }
  .pl-end-logo { width: 140px; }
  .pl-fb { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  /* the line-up is too small at full width: crop the sides so the faces read */
  .pl-stage {
    aspect-ratio: 2460 / 2142;
    border-radius: 14px;
  }

  .pl-crowd { inset: 0 -35%; }

  .pl-h1 {
    top: 4%;
    font-size: 13.4cqw;
    line-height: 1.12;
  }

  .pl-kb-hero { height: 17%; }

  .pl-facts { gap: 16px 24px; }
  .pl-body p { font-size: 17px; }

  .pl-ep-bar { margin: 16px 0 14px; }
  .pl-ep-hint { display: none; }
  .pl-ekeys { gap: 3px; padding: 6px 5px 0; }
  .pl-ek { height: 116px; padding: 10px 8px 16px; }
  .pl-ebk { top: 6px; height: 34%; }
  .pl-ek b { font-size: 28px; }
  .pl-ek span { display: none; }
  .pl-ek::before { inset: auto 8px 8px; }

  .pl-card { padding: 26px 22px 20px; }
  .pl-card-t { font-size: 32px; }
  .pl-songs { grid-template-columns: 1fr; }

  .pl-bento { grid-template-columns: 1fr; --gap: 12px; }

  .pl-fb { grid-template-columns: 1fr; gap: 12px; }
  .pl-fb-lead { margin-bottom: 12px !important; }

  .pl-dv-top { flex-direction: column; align-items: stretch; }
  .pl-dv-devs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .pl-dv-b { padding: 0 8px; font-size: 13px; }

  .pl-btn { height: 48px; padding: 0 20px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .pl-w,
  .pl-bk,
  .pl-ek,
  .pl-scr,
  .pl-dv-win,
  .pl-btn { transition: none; }
}