/* PSN page v3 — register-shifted styles
   Layered ON TOP of project.css; load this AFTER project.css.
   Adds: new section markers, hero embed, refactor carousel,
   noise-layer cards, multi-scale rings, declarative section titles.
*/

:root {
  --v3-bg: #fbf8f4;
  --v3-card: #ffffff;
  --v3-rule: #e6dfd5;
  --v3-text: #1f2933;
  --v3-muted: #5b6770;
  --v3-faint: #94a0aa;
  --v3-orange: #d97757;
  --v3-deep-blue: #3a5d8a;
  --v3-light-blue: #5e8ec4;
  --v3-purple: #8b6bc4;
  --v3-warm-bg: #f6f1e8;
}

body {
  background: var(--v3-bg);
  color: var(--v3-text);
}

/* ----- Section meta + declarative titles ----- */
.v3-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}
.v3-section.is-wide { max-width: 1280px; }
.v3-section .eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--v3-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.v3-section h2 {
  font-size: 2.0rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.18;
  color: var(--v3-text);
  margin: 0 0 0.7rem 0;
  max-width: 880px;
}
.v3-section .lead {
  font-size: 1.05rem;
  line-height: 1.66;
  color: var(--v3-muted);
  max-width: 760px;
  margin: 0 0 1.6rem 0;
}
.v3-section.is-wide h2 { max-width: 1080px; }
.v3-section.is-wide .lead { max-width: 920px; }

/* ----- Hero (D3 embed) ----- */
.v3-hero {
  position: relative;
  background: var(--v3-bg);
  padding: 2.5rem 1.5rem 1.5rem;
  text-align: center;
}
.v3-hero h1 {
  font-size: 3.0rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 0.5rem 0;
}
.v3-hero .tagline {
  font-size: 1.15rem;
  color: var(--v3-muted);
  margin: 0 auto 1.4rem;
  max-width: 640px;
  line-height: 1.5;
}
.v3-hero .authors {
  font-size: 0.95rem;
  color: var(--v3-muted);
  margin-bottom: 0.3rem;
}
.v3-hero .authors strong { color: var(--v3-text); }
.v3-hero .affiliations {
  font-size: 0.85rem;
  color: var(--v3-faint);
  margin-bottom: 1.2rem;
}
.v3-hero-buttons {
  display: flex;
  gap: 0.7rem;
  justify-content: center;
  margin-bottom: 2rem;
}
.v3-btn {
  font-family: inherit;
  font-size: 0.93rem;
  font-weight: 500;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--v3-rule);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  color: var(--v3-text);
  background: white;
  transition: background 0.15s, border-color 0.15s;
}
.v3-btn:hover { background: var(--v3-warm-bg); border-color: var(--v3-orange); }
.v3-btn.is-primary { background: var(--v3-orange); color: white; border-color: var(--v3-orange); }
.v3-btn.is-primary:hover { background: #c46546; }
.v3-btn.is-disabled { color: var(--v3-faint); cursor: default; pointer-events: none; }
.v3-hero-frame {
  max-width: 1280px;
  margin: 0 auto;
  border: 1px solid var(--v3-rule);
  border-radius: 12px;
  overflow: hidden;
  background: var(--v3-bg);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.v3-hero-frame iframe {
  display: block;
  width: 100%;
  border: 0;
}
.v3-hero-frame .hero-static-link {
  position: relative;
  display: block;
  text-decoration: none;
  border: none;
  cursor: pointer;
  overflow: hidden;
}
.v3-hero-frame .hero-static-link img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}
.v3-hero-frame .hero-static-link:hover img {
  transform: scale(1.01);
}
.v3-hero-frame .hero-overlay-cta {
  position: absolute;
  bottom: 1.4rem;
  right: 1.4rem;
  background: #1f2933;
  color: white;
  padding: 0.55rem 1rem;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transition: transform 0.15s, background 0.15s;
}
.v3-hero-frame .hero-static-link:hover .hero-overlay-cta {
  background: var(--v3-orange);
  transform: translateY(-1px);
}

/* ----- §1 Shared quest hero figure (Minecraft landscape) ----- */
/* Left-aligned for consistency with §2+ sections. The image stays
   centered via its own margin: auto for visual breathing room, but
   the text body matches the rest of the page. */
.v3-shared-quest {
  text-align: left;
}
.v3-shared-quest .quest-img-wrap {
  max-width: 800px;
  margin: 1.5rem 0 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}
.v3-shared-quest .quest-img-wrap img { width: 100%; height: auto; display: block; }
.v3-shared-quest blockquote {
  margin: 1.5rem 0 0;
  max-width: 760px;
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--v3-text);
  font-style: italic;
  border-left: 4px solid var(--v3-orange);
  padding: 0.6rem 1.2rem;
  text-align: left;
}
.v3-shared-quest blockquote em {
  font-weight: 600; color: var(--v3-deep-blue); font-style: normal;
}

/* ----- §2 3-up taxonomy (Flat / Static / Evolving) ----- */
.v3-taxonomy-3up {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.2rem;
  margin-top: 2rem;
}
.v3-taxonomy-card {
  background: var(--v3-card);
  border: 1px solid var(--v3-rule);
  border-radius: 8px;
  padding: 1.6rem 1.2rem 1.4rem;
  text-align: center;
}
.v3-taxonomy-card .icon-wrap {
  width: 100%;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
}
.v3-taxonomy-card svg { max-height: 100%; }
.v3-taxonomy-card h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 0.4rem 0;
  color: var(--v3-text);
}
.v3-taxonomy-card p {
  font-size: 0.92rem;
  color: var(--v3-muted);
  margin: 0;
  line-height: 1.5;
}
.v3-taxonomy-card.is-ours {
  border-color: var(--v3-orange);
  border-width: 2px;
  background: var(--v3-warm-bg);
}

/* ----- §3 Analogy 3-arrow proposal ----- */
.v3-analogy-arrows {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem 1.4rem;
  align-items: center;
  margin: 2rem auto;
  max-width: 920px;
}
.v3-analogy-arrows .arr-cell {
  background: var(--v3-card);
  border: 1px solid var(--v3-rule);
  border-radius: 8px;
  padding: 1rem 1.2rem;
}
.v3-analogy-arrows .arr-cell .role {
  font-size: 0.78rem;
  color: var(--v3-faint);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.25rem;
}
.v3-analogy-arrows .arr-cell strong {
  font-size: 1.05rem;
  color: var(--v3-text);
}
.v3-analogy-arrows .arr-arrow {
  font-size: 1.6rem;
  color: var(--v3-orange);
  text-align: center;
}

/* ----- §4 PSN framework (closed-loop diagram) ----- */
.v3-loop-diagram {
  background: var(--v3-card);
  border: 1px solid var(--v3-rule);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 2rem 0 1.2rem;
}
.v3-loop-diagram svg { display: block; width: 100%; }

.v3-module-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.9rem;
  margin-top: 1.2rem;
}
.v3-module-card {
  background: var(--v3-card);
  border: 1px solid var(--v3-rule);
  border-radius: 6px;
  padding: 1rem 1.1rem;
}
.v3-module-card .role {
  font-size: 0.78rem;
  color: var(--v3-orange);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.25rem;
  font-weight: 600;
}
.v3-module-card h4 { margin: 0 0 0.4rem; font-size: 1.0rem; font-weight: 600; }
.v3-module-card p { font-size: 0.86rem; color: var(--v3-muted); margin: 0; line-height: 1.5; }

/* ----- §5 / §9 cross-LLM bar charts ----- */
.v3-chart-frame {
  background: var(--v3-card);
  border: 1px solid var(--v3-rule);
  border-radius: 8px;
  padding: 1.2rem;
  margin: 1.4rem 0;
}
.v3-chart-frame img { display: block; width: 100%; max-width: 100%; height: auto; }
.v3-chart-frame .caption {
  font-size: 0.88rem;
  color: var(--v3-muted);
  line-height: 1.55;
  margin: 0.7rem 0 0;
}
.v3-chart-frame.is-narrow {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* ----- §7 Refactor case carousel ----- */
.v3-carousel {
  background: var(--v3-card);
  border: 1px solid var(--v3-rule);
  border-radius: 8px;
  padding: 1.2rem;
  margin-top: 1.2rem;
}
.v3-carousel-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--v3-rule);
}
.v3-carousel-tabs button {
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  padding: 0.45rem 0.85rem;
  background: var(--v3-warm-bg);
  border: 1px solid var(--v3-rule);
  color: var(--v3-muted);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.12s;
}
.v3-carousel-tabs button:hover { background: white; color: var(--v3-text); }
.v3-carousel-tabs button.is-active {
  background: var(--v3-orange);
  color: white;
  border-color: var(--v3-orange);
}
.v3-carousel-stage { min-height: 360px; position: relative; }
.v3-carousel-panel {
  display: none;
  grid-template-columns: 1.05fr 1fr;
  gap: 1.5rem;
  align-items: center;
}
.v3-carousel-panel.is-active { display: grid; }
.v3-carousel-panel .case-figure img {
  width: 100%; height: auto;
  border-radius: 6px;
  border: 1px solid var(--v3-rule);
  background: white;
}
.v3-carousel-panel .case-text h4 {
  font-size: 1.15rem; margin: 0 0 0.5rem;
  font-weight: 600;
}
.v3-carousel-panel .case-text p { color: var(--v3-muted); font-size: 0.95rem; line-height: 1.6; }

/* ----- §8 Multi-scale dynamic concentric rings ----- */
.v3-rings-wrap {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 2rem 0;
}
.v3-rings-wrap svg { flex: 0 0 380px; max-width: 380px; }
.v3-rings-side h4 { font-size: 1.05rem; margin: 0 0 0.5rem; }
.v3-rings-side ul { padding-left: 1.2rem; color: var(--v3-muted); }
.v3-rings-side li { margin-bottom: 0.4rem; line-height: 1.55; }

/* ----- §9 Noise layers — three columns of why/example/fix ----- */
.v3-noise-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin-top: 1.4rem;
}
.v3-noise-card {
  background: var(--v3-card);
  border: 1px solid var(--v3-rule);
  border-radius: 8px;
  padding: 1.2rem 1.1rem;
}
.v3-noise-card .layer-tag {
  font-size: 0.76rem;
  color: var(--v3-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.v3-noise-card h4 { font-size: 1.05rem; margin: 0 0 0.6rem; font-weight: 600; }
.v3-noise-card .quote {
  background: #fef0e6;
  border-left: 3px solid var(--v3-orange);
  padding: 0.55rem 0.8rem;
  font-size: 0.86rem;
  font-style: italic;
  color: var(--v3-text);
  margin: 0.5rem 0;
  border-radius: 0 4px 4px 0;
  line-height: 1.5;
}
.v3-noise-card .fix {
  font-size: 0.88rem;
  color: var(--v3-muted);
  margin: 0.5rem 0 0;
  line-height: 1.55;
}
.v3-noise-card .fix strong { color: var(--v3-deep-blue); }

/* ----- §10 R_struct trajectory ----- */
.v3-rstruct-frame { max-width: 920px; margin: 1.4rem auto; }

/* ----- §11 Performance — compact figures ----- */
.v3-perf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin: 1.5rem 0;
}
.v3-perf-figure img { width: 100%; height: auto; max-height: 280px; object-fit: contain; }
.v3-perf-figure .caption {
  font-size: 0.85rem; color: var(--v3-muted); margin-top: 0.5rem;
  line-height: 1.5;
}

/* Footer citation */
.v3-footer {
  background: var(--v3-warm-bg);
  border-top: 1px solid var(--v3-rule);
  padding: 2.5rem 1.5rem;
  text-align: center;
  margin-top: 4rem;
}
.v3-footer .bibtex {
  position: relative;
  background: #1f2328;
  color: #d4d8dc;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  padding: 1rem 1.2rem;
  border-radius: 6px;
  text-align: left;
  max-width: 720px;
  margin: 1rem auto;
  white-space: pre;
  overflow-x: auto;
}
.v3-footer .copy-btn {
  position: absolute;
  top: 0.6rem; right: 0.7rem;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  color: #d4d8dc;
  padding: 0.25rem 0.7rem;
  font-size: 0.78rem;
  font-family: 'Inter', sans-serif;
  border-radius: 4px;
  cursor: pointer;
}
.v3-footer .copy-btn:hover { background: rgba(255,255,255,0.25); }

/* ----- Top nav for v3 ----- */
.v3-nav {
  position: sticky;
  top: 0;
  background: rgba(251, 248, 244, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--v3-rule);
  z-index: 50;
  padding: 0.6rem 1rem;
}
.v3-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.88rem;
}
.v3-nav-inner .brand {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  margin-right: auto;
}
.v3-nav-inner a {
  color: var(--v3-muted);
  text-decoration: none;
  border: none;
  transition: color 0.12s;
}
.v3-nav-inner a:hover { color: var(--v3-orange); }

/* Inline emphasis */
.v3-emph {
  font-size: 1.0rem;
  font-weight: 600;
  color: var(--v3-deep-blue);
}
.v3-num {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--v3-orange);
}

/* Mobile */
@media (max-width: 800px) {
  .v3-hero h1 { font-size: 2.2rem; }
  .v3-section h2 { font-size: 1.55rem; }
  .v3-taxonomy-3up { grid-template-columns: 1fr; }
  .v3-module-grid { grid-template-columns: 1fr; }
  .v3-noise-grid { grid-template-columns: 1fr; }
  .v3-perf-grid { grid-template-columns: 1fr; }
  .v3-analogy-arrows { grid-template-columns: 1fr; }
  .v3-analogy-arrows .arr-arrow { transform: rotate(90deg); }
  .v3-rings-wrap { flex-direction: column; }
  .v3-carousel-panel { grid-template-columns: 1fr; }
}