/* Native portrait video: preserve the frame and keep controls on screen. */
.hk-page .interview-player {
  width: min(100%, 420px, 42.75svh);
  margin: 0 auto;
  color: #f0efed;
  background: #101010;
  border: 1px solid #737373;
  --button-secondary-color: #f0efed;
  --button-secondary-border: #737373;
}
.interview-player video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; background: #000; }
.interview-player figcaption { padding: 12px 16px; color: #c5c5c1; font-size: .8rem; line-height: 1.5; }
.interview-player figcaption a { display: inline-block; padding-block: 8px; color: #ff9b5c; text-decoration: underline; }
.interview-credits { display: flex; flex-wrap: wrap; gap: 20px 28px; margin-top: 28px; }
.interview-credits .interview-credit { display: flex; align-items: center; gap: 12px; }
.interview-credits span { color: #c5c5c1; }
.hk-page .article-index-grid--mixed > .article-index-card:first-child { grid-row: span 2; }
.interview-publication { margin-top: 24px; color: #c5c5c1; font-size: .85rem; }
.interview-production { margin-top: 36px; padding: 24px; border-left: 3px solid #ff741f; color: #f0efed; background: #242424; }
.interview-production dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 0; }
.interview-production dt { color: #c5c5c1; }
.interview-production dd { margin: 0; font-weight: 800; }
.article-body .interview-context {
  --interview-title: #f0efed;
  --interview-copy: #c5c5c1;
  --interview-accent: #ff9b5c;
  --interview-line: #737373;
  margin: 28px 0;
  padding: clamp(18px, 3vw, 28px);
  color: var(--interview-title);
  background: #242424;
  border: 1px solid var(--interview-line);
  --button-secondary-color: #f0efed;
  --button-secondary-border: #737373;
}
.article-body .interview-context h3 { margin: 0 0 18px; font-size: 1.35rem; line-height: 1.3; color: var(--interview-title); }
.article-body .interview-context p, .article-body .interview-context figcaption { color: var(--interview-copy); }
.article-body .interview-context a:not(.button) { color: var(--interview-accent); text-decoration: underline; text-underline-offset: .2em; }
/* The character and effects have their own space, never behind the article text. */
.article-body .interview-context--poison {
  --interview-title: #fcf4ff;
  --interview-copy: #eadef6;
  --interview-accent: #d7ff9f;
  --interview-line: #be91e5;
  color: #fcf4ff;
  background: #281337;
  border-left-width: 5px;
  --button-secondary-color: #fcf4ff;
  --button-secondary-border: #be91e5;
}
.article-body .interview-context--fire {
  --interview-title: #fff6e9;
  --interview-copy: #f2ddcd;
  --interview-accent: #ffbd7a;
  --interview-line: #c88c61;
  color: #fff6e9;
  background: #321b12;
  border-left-width: 5px;
  --button-secondary-color: #fff6e9;
  --button-secondary-border: #c88c61;
}
.article-body .interview-context--akuma {
  --interview-title: #fff3ed;
  --interview-copy: #f0d6d1;
  --interview-accent: #ffad96;
  --interview-line: #d5877b;
  color: #fff3ed;
  background: #301419;
  border-left-width: 5px;
  --button-secondary-color: #fff3ed;
  --button-secondary-border: #d5877b;
}
.article-body .interview-context--broadcast {
  --interview-title: #fff8e9;
  --interview-copy: #e8e0d0;
  --interview-accent: #ffc58b;
  --interview-line: #bfb095;
  color: #fff8e9;
  background: #23231f;
  border-left-width: 5px;
  --button-secondary-color: #fff8e9;
  --button-secondary-border: #bfb095;
}
.article-body .interview-context--spray {
  --interview-title: #fff4fb;
  --interview-copy: #f0deec;
  --interview-accent: #b2f6ee;
  --interview-line: #d38db6;
  color: #fff4fb;
  background: #30172d;
  border-left-width: 5px;
  --button-secondary-color: #fff4fb;
  --button-secondary-border: #d38db6;
}
.interview-context--spray .interview-context__motif {
  width: 106px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ce4c93;
  box-shadow: 16px -14px 0 -24px #b2f6ee;
}
.interview-context--spray .interview-context__motif--one { top: 12px; right: 8px; }
.interview-context--spray .interview-context__motif--two { width: 68px; bottom: 24px; left: 4px; background: #408d87; }
.interview-context--spray .interview-context__motif--three { width: 20px; top: 46px; left: 14px; background: #b2f6ee; }
.article-body .interview-context--organizer {
  --interview-title: #fff6e9;
  --interview-copy: #eadfce;
  --interview-accent: #ffc58b;
  --interview-line: #bcaa8a;
  color: #fff6e9;
  background: #25221c;
  border-left-width: 5px;
  --button-secondary-color: #fff6e9;
  --button-secondary-border: #bcaa8a;
}
.interview-context--organizer .interview-context__art {
  background: repeating-linear-gradient(0deg, transparent 0 28px, #ffc58b1a 28px 29px), repeating-linear-gradient(90deg, transparent 0 28px, #ffc58b1a 28px 29px);
}
.article-body img.interview-context__app-logo { width: 92%; height: auto; margin: 0; object-fit: contain; }
.article-body .interview-app-flow { display: grid; gap: 14px; margin: 22px 0; padding-left: 26px; }
.article-body .interview-app-flow li { margin: 0; padding: 16px; color: #fff6e9; background: #11100f; border-left: 3px solid #ffc58b; }
.interview-app-flow strong { display: block; margin-bottom: 6px; }
.interview-app-flow span { color: #eadfce; }
.article-body .interview-app-preview { margin: 28px 0; }
.article-body .interview-app-preview img { display: block; width: 100%; height: auto; margin: 0; border: 1px solid #737373; }
.interview-app-preview figcaption { margin-top: 12px; font-size: .85rem; line-height: 1.6; }
.interview-context__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  align-items: center;
  gap: 18px;
  margin: -8px 0 24px;
  border-bottom: 1px solid var(--interview-line);
}
.interview-context__heading { min-width: 0; padding-block: 16px; }
.article-body .interview-context__header h3 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.article-body .interview-context p.interview-context__kicker {
  margin: 0 0 12px;
  color: var(--interview-accent);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.interview-context__art {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  height: 238px;
  overflow: hidden;
  pointer-events: none;
}
.article-body img.interview-context__character { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; margin: 0; }
.interview-context__motif { position: absolute; z-index: 0; }
.interview-context--poison .interview-context__motif {
  width: 92px;
  aspect-ratio: 1;
  border: 1px solid #dfc6ff;
  border-radius: 50%;
  background: radial-gradient(circle at 28% 24%, #eee0ff 0%, #b880e0 12%, #804bab 40%, #42215b 72%);
  box-shadow: 0 0 22px #b880e030, inset -8px -10px 16px #28133780;
}
.interview-context--poison .interview-context__motif--one { top: 12px; right: 6px; }
.interview-context--poison .interview-context__motif--two { width: 62px; bottom: 20px; left: 2px; }
.interview-context--poison .interview-context__motif--three { width: 30px; top: 40px; left: 12px; background: radial-gradient(circle at 28% 24%, #f0ffce 0%, #b8dd87 14%, #627d40 55%, #32472c 90%); }
.interview-context--fire .interview-context__motif { width: 150px; height: 24px; transform: rotate(-35deg); background: linear-gradient(90deg, transparent, #d56b32, #ffce79, transparent); }
.interview-context--fire .interview-context__motif--one { top: 30px; left: 0; }
.interview-context--fire .interview-context__motif--two { bottom: 32px; right: 0; }
.interview-context--fire .interview-context__motif--three { top: 90px; right: -42px; height: 8px; }
.interview-context--akuma .interview-context__motif { width: 170px; aspect-ratio: 1; border: 8px solid #933c43; border-radius: 50%; }
.interview-context--akuma .interview-context__motif--one { top: 30px; right: 8px; }
.interview-context--akuma .interview-context__motif--two { width: 104px; bottom: 26px; left: 6px; border-width: 3px; border-color: #dc8779; }
.interview-context--akuma .interview-context__motif--three { display: none; }
.interview-context--akuma .interview-health__fill { background: #ffad96; }
.interview-context__microphone { position: relative; z-index: 1; width: 132px; height: 132px; color: #fff8e9; }
.interview-context--broadcast .interview-context__art { color: #fff8e9; background: repeating-linear-gradient(90deg, transparent 0 18px, #ffc58b18 18px 20px); }
.interview-context--broadcast .interview-context__motif { bottom: 45px; width: 8px; background: #ffc58b; }
.interview-context--broadcast .interview-context__motif--one { left: 18px; height: 36px; }
.interview-context--broadcast .interview-context__motif--two { right: 24px; height: 74px; }
.interview-context--broadcast .interview-context__motif--three { right: 40px; height: 46px; }
.article-body .interview-context p.interview-context__glossary { margin: 20px 0 0; font-size: .85rem; }
.interview-health { display: grid; gap: 18px; margin: 20px 0; }
.interview-health dt { color: #f0efed; font-weight: 700; }
.interview-health dd { margin: 6px 0 0; color: #f0efed; font-variant-numeric: tabular-nums; }
.interview-health__track { display: block; height: 10px; margin-top: 8px; background: #101010; }
.interview-health__fill { display: block; height: 100%; background: #ff741f; }
.article-body .interview-run { display: grid; gap: 12px; margin: 20px 0; padding: 0; list-style: none; counter-reset: interview-set; }
.article-body .interview-run li { position: relative; margin: 0; padding: 14px 14px 14px 52px; border-left: 3px solid #96d497; background: #101010; counter-increment: interview-set; }
.interview-run li::before { content: counter(interview-set); position: absolute; top: 14px; left: 18px; color: #c5c5c1; font-weight: 800; }
.article-body .interview-run .interview-run__loss { border-left-color: #ffb6a8; }
.interview-run__stage { display: block; margin-bottom: 6px; font-size: .78rem; color: #c5c5c1; }
.interview-run__result { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; color: #f0efed; }
.interview-run__score { font-weight: 800; color: #96d497; }
.interview-run__loss .interview-run__score { color: #ffb6a8; }
.interview-context figcaption { font-size: .85rem; line-height: 1.6; }
.article-body .interview-resources { display: grid; gap: 14px; padding-left: 20px; }
.article-body .interview-resources li { margin: 0; color: #c5c5c1; }
@media (max-width: 900px) {
  .hk-page .article-index-grid--mixed > .article-index-card:first-child { grid-row: auto; }
}
@media (max-width: 640px) {
  .interview-context__header { grid-template-columns: minmax(0, 1fr) 116px; gap: 8px; }
  .article-body .interview-context__header h3 { font-size: 1.25rem; }
  .article-body .interview-context p.interview-context__kicker { font-size: .65rem; letter-spacing: .04em; }
  .interview-context__art { height: 180px; }
  .interview-context__microphone { width: 96px; height: 96px; }
  .interview-context--poison .interview-context__motif--one { width: 66px; }
  .interview-context--akuma .interview-context__motif--one { width: 100px; }
  .interview-credits { gap: 18px; }
  .interview-production { padding: 20px; }
  .interview-production dl { gap: 10px 16px; }
}