/* ── Play page styles ── */
/* Loaded only by play.html */

body.page-play .nav-back { display: none; }

body.page-play {
  --bg: #0c0906;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0.3'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--mono);
  min-height: 100vh;
  cursor: none;
}
body.page-play:not(.theme-light) {
  --ink: rgba(255,255,255,0.92);
  --ink2: rgba(255,255,255,0.72);
  --muted: rgba(255,255,255,0.4);
  --border: rgba(255,255,255,0.1);
  --bord2: rgba(255,255,255,0.2);
  --bg2: rgba(255,255,255,0.08);
}
body.page-play.theme-light {
  --bg: #fefefe;
}
body.page-play.theme-light .play-card {
  background: rgba(255,255,255,0.55);
}

/* ── NAV (dark by default; theme-light toggle, matching about page) ── */
.nav-r-cs {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-self: end;
}
.cs-theme-toggle {
  background: none;
  border: 0.5px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.5);
  height: 32px;
  border-radius: 100px;
  cursor: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  padding: 0 12px;
}
.cs-theme-toggle svg {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
  display: block;
}
.cs-theme-toggle:hover { color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.5); }
.cs-theme-toggle:hover svg { transform: rotate(20deg) scale(1.15); }
@keyframes spin-in {
  from { transform: rotate(-90deg) scale(0.6); opacity: 0; }
  to   { transform: rotate(0deg)  scale(1);   opacity: 1; }
}
.cs-theme-toggle.spin svg { animation: spin-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

body.page-play.theme-light .nav { background: var(--bg) !important; border-color: transparent !important; }
body.page-play.theme-light .nav-logo { color: rgba(30,28,24,0.88) !important; }
body.page-play.theme-light .nl { color: var(--muted) !important; }
body.page-play.theme-light .nl:hover,
body.page-play.theme-light .nl.on { color: var(--ink) !important; }
body.page-play.theme-light .nc {
  color: var(--ink) !important;
  border-color: var(--bord2) !important;
}
body.page-play.theme-light .nc:hover { background: var(--bg2) !important; color: var(--ink) !important; }
body.page-play.theme-light .cs-theme-toggle {
  border-color: rgba(30,28,24,0.22);
  color: rgba(30,28,24,0.5);
}
body.page-play.theme-light .cs-theme-toggle:hover {
  color: rgba(30,28,24,0.9);
  border-color: rgba(30,28,24,0.5);
}

/* ── MISSING-IMAGE PLACEHOLDER (shared pattern with case-study pages) ── */
.media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 80px;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.03),
    rgba(255,255,255,0.03) 10px,
    rgba(255,255,255,0.06) 10px,
    rgba(255,255,255,0.06) 20px
  );
  border: 1px dashed rgba(255,255,255,0.25);
  border-radius: 6px;
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
}
.theme-light .media-placeholder {
  background: repeating-linear-gradient(
    45deg,
    rgba(0,0,0,0.03),
    rgba(0,0,0,0.03) 10px,
    rgba(0,0,0,0.05) 10px,
    rgba(0,0,0,0.05) 20px
  );
  border-color: rgba(0,0,0,0.2);
}
.media-placeholder-text {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.55);
  word-break: break-all;
}
.theme-light .media-placeholder-text { color: rgba(30,28,24,0.55); }
.media-placeholder-kind {
  display: block;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 4px;
}

/* ── HEADER ── */
.pl-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 56px 48px 100px;
}
.pl-head { position: relative; margin-bottom: 36px; animation: pl-fu 0.6s ease both; }
@keyframes pl-fu { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.pl-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 8.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.pl-eyebrow::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 100 100' fill='%23c4687a'%3E%3Cg transform='translate(50,50)'%3E%3Cpath d='M0,0 C14,-8 14,-38 0,-46 C-14,-38 -14,-8 0,0Z' transform='rotate(0)'/%3E%3Cpath d='M0,0 C14,-8 14,-38 0,-46 C-14,-38 -14,-8 0,0Z' transform='rotate(45)'/%3E%3Cpath d='M0,0 C14,-8 14,-38 0,-46 C-14,-38 -14,-8 0,0Z' transform='rotate(90)'/%3E%3Cpath d='M0,0 C14,-8 14,-38 0,-46 C-14,-38 -14,-8 0,0Z' transform='rotate(135)'/%3E%3Cpath d='M0,0 C14,-8 14,-38 0,-46 C-14,-38 -14,-8 0,0Z' transform='rotate(180)'/%3E%3Cpath d='M0,0 C14,-8 14,-38 0,-46 C-14,-38 -14,-8 0,0Z' transform='rotate(225)'/%3E%3Cpath d='M0,0 C14,-8 14,-38 0,-46 C-14,-38 -14,-8 0,0Z' transform='rotate(270)'/%3E%3Cpath d='M0,0 C14,-8 14,-38 0,-46 C-14,-38 -14,-8 0,0Z' transform='rotate(315)'/%3E%3C/g%3E%3C/svg%3E");
  flex-shrink: 0;
}
.pl-title-flourish {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.42em;
  letter-spacing: 0;
  color: var(--rose);
  vertical-align: middle;
  margin-left: 4px;
  opacity: 0.85;
}
.pl-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 10px;
}
.pl-title em { font-style: normal; color: inherit; }
.pl-sub {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.6;
  color: var(--ink2);
  white-space: nowrap;
}

/* ── GRID ── */
.pl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  grid-auto-flow: dense;
  gap: 18px;
}
.pl-empty {
  display: none;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--muted);
  padding: 40px 0;
}
.pl-empty.show { display: block; }

/* ── CARD ── */
.play-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  cursor: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, grid-column 0.3s ease;
}
.play-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.16);
}
.play-card.open {
  grid-column: 1 / -1;
  cursor: none;
  z-index: 1;
}
.play-card.open::after {
  content: '';
  position: absolute;
  inset: -60px -50px;
  z-index: -1;
  border-radius: 30px;
  background:
    radial-gradient(closest-side, #e0295a 0%, transparent 70%),
    radial-gradient(closest-side, #3c56d6 0%, transparent 70%);
  background-position: 15% 50%, 85% 50%;
  background-repeat: no-repeat;
  background-size: 60% 140%, 60% 140%;
  opacity: 0.55;
  filter: blur(46px);
  pointer-events: none;
  animation: bio-fan-glow 14s ease-in-out infinite;
}
@keyframes bio-fan-glow {
  0%   { background-position: 28% 50%, 72% 50%; background-size: 60% 90%, 60% 90%; }
  25%  { background-position: 34% 40%, 64% 62%; background-size: 68% 100%, 52% 78%; }
  50%  { background-position: 22% 58%, 78% 42%; background-size: 52% 78%, 68% 100%; }
  75%  { background-position: 32% 46%, 68% 56%; background-size: 64% 96%, 58% 86%; }
  100% { background-position: 28% 50%, 72% 50%; background-size: 60% 90%, 60% 90%; }
}
.play-card-media {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg2);
}
.play-card.open .play-card-media { aspect-ratio: 16 / 8; }
.play-card-media img,
.play-card-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.4s ease;
}
.play-card:hover .play-card-media img,
.play-card:hover .play-card-media video { transform: scale(1.04); }

.play-card-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12,9,6,0.55);
  backdrop-filter: blur(6px);
  border: 0.5px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  color: #fff;
  cursor: none;
  transition: transform 0.25s ease, background 0.2s ease;
}
.play-card-toggle:hover { background: rgba(12,9,6,0.75); }
.play-card.open .play-card-toggle { transform: rotate(45deg); }
.play-card-plus {
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
}

.play-card-panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  opacity: 0;
  transition: grid-template-rows 0.35s ease, opacity 0.25s ease;
}
.play-card.open .play-card-panel {
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.35s ease, opacity 0.3s ease 0.1s;
}
.play-card-panel-inner { min-height: 0; overflow: hidden; padding: 18px 20px 22px; }
.play-card-title {
  font-family: var(--serif);
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--ink);
  margin-bottom: 6px;
}
.play-card-desc {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(12.5px, 1.1vw, 14px);
  line-height: 1.65;
  color: var(--ink2);
  margin: 0;
}
.play-card-slideshow {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.play-card-slideshow img {
  height: 320px;
  width: auto;
  border-radius: 8px;
  flex-shrink: 0;
  display: block;
  background: var(--bg2);
}

@media (max-width: 900px) {
  .pl-wrap { padding: 40px 24px 72px; }
}
@media (max-width: 700px) {
  .pl-sub { white-space: normal; }
}
@media (max-width: 560px) {
  .pl-wrap { padding: 32px 16px 56px; }
  .pl-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .play-card.open .play-card-media { aspect-ratio: 4 / 3; }
}