/* Purpose: Style the BeatGain research page with a compact, responsive listening layout. */

/* Scientific color system and shared measurements. */
:root {
  --page_background: #edf3f6;
  --panel_background: #ffffff;
  --text_primary: #142d40;
  --text_muted: #617487;
  --line_soft: #cfd9e1;
  --accent: #087f7a;
  --accent_dark: #075f5b;
  --method_unproc: #f4d35e;
  --method_beatgain: #f7a072;
  --method_vp: #89c2d9;
  --method_v2p: #95d5b2;
  --shadow_soft: 0 18px 48px rgba(20, 45, 64, 0.1);
  --brand_duration: 9s;
}

/* Base document rules and accessible keyboard focus. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 85% 0%, rgba(31, 98, 134, 0.13), transparent 32rem),
    radial-gradient(circle at 10% 90%, rgba(8, 127, 122, 0.08), transparent 28rem),
    var(--page_background);
  color: var(--text_primary);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}
a { color: var(--accent_dark); }
a:hover { color: var(--accent); }
a:focus-visible,
button:focus-visible { outline: 3px solid #d96b45; outline-offset: 3px; }

/* Sticky animated identity and section navigation. */
.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  width: 100%;
  border-bottom: 1px solid rgba(185, 204, 215, 0.9);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 28px rgba(20, 45, 64, 0.09);
  backdrop-filter: blur(14px);
}
.site-header-inner {
  display: flex;
  width: min(1240px, calc(100% - 32px));
  min-height: 74px;
  gap: 20px;
  margin: 0 auto;
  align-items: center;
}
.animated-brand {
  display: block;
  flex: 0 0 220px;
  height: 68px;
  color: var(--text_primary);
  text-decoration: none;
}
.animated-brand svg { display: block; width: 100%; height: 100%; }
.brand-wordmark { color: var(--text_primary); }
.brand-letters {
  fill: currentColor;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 92px;
  font-weight: 700;
  letter-spacing: -0.04em;
  transform-box: fill-box;
  transform-origin: center;
  animation: brand-erase-letters var(--brand_duration) ease-in-out 1 forwards;
}
.brand-symbol { transform-box: fill-box; transform-origin: center; }
.brand-symbol-b { animation: brand-assemble-b var(--brand_duration) cubic-bezier(.6, 0, .2, 1) 1 forwards; }
.brand-symbol-g { animation: brand-assemble-g var(--brand_duration) cubic-bezier(.6, 0, .2, 1) 1 forwards; }
@keyframes brand-erase-letters {
  0%, 40% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes brand-assemble-b {
  0%, 51% { transform: translateX(0); }
  67%, 100% { transform: translateX(100px); }
}
@keyframes brand-assemble-g {
  0%, 51% { transform: translateX(0); }
  67%, 100% { transform: translateX(-85px); }
}
.site-navigation {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.site-navigation::-webkit-scrollbar { display: none; }
.site-navigation a {
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--text_muted);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-decoration: none;
  white-space: nowrap;
}
.site-navigation a:hover,
.site-navigation a:focus-visible { color: var(--accent); background: #dff3f0; }

/* Page container, hero, and author block. */
.page-shell { width: min(1240px, calc(100% - 32px)); margin: 0 auto; }
.hero {
  max-width: 1000px;
  margin: 0 auto;
  padding: 62px 18px 42px;
  text-align: center;
}
.eyebrow,
.section-label,
.finding-kicker,
.player-label {
  margin: 0;
  color: var(--accent_dark);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero h1 {
  max-width: 940px;
  margin: 12px auto 20px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 5vw, 4.8rem);
  line-height: 1.03;
  letter-spacing: -0.045em;
}
.lede {
  max-width: 800px;
  margin: 0 auto 18px;
  color: var(--text_muted);
  font-size: 1.18rem;
}
.author-block {
  max-width: 850px;
  margin: 20px auto 25px;
  color: var(--text_muted);
  font-size: 0.92rem;
}
.author-block p { margin: 5px 0; }
.author-block strong { color: var(--text_primary); }
.author-block a { font-weight: 600; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 24px; }
.button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  border: 1px solid var(--accent);
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
}
.button-dark { background: var(--accent); color: #fff; }
.button-dark:hover { background: var(--accent_dark); color: #fff; }
.text-link { font-weight: 700; text-decoration: none; }

/* Shared scientific section hierarchy. */
.section {
  display: block;
  margin: 0 0 28px;
  padding: 38px 40px;
  border: 1px solid var(--line_soft);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow_soft);
  scroll-margin-top: 88px;
}
.section > .section-label {
  max-width: none;
  margin: 0 0 30px;
  padding: 0;
  font-family: Inter, "Segoe UI", sans-serif;
  font-size: clamp(0.95rem, 1.8vw, 1.12rem);
  line-height: 1.25;
  letter-spacing: 0.11em;
  text-align: center;
}
.content-column { width: min(100%, 980px); min-width: 0; margin: 0 auto; }
.intro-section .content-column { text-align: center; }
.intro-section .content-column p { max-width: 760px; margin-right: auto; margin-left: auto; }
.pipeline-heading .section-kicker,
.gain-figure-heading .section-kicker,
.instrumental-figure-heading .section-kicker,
.preference-figure-heading .section-kicker {
  font-size: 0.9rem;
  letter-spacing: 0.09em;
}
.section h2 {
  max-width: 820px;
  margin: 0 0 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 3.5vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}
.section h3 { margin: 28px 0 8px; font-size: 1.25rem; }
.section p { max-width: 850px; margin: 0 0 15px; color: var(--text_muted); }
.section strong { color: var(--text_primary); }
.section-intro { font-size: 1.05rem; }
.cite { white-space: nowrap; font-weight: 700; text-decoration: none; }

/* Method equations and paper figures. */
.formula-block {
  margin: 22px 0;
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
  background: #eef4f1;
  color: var(--text_primary);
}
.formula-block p { margin: 0 0 5px; color: var(--text_primary); font-size: 0.95rem; }
.formula-block p:last-child { margin-bottom: 0; }
.paper-figure {
  margin: 32px 0;
  padding: 18px;
  border: 1px solid var(--line_soft);
  border-radius: 12px;
  background: #fbfdfe;
}
.paper-figure img { display: block; width: 100%; height: auto; }
.paper-figure figcaption {
  margin-top: 14px;
  color: var(--text_muted);
  font-size: 0.88rem;
}
.paper-figure > img[src*="-original.png"] {
  max-width: 100%;
  margin: 0 auto;
}
.figure-viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--panel_background);
  -webkit-overflow-scrolling: touch;
}
.figure-viewport:focus-visible {
  outline: 3px solid #d96b45;
  outline-offset: 3px;
}
.figure-viewport img {
  max-width: none;
  margin: 0;
}

/* Comparison methods and result notes associated with their figures. */
.comparison-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 30px;
}
.comparison-grid article {
  padding: 16px;
  border: 1px solid var(--line_soft);
  background: #fbfdfe;
  box-shadow: var(--shadow_soft);
}
.comparison-grid h4 { margin: 0 0 7px; color: var(--accent_dark); font-size: 1rem; }
.comparison-grid p { margin: 0; font-size: 0.88rem; }
.figure-finding {
  margin: 0 32px 28px;
  padding: 18px 20px;
  border-top: 4px solid var(--accent);
  background: #fbfdfe;
  box-shadow: var(--shadow_soft);
}
.figure-finding.finding-subjective { border-top-color: #d96b45; }
.figure-finding h3 { margin: 0 0 8px; font-size: 1.2rem; }
.figure-finding p { max-width: none; margin: 0; font-size: 0.94rem; }

/* Listening player and dynamic four-column matrix. */
.listening-section { padding-bottom: 75px; }
.mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(410px, 100%);
  margin: 25px 0 20px;
  border: 1px solid var(--accent);
  background: var(--panel_background);
}
.mode-button {
  min-height: 44px;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  color: var(--accent_dark);
  font-weight: 800;
}
.mode-button.active { background: var(--accent); color: #fff; }
.central-player {
  display: grid;
  gap: 8px;
  margin: 0 0 24px;
  padding: 16px;
  border-radius: 12px;
  background: #fbfdfe;
  border: 1px solid var(--line_soft);
  box-shadow: var(--shadow_soft);
}
.central-player audio { width: 100%; height: 44px; }
.current-sample { color: var(--text_muted); font-size: 0.88rem; font-weight: 700; }
.table-head,
.example-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) repeat(4, minmax(125px, 1fr));
  gap: 9px;
  align-items: stretch;
}
.table-head {
  padding: 0 10px 7px;
  color: var(--text_muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}
.examples-list { display: grid; gap: 10px; }
.example-row {
  padding: 10px;
  border: 1px solid var(--line_soft);
  border-radius: 12px;
  background: #fbfdfe;
  box-shadow: var(--shadow_soft);
}
.track-info { display: grid; align-content: center; min-width: 0; padding: 4px 7px; }
.track-index { color: var(--accent_dark); font-size: 0.75rem; font-weight: 800; }
.track-title { margin-top: 3px; overflow-wrap: anywhere; font-weight: 800; }
.track-meta { color: var(--text_muted); font-size: 0.84rem; }
.player-cell { min-width: 0; border-radius: 4px; background: var(--method_color); }
.play-button {
  display: grid;
  place-items: center;
  gap: 3px;
  width: 100%;
  min-height: 62px;
  padding: 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text_primary);
  font-weight: 800;
}
.play-button:hover,
.play-button:focus-visible { outline: 3px solid rgba(11, 111, 106, 0.35); outline-offset: 2px; filter: brightness(0.98); }
.play-button .bi { font-size: 1.7rem; line-height: 1; }
.play-label { font-size: 0.76rem; }
.method-unproc { --method_color: var(--method_unproc); }
.method-beatgain { --method_color: var(--method_beatgain); }
.method-vp { --method_color: var(--method_vp); }
.method-v2p { --method_color: var(--method_v2p); }

/* Publication card and complete reference list. */
.publication-section { padding-bottom: 80px; }
.publication-card {
  margin: 0 0 30px;
  padding: 22px;
  border-left: 5px solid var(--accent);
  background: var(--panel_background);
  box-shadow: var(--shadow_soft);
}
.publication-card .publication-title { margin: 12px 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.15; }
.publication-card p { margin: 0; }
.references-list { margin: 0; padding-left: 24px; color: var(--text_muted); }
.references-list li { margin: 0 0 10px; padding-left: 4px; }
.references-list a { font-weight: 700; }
.references-list code { color: var(--accent_dark); }
.site-footer {
  display: flex;
  justify-content: space-between;
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
  padding: 25px 0 34px;
  color: var(--text_muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}
.site-footer a { text-decoration: none; }

/* Tablet and mobile layout changes. */
@media (max-width: 900px) {
  .section { padding: 32px 28px; }
  .comparison-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  html { scroll-padding-top: 68px; }
  .site-header-inner { width: min(100% - 18px, 1240px); min-height: 64px; gap: 8px; }
  .animated-brand { flex-basis: 142px; height: 60px; }
  .site-navigation { justify-content: flex-start; gap: 4px; }
  .site-navigation a { padding: 6px 8px; font-size: 0.78rem; }
  .hero { padding-top: 42px; }
  .hero h1 { font-size: clamp(2rem, 10vw, 3.3rem); }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 15px; }
  .comparison-grid { grid-template-columns: 1fr; }
  .figure-finding { margin: 0 20px 22px; }
  .figure-one .figure-viewport img { min-width: 720px; }
  .figure-two .figure-viewport img { min-width: 680px; }
  .figure-three .figure-viewport img { min-width: 980px; }
  .table-head { display: none; }
  .example-row { grid-template-columns: 1fr 1fr; }
  .track-info { grid-column: 1 / -1; }
  .section { padding: 26px 20px; scroll-margin-top: 68px; }
  .site-footer { display: block; }
  .site-footer a { display: block; margin-top: 8px; }
}
@media (max-width: 430px) {
  .mode-switch { grid-template-columns: 1fr; }
  .example-row { grid-template-columns: 1fr; }
  .track-info { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .brand-letters { display: none; }
  .brand-symbol-b { animation: none; transform: translateX(100px); }
  .brand-symbol-g { animation: none; transform: translateX(-85px); }
}