/* =========================================================
   Science & Psi — learn.scienceandpsi.net
   Volar-style design system
   ========================================================= */

:root {
  --dark:       #0a0a0a;
  --dark-2:     #111111;
  --dark-3:     #1a1a1a;
  --gold:       #c9a84c;
  --gold-light: #e8c97a;
  --teal:       #01696f;
  --accent:     #7a6650;
  --muted:      #888;
  --border:     #e2e0db;
  --bg:         #fff;
  --warm:       #f9f8f5;
  --serif:      'Cormorant Garamond', Georgia, serif;
  --sans:       'Work Sans', system-ui, sans-serif;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--bg); color: #1a1a1a; line-height: 1.6; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* =========================================================
   MOBILE NAV OVERLAY
   ========================================================= */
.mob-nav {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--dark);
  padding: 2rem;
  display: flex; flex-direction: column; gap: 1.5rem;
  transform: translateX(-100%);
  transition: transform .3s ease;
}
.mob-nav.open { transform: translateX(0); }
.mob-close {
  align-self: flex-end;
  background: none; border: none; color: #fff;
  font-size: 1.5rem; cursor: pointer;
}
.mob-logo {
  font-family: var(--serif);
  font-size: 1.5rem; color: #fff; letter-spacing: .05em;
}
.mob-nav ul { list-style: none; display: flex; flex-direction: column; gap: .25rem; }
.mob-nav ul li a {
  display: block; padding: .75rem 0;
  color: rgba(255,255,255,.8);
  font-size: 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: color .2s;
}
.mob-nav ul li a:hover { color: var(--gold); }

/* =========================================================
   HEADER NAV
   ========================================================= */
.hdr {
  position: sticky; top: 0; z-index: 500;
  background: var(--dark);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hdr-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 0 1.5rem;
  height: 64px;
  display: flex; align-items: center; gap: 2rem;
}

/* Logo */
.hdr-logo {
  display: flex; align-items: center; gap: .5rem;
  flex-shrink: 0;
}
.hdr-psi {
  font-family: var(--serif);
  font-size: 1.6rem; color: var(--gold);
  line-height: 1;
}
.hdr-name {
  font-size: .85rem; font-weight: 500;
  color: rgba(255,255,255,.9);
  letter-spacing: .04em; text-transform: uppercase;
}

/* Desktop nav */
.hdr-nav {
  display: flex; align-items: center; gap: 0;
  margin-left: auto;
}

.hdr-menu {
  position: relative;
}
.hdr-menu-lbl {
  display: flex; align-items: center; height: 64px;
  padding: 0 1rem;
  font-size: .82rem; font-weight: 500;
  color: rgba(255,255,255,.75);
  letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer;
  transition: color .2s;
}
.hdr-menu-lbl:hover,
.hdr-menu:hover .hdr-menu-lbl { color: var(--gold); }

/* Dropdown */
.dd {
  display: none;
  position: absolute; top: 100%; left: 0;
  min-width: 220px;
  background: var(--dark-2);
  border: 1px solid rgba(255,255,255,.08);
  border-top: 2px solid var(--gold);
  list-style: none;
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  z-index: 600;
}
.hdr-menu:hover .dd { display: block; }
.dd li a {
  display: block; padding: .75rem 1.2rem;
  font-size: .82rem; color: rgba(255,255,255,.7);
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .15s, color .15s;
}
.dd li:last-child a { border-bottom: none; }
.dd li a:hover { background: rgba(201,168,76,.1); color: var(--gold); }

/* Hamburger */
.hdr-hamburger {
  display: none;
  margin-left: auto;
  background: none; border: none;
  color: rgba(255,255,255,.8);
  font-size: 1.4rem; cursor: pointer;
  padding: .5rem;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  background: var(--dark);
  padding: 3rem 2rem 4rem;
}

.hero-centered {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center;
  gap: 3rem;
}

.hero-txt {
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: center; gap: 1.25rem;
}

.hero-logo-wrap {
  flex-shrink: 0;
  width: 850px;
  display: flex; align-items: center; justify-content: center;
  background: var(--dark);
}
.hero-logo-wrap img {
  width: 100%; height: auto;
  display: block;
  mix-blend-mode: lighten;
}

.hero-num {
  font-family: var(--serif);
  font-size: 3.5rem; font-weight: 400;
  color: rgba(255,255,255,.06);
  line-height: 1; letter-spacing: -.02em;
  user-select: none;
}

.hero-heading {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 600; color: #fff;
  line-height: 1.1; letter-spacing: -.01em;
}

.hero-sub {
  font-size: .95rem; color: rgba(255,255,255,.55);
  line-height: 1.7; max-width: 440px;
}

.hero-line {
  display: block; width: 48px; height: 2px;
  background: var(--gold);
}

.hero-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .82rem; font-weight: 600;
  color: var(--gold); letter-spacing: .08em;
  text-transform: uppercase;
  transition: gap .2s;
}
.hero-cta:hover { gap: .9rem; }

/* =========================================================
   CATEGORY STRIP
   ========================================================= */
.strip {
  background: var(--warm);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.strip::-webkit-scrollbar { height: 0; }
.strip-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 0 1.5rem;
  display: flex; gap: 0;
  white-space: nowrap;
}
.strip-inner a {
  display: inline-flex; align-items: center;
  padding: .8rem 1.1rem;
  font-size: .78rem; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.strip-inner a:hover {
  color: #1a1a1a;
  border-bottom-color: var(--gold);
}

/* =========================================================
   MAIN CONTENT
   ========================================================= */
.main-wrap {
  max-width: 1280px; margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

.cat-title {
  font-family: var(--serif);
  font-size: 2rem; font-weight: 600;
  margin-bottom: 2rem;
  color: #1a1a1a;
}

/* ---- Card Grid ---- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow .25s, transform .25s;
  display: flex; flex-direction: column;
}
.card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
  transform: translateY(-2px);
}

.card-img-wrap { display: block; overflow: hidden; aspect-ratio: 16/9; }
.card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.card:hover .card-img { transform: scale(1.04); }

.card-body {
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex; flex-direction: column; gap: .6rem;
  flex: 1;
}

.card-cat {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal);
}
.card-cat:hover { color: var(--gold); }

.card-title {
  font-family: var(--serif);
  font-size: 1.2rem; font-weight: 600;
  line-height: 1.3; color: #1a1a1a;
}
.card-title a:hover { color: var(--teal); }

.card-exc {
  font-size: .88rem; color: var(--muted);
  line-height: 1.6; flex: 1;
}

.card-meta {
  font-size: .75rem; color: #aaa;
  margin-top: .25rem;
}

/* ---- Pagination ---- */
.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 1.5rem; margin-top: 3rem;
}
.pg-btn {
  display: inline-flex; align-items: center;
  padding: .6rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: .82rem; font-weight: 500;
  color: #1a1a1a;
  transition: background .2s, border-color .2s;
}
.pg-btn:hover { background: var(--warm); border-color: #ccc; }
.pg-info { font-size: .82rem; color: var(--muted); }

/* =========================================================
   SINGLE ARTICLE
   ========================================================= */
.single {
  max-width: 720px; margin: 0 auto;
}
.single-cats {
  display: flex; gap: .5rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.single-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 600; line-height: 1.2;
  margin-bottom: 1rem;
}
.single-meta {
  display: flex; gap: 1.5rem;
  font-size: .82rem; color: var(--muted);
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.single-img {
  width: 100%; max-height: 440px;
  object-fit: cover; border-radius: 4px;
  margin-bottom: 2.5rem;
}
.single-body {
  font-size: 1.05rem; line-height: 1.8;
  color: #2a2a2a;
}
.single-body h2, .single-body h3 {
  font-family: var(--serif);
  margin: 2rem 0 .75rem;
}
.single-body p { margin-bottom: 1.25rem; }
.single-body a { color: var(--teal); border-bottom: 1px solid rgba(1,105,111,.25); }
.single-body img { border-radius: 4px; margin: 1.5rem 0; }
.single-body blockquote {
  border-left: 3px solid var(--gold);
  padding-left: 1.5rem; margin: 2rem 0;
  color: #555; font-style: italic;
}

.knowledge-audio {
  margin: 2rem 0;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  background: #fbfaf7;
}
.knowledge-audio-eyebrow {
  display: block;
  margin-bottom: .3rem;
  color: var(--teal);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.knowledge-audio h3 { margin: 0 0 .25rem; }
.knowledge-audio > div:first-child p { margin: 0; color: var(--muted); }
.knowledge-audio-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1.25rem;
}
.knowledge-audio-controls button {
  padding: .55rem .9rem;
  border: 1px solid var(--teal);
  border-radius: 2px;
  background: #fff;
  color: var(--teal);
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
}
.knowledge-audio-controls button:hover,
.knowledge-audio-controls button:focus-visible {
  background: var(--teal);
  color: #fff;
}
.knowledge-audio-status {
  margin: 1rem 0 0 !important;
  color: var(--muted);
  font-size: .85rem;
}
@media (max-width: 480px) {
  .knowledge-audio { padding: 1.25rem; }
  .knowledge-audio-controls button { flex: 1 1 calc(50% - .65rem); }
}

.back-link {
  max-width: 720px; margin: 2rem auto 0;
}
.back-link a {
  font-size: .85rem; color: var(--teal);
  font-weight: 500;
}
.back-link a:hover { text-decoration: underline; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--dark);
  color: rgba(255,255,255,.6);
  padding: 4rem 1.5rem 2rem;
  margin-top: 5rem;
}
.footer-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-brand { display: flex; flex-direction: column; gap: 1rem; }
.footer-brand img { opacity: .5; }
.footer-brand p { font-size: .85rem; line-height: 1.7; max-width: 320px; }
.footer-col-head {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.footer-links li a {
  font-size: .85rem; color: rgba(255,255,255,.5);
  transition: color .2s;
}
.footer-links li a:hover { color: rgba(255,255,255,.9); }
.footer-bottom {
  max-width: 1280px; margin: 2rem auto 0;
  font-size: .75rem; color: rgba(255,255,255,.25);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  .hdr-nav { display: none; }
  .hdr-hamburger { display: block; }

  .hero-centered {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
    align-items: center;
  }
  .hero-logo-wrap {
    width: 280px;
  }
  .hero-sub { max-width: 100%; }
  .hero-cta { align-self: center; }

  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 600px) {
  .hdr-inner { padding: 0 1rem; }
  .hero-txt { padding: 2.5rem 1rem; }
  .main-wrap { padding: 2rem 1rem 4rem; }
  .card-grid { grid-template-columns: 1fr; }
  .strip-inner { padding: 0 1rem; }
}

/* =========================================================
   NONPROFIT PAGE
   ========================================================= */

/* -- Hero -- */
.np-hero {
  background: var(--dark);
  padding: 7rem 2rem 6rem;
  position: relative;
  overflow: hidden;
}
.np-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 60% 50%, rgba(201,168,76,.07) 0%, transparent 70%),
              radial-gradient(ellipse at 20% 80%, rgba(1,105,111,.06) 0%, transparent 60%);
  pointer-events: none;
}
.np-hero-inner {
  max-width: 860px; margin: 0 auto;
  text-align: center; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
}
.np-hero-tag {
  display: inline-block;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(201,168,76,.3);
  padding: .4rem 1rem; border-radius: 2rem;
}
.np-hero-heading {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 600; color: #fff;
  line-height: 1.15; letter-spacing: -.01em;
}
.np-hero-sub {
  font-size: 1.05rem; color: rgba(255,255,255,.6);
  line-height: 1.75; max-width: 620px;
}
.np-cta-row {
  display: flex; gap: 1rem; flex-wrap: wrap;
  justify-content: center; margin-top: .5rem;
}
.np-btn {
  display: inline-flex; align-items: center;
  padding: .8rem 2rem;
  font-size: .85rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  border-radius: 3px; transition: all .2s;
}
.np-btn--primary {
  background: var(--gold); color: var(--dark);
}
.np-btn--primary:hover { background: var(--gold-light); }
.np-btn--outline {
  border: 1px solid rgba(255,255,255,.25); color: #fff;
}
.np-btn--outline:hover { border-color: var(--gold); color: var(--gold); }

/* -- Shared container -- */
.np-container {
  max-width: 1060px; margin: 0 auto; padding: 0 2rem;
}

/* -- Intro + Pillars -- */
.np-intro {
  background: #fff;
  padding: 5rem 0;
}
.np-lead {
  font-size: 1.05rem; line-height: 1.8;
  color: #2a2a2a; max-width: 820px;
  margin: 0 auto 3.5rem;
  text-align: center;
}
.np-pillars {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden;
}
.np-pillar {
  display: flex; align-items: flex-start; gap: 1.75rem;
  padding: 2rem 2.5rem;
  border-bottom: 1px solid var(--border);
  background: #fff;
  transition: background .2s;
}
.np-pillar:last-child { border-bottom: none; }
.np-pillar:hover { background: var(--warm); }
.np-pillar-icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--dark); border-radius: 6px;
  border: 1px solid rgba(201,168,76,.2);
  color: var(--gold);
}
.np-pillar-title {
  font-family: var(--serif);
  font-size: 1.25rem; font-weight: 600;
  color: #1a1a1a; margin-bottom: .5rem;
}
.np-pillar-body p {
  font-size: .95rem; color: #555; line-height: 1.7;
}

/* -- Purpose -- */
.np-purpose {
  background: var(--warm);
  padding: 5rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.np-purpose-hd {
  text-align: center; margin-bottom: 3.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.np-eyebrow {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal);
}
.np-section-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 600; color: #1a1a1a;
  letter-spacing: -.01em;
}
.np-purpose-intro {
  font-size: .98rem; color: #555;
  line-height: 1.75; max-width: 680px;
}
.np-advocacy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.np-advocacy-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2rem 1.75rem;
  display: flex; flex-direction: column; gap: .75rem;
  transition: box-shadow .25s, transform .25s;
}
.np-advocacy-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.np-advocacy-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--warm); border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--teal);
}
.np-advocacy-icon svg { width: 22px; height: 22px; }
.np-advocacy-card h3 {
  font-family: var(--serif);
  font-size: 1.15rem; font-weight: 600;
  color: #1a1a1a; line-height: 1.3;
}
.np-advocacy-card p {
  font-size: .88rem; color: #666; line-height: 1.7;
}

/* -- Join Us -- */
.np-join {
  background: var(--dark);
  padding: 5rem 0 6rem;
}
.np-join-hd {
  text-align: center; margin-bottom: 3rem;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.np-join-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600; color: #fff;
}
.np-join-sub {
  font-size: 1rem; color: rgba(255,255,255,.65);
  line-height: 1.7; max-width: 560px;
}
.np-join-sub strong { color: #fff; }
.np-join-tagline {
  font-size: .9rem; color: rgba(255,255,255,.4);
  font-style: italic;
}
.np-join-cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.np-join-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px; padding: 2.5rem 2rem;
  display: flex; flex-direction: column; gap: 1rem;
  transition: border-color .2s, background .2s;
}
.np-join-card:hover {
  border-color: rgba(201,168,76,.4);
  background: rgba(255,255,255,.06);
}
.np-join-card h3 {
  font-family: var(--serif);
  font-size: 1.3rem; font-weight: 600; color: #fff;
}
.np-join-card p {
  font-size: .9rem; color: rgba(255,255,255,.55); line-height: 1.7;
  flex: 1;
}
.np-join-link {
  display: inline-flex; align-items: center;
  font-size: .8rem; font-weight: 600;
  color: var(--gold); letter-spacing: .06em;
  text-transform: uppercase;
  transition: letter-spacing .2s;
}
.np-join-link:hover { letter-spacing: .1em; }

/* -- Responsive -- */
@media (max-width: 860px) {
  .np-advocacy-grid { grid-template-columns: 1fr; }
  .np-join-cards { grid-template-columns: 1fr; }
  .np-pillar { flex-direction: column; gap: 1rem; }
}
@media (max-width: 600px) {
  .np-hero { padding: 5rem 1rem 4rem; }
  .np-intro, .np-purpose, .np-join { padding: 3.5rem 0; }
  .np-pillar { padding: 1.5rem; }
}

/* =========================================================
   ARTICLE HERO
   ========================================================= */
.art-hero {
  display: grid;
  grid-template-columns: 52% 48%;
  min-height: 88vh;
  background: var(--dark);
  position: relative;
  overflow: hidden;
}

/* Left — text panel */
.art-hero-left {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 4rem 4rem 4.5rem 5%;
  z-index: 2;
}

/* Giant ghost Ψ for depth */
.art-hero-ghost {
  position: absolute;
  top: -2rem; left: -1rem;
  font-family: var(--serif);
  font-size: clamp(14rem, 22vw, 22rem);
  color: rgba(255,255,255,.025);
  line-height: 1;
  user-select: none;
  pointer-events: none;
  letter-spacing: -.05em;
}

.art-hero-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  max-width: 560px;
}

/* Category pills */
.art-hero-cats {
  display: flex; gap: .5rem; flex-wrap: wrap;
}
.art-hero-cat {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(201,168,76,.35);
  padding: .3rem .85rem; border-radius: 2rem;
  transition: background .2s, color .2s;
}
.art-hero-cat:hover {
  background: var(--gold); color: var(--dark);
}

/* Title — the centrepiece */
.art-hero-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.18;
  letter-spacing: -.02em;
}

/* Gold rule */
.art-hero-rule {
  width: 52px; height: 2px;
  background: linear-gradient(to right, var(--gold), var(--gold-light));
}

/* Author / date */
.art-hero-meta {
  display: flex; align-items: center; gap: .65rem;
  font-size: .8rem;
  color: rgba(255,255,255,.4);
  letter-spacing: .02em;
}
.art-hero-dot { color: rgba(255,255,255,.2); }

/* Scroll cue */
.art-hero-scroll {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .75rem;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.3);
  transition: color .25s;
  text-decoration: none;
}
.art-hero-scroll svg {
  animation: ah-bounce 2s ease-in-out infinite;
}
.art-hero-scroll:hover { color: var(--gold); }
@keyframes ah-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(4px); }
}

/* Right — image panel */
.art-hero-right {
  position: relative;
  overflow: hidden;
}
.art-hero-img-wrap {
  position: absolute; inset: 0;
}
.art-hero-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: brightness(.75) contrast(1.08) saturate(1.1);
  transition: transform 8s ease;
}
.art-hero:hover .art-hero-img-wrap img {
  transform: scale(1.03);
}

/* Left-to-dark gradient that merges text into image */
.art-hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, var(--dark) 0%, rgba(10,10,10,.6) 30%, rgba(10,10,10,.1) 70%, transparent 100%),
    linear-gradient(to top,   var(--dark) 0%, transparent 25%);
  z-index: 1;
}

/* Fallback when no image */
.art-hero-right--fallback {
  background: radial-gradient(ellipse at center, rgba(201,168,76,.08) 0%, transparent 70%);
}

/* Article body byline */
.single-byline {
  display: flex; align-items: center; gap: .75rem;
  font-size: .82rem; color: var(--muted);
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}

/* Responsive */
@media (max-width: 900px) {
  .art-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .art-hero-right {
    height: 55vw;
    min-height: 260px;
    order: -1;
  }
  .art-hero-left {
    padding: 2.5rem 1.5rem 3rem;
  }
  .art-hero-ghost { font-size: 10rem; }
  .art-hero-title { font-size: clamp(1.7rem, 6vw, 2.4rem); }
}
@media (max-width: 600px) {
  .art-hero-left { padding: 2rem 1rem 2.5rem; }
  .art-hero-ghost { display: none; }
}

/* =========================================================
   ARTICLE AUDIO PLAYER
   ========================================================= */
.ah-player {
  display: flex; align-items: center; gap: .75rem;
  margin-top: .25rem;
  padding: .85rem 1.2rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(201,168,76,.2);
  border-radius: 4px;
  max-width: 520px;
}
.ah-ctrl {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  background: transparent;
  color: rgba(255,255,255,.45);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.ah-ctrl:hover { border-color: var(--gold); color: var(--gold); }
.ah-play {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: transparent;
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.ah-play:hover { background: var(--gold); color: var(--dark); }
.ah-track { flex: 1; display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.ah-label {
  font-size: .75rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.ah-progress-wrap { display: flex; flex-direction: column; gap: .3rem; cursor: pointer; }
.ah-bar {
  height: 3px; background: rgba(255,255,255,.12);
  border-radius: 2px; position: relative; overflow: hidden;
}
.ah-fill {
  height: 100%; width: 0%;
  background: linear-gradient(to right, var(--gold), var(--gold-light));
  border-radius: 2px;
  transition: width .25s linear;
}
.ah-times {
  display: flex; justify-content: space-between;
  font-size: .68rem; color: rgba(255,255,255,.3);
  font-variant-numeric: tabular-nums;
}

/* Voice selector */
.ah-voice-row {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .2rem;
}
.ah-voice-lbl {
  font-size: .68rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.25);
}
.ah-voice-btn {
  font-size: .7rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .2rem .65rem; border-radius: 2rem;
  border: 1px solid rgba(255,255,255,.15);
  background: transparent;
  color: rgba(255,255,255,.35);
  cursor: pointer;
  transition: all .2s;
}
.ah-voice-btn:hover { border-color: rgba(201,168,76,.4); color: var(--gold); }
.ah-voice-btn.ah-voice-active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(201,168,76,.08);
}


/* =========================================================
   ORIENTATION PAGES — PsiDev Build
   Prism: Editorial magazine layout, photography-forward
   Grid:  50/50 split, clip-path diagonals, alternating rows
   Flux:  Hover zoom, reveal transitions
   ========================================================= */

/* ── TOP HERO ─────────────────────────────────────── */
.orient-top {
  background: #fff;
  overflow: hidden;
}
.orient-top-inner {
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 48% 52%;
  min-height: 560px;
}

/* Text panel */
.orient-top-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4rem;
  padding: 5rem 4rem 5rem 3rem;
}
.orient-heading {
  font-family: var(--serif);
  font-size: clamp(3.2rem, 6.5vw, 5.5rem);
  font-weight: 700;
  color: #111;
  line-height: .92;
  letter-spacing: -.03em;
}
.orient-rule {
  width: 56px;
  height: 3px;
  background: var(--teal);
}
.orient-subtitle {
  font-family: var(--sans);
  font-size: .95rem;
  color: #666;
  line-height: 1.75;
  max-width: 420px;
}

/* Dropdown CTA */
.orient-dropdown { position: relative; display: inline-block; }
.orient-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 2.2rem;
  background: var(--gold);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background .2s;
}
.orient-btn:hover { background: var(--gold-light); color: var(--dark); }
.orient-dd {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 280px;
  background: #fff;
  border: 1px solid #e5e3de;
  box-shadow: 0 16px 48px rgba(0,0,0,.12);
  list-style: none;
  z-index: 20;
}
.orient-dd--open { display: block; }
.orient-dd li a {
  display: block;
  padding: .85rem 1.4rem;
  font-size: .85rem;
  font-weight: 500;
  color: #333;
  border-bottom: 1px solid #f0eeea;
  transition: background .15s, color .15s, padding-left .2s;
}
.orient-dd li:last-child a { border-bottom: none; }
.orient-dd li a:hover {
  background: #f9f8f5;
  color: var(--teal);
  padding-left: 1.8rem;
}

/* ── DIAGONAL IMAGE COMPOSITION ──────────────────── */
.orient-top-images {
  position: relative;
  min-height: 520px;
  overflow: hidden;
}
.orient-img {
  position: absolute;
  overflow: hidden;
}


/* ── FANNED CARD STACK ── */
.orient-fan {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  padding: 2rem 0;
}
.orient-fan-card {
  position: absolute;
  width: 140px;
  height: 195px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  border: 3px solid rgba(255,255,255,.85);
  transform-origin: center bottom;
  transition: transform .45s cubic-bezier(.2,0,0,1), box-shadow .3s;
}
.orient-fan-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.orient-fan-card:hover {
  transform: translateY(-12px) scale(1.06) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.25);
  z-index: 10 !important;
}

/* 7-card fan positions — arc from left to right */
.orient-fan-card:nth-child(1) { transform: rotate(-21deg) translateX(-240px) translateY(18px); z-index: 1; opacity: .7; width: 120px; height: 168px; }
.orient-fan-card:nth-child(2) { transform: rotate(-14deg) translateX(-160px) translateY(6px); z-index: 2; opacity: .85; width: 130px; height: 182px; }
.orient-fan-card:nth-child(3) { transform: rotate(-6deg) translateX(-72px) translateY(-2px); z-index: 3; width: 145px; height: 200px; }
.orient-fan-card:nth-child(4) { transform: rotate(0deg) translateY(-8px); z-index: 5; width: 160px; height: 222px; box-shadow: 0 12px 40px rgba(0,0,0,.22); }
.orient-fan-card:nth-child(5) { transform: rotate(6deg) translateX(72px) translateY(-2px); z-index: 3; width: 145px; height: 200px; }
.orient-fan-card:nth-child(6) { transform: rotate(14deg) translateX(160px) translateY(6px); z-index: 2; opacity: .85; width: 130px; height: 182px; }
.orient-fan-card:nth-child(7) { transform: rotate(21deg) translateX(240px) translateY(18px); z-index: 1; opacity: .7; width: 120px; height: 168px; }

/* 5-card fan (for sections with fewer images) */
.orient-fan--5 .orient-fan-card:nth-child(1) { transform: rotate(-16deg) translateX(-180px) translateY(12px); z-index: 1; opacity: .8; width: 130px; height: 180px; }
.orient-fan--5 .orient-fan-card:nth-child(2) { transform: rotate(-7deg) translateX(-85px) translateY(0px); z-index: 2; width: 145px; height: 200px; }
.orient-fan--5 .orient-fan-card:nth-child(3) { transform: rotate(0deg) translateY(-8px); z-index: 4; width: 160px; height: 222px; box-shadow: 0 12px 40px rgba(0,0,0,.22); }
.orient-fan--5 .orient-fan-card:nth-child(4) { transform: rotate(7deg) translateX(85px) translateY(0px); z-index: 2; width: 145px; height: 200px; }
.orient-fan--5 .orient-fan-card:nth-child(5) { transform: rotate(16deg) translateX(180px) translateY(12px); z-index: 1; opacity: .8; width: 130px; height: 180px; }

/* ── SHOWCASE ITEMS ──────────────────────────────── */
.orient-items {
  background: #fff;
}

.orient-item {
  display: grid;
  grid-template-columns: 55% 45%;
  min-height: 420px;
  border-top: 1px solid #e8e6e2;
}
.orient-item:nth-child(even) {
  direction: rtl;
  background: #f9f8f5;
}
.orient-item:nth-child(even) > * { direction: ltr; }

/* Text panel */
.orient-item-text {
  display: flex;
  align-items: stretch;
}

/* Vertical rotated label */
.orient-item-vert {
  flex-shrink: 0;
  width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-family: var(--sans);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(0,0,0,.1);
  border-right: 1px dotted #ccc;
  user-select: none;
}
.orient-item:nth-child(even) .orient-item-vert {
  border-right: none;
  border-left: 1px dotted #ccc;
}

/* Content body */
.orient-item-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4rem;
  padding: 3.5rem 3rem;
  max-width: 520px;
}
.orient-item-title {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #111;
}
.orient-item-desc {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  color: #555;
  line-height: 1.8;
  font-style: italic;
}
.orient-item-actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: .25rem;
}
.orient-item-btn {
  display: inline-flex;
  align-items: center;
  padding: .55rem 1.6rem;
  border: 1.5px solid #222;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #222;
  transition: background .2s, color .2s;
}
.orient-item-btn:hover {
  background: #222;
  color: #fff;
}

/* Image panel */
.orient-item-img {
  position: relative;
  overflow: hidden;
}
.orient-item-img img {
  width: 100%;
  height: 100%;
  min-height: 400px;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2,0,0,1);
}
.orient-item:hover .orient-item-img img {
  transform: scale(1.04);
}
/* Fallback when no image */
.orient-item-img--fallback {
  width: 100%;
  height: 100%;
  min-height: 400px;
  background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
}
/* Contain variant: show the full photo without cropping, scaled down with padding */
.orient-item-img--contain {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.orient-item-img--contain img {
  object-fit: contain;
  width: auto;
  max-width: 96%;
  max-height: 100%;
  min-height: 0;
}
.orient-item:hover .orient-item-img--contain img {
  transform: none;
}

/* ── RESPONSIVE ──────────────────────────────────── */
@media (max-width: 960px) {
  .orient-top-inner {
    grid-template-columns: 1fr;
  }
  .orient-top-text {
    padding: 4rem 2rem;
  }
  .orient-top-images {
    min-height: 320px;
  }
  .orient-item {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .orient-item:nth-child(even) {
    direction: ltr;
  }
  .orient-item:nth-child(even) .orient-item-vert {
    border-left: none;
    border-right: 1px dotted #ccc;
  }
  .orient-item-vert {
    display: none;
  }
  .orient-item-body {
    padding: 2.5rem 2rem;
  }
  .orient-item-img img {
    min-height: 280px;
  }
}
@media (max-width: 600px) {
  .orient-top-text {
    padding: 3rem 1.25rem;
  }
  .orient-heading {
    font-size: 2.8rem;
  }
  .orient-top-images {
    min-height: 240px;
  }
  .orient-item-body {
    padding: 2rem 1.25rem;
  }
}


/* =========================================================
   MISSION PAGE — PsiDev Rebuild
   ========================================================= */

/* ── HERO: Fullscreen, logo backdrop, massive serif ── */
.msn-hero {
  position: relative;
  min-height: 100vh;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.msn-hero-backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.msn-hero-backdrop img {
  width: 60%;
  max-width: 600px;
  height: auto;
  opacity: .06;
  mix-blend-mode: lighten;
  filter: brightness(1.5);
}
.msn-hero-fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 200px;
  background: linear-gradient(to top, var(--dark), transparent);
}
.msn-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 2rem 2.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}
.msn-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.msn-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.8vw, 2.8rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.45;
  letter-spacing: -.01em;
}
.msn-rule {
  width: 80px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

/* ── SECTIONS: Alternating full-bleed pillars ── */
.msn-section {
  padding: 8rem 2rem;
}
.msn-section--light { background: #fff; }
.msn-section--dark  { background: var(--dark); }
.msn-section--warm  { background: var(--warm); }

.msn-sect-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 3rem;
  align-items: start;
}
.msn-sect-number {
  font-family: var(--serif);
  font-size: 8rem;
  font-weight: 300;
  line-height: .85;
  letter-spacing: -.05em;
}
.msn-section--light .msn-sect-number { color: rgba(0,0,0,.06); }
.msn-section--dark  .msn-sect-number { color: rgba(201,168,76,.12); }
.msn-section--warm  .msn-sect-number { color: rgba(1,105,111,.08); }

.msn-sect-media { align-self: start; }
.msn-sect-video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #050505;
  object-fit: cover;
  box-shadow: 0 16px 32px rgba(0,0,0,.16);
}

.msn-sect-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-top: 1rem;
}
.msn-sect-title {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  line-height: 1.2;
}
.msn-section--light .msn-sect-title { color: #111; }
.msn-section--dark  .msn-sect-title { color: #fff; }
.msn-section--warm  .msn-sect-title { color: #111; }

.msn-sect-body {
  font-size: 1.05rem;
  line-height: 1.9;
  max-width: 580px;
}
.msn-section--light .msn-sect-body { color: #555; }
.msn-section--dark  .msn-sect-body { color: rgba(255,255,255,.55); }
.msn-section--warm  .msn-sect-body { color: #555; }

/* ── MANIFESTO ── */
.msn-manifesto {
  background: var(--dark);
  padding: 6rem 2rem;
}
.msn-manifesto-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}
.msn-manifesto-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
}
.msn-manifesto-text {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 400;
  color: rgba(255,255,255,.85);
  line-height: 1.6;
}
.msn-manifesto-text em {
  font-style: normal;
  color: var(--gold);
}

/* ── VALUES ── */
.msn-values {
  background: #fff;
  padding: 6rem 2rem;
  border-top: 1px solid var(--border);
}
.msn-values-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
}
.msn-val {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.msn-val-icon {
  font-size: 1.5rem;
  color: var(--gold);
  line-height: 1;
  margin-bottom: .25rem;
}
.msn-val h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: #111;
}
.msn-val p {
  font-size: .88rem;
  color: #777;
  line-height: 1.75;
}

/* ── CTA ── */
.msn-cta {
  background: var(--warm);
  padding: 5rem 2rem;
  text-align: center;
}
.msn-cta-text {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 400;
  color: #333;
  line-height: 1.6;
  margin-bottom: 2.5rem;
}
.msn-cta-links {
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  flex-wrap: wrap;
}
.msn-cta-links a {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.msn-cta-links a:hover {
  border-bottom-color: var(--teal);
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .msn-sect-inner {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .msn-sect-number { font-size: 5rem; }
  .msn-section { padding: 5rem 1.5rem; }
  .msn-values-inner { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
@media (max-width: 480px) {
  .msn-values-inner { grid-template-columns: 1fr; }
  .msn-cta-links { flex-direction: column; gap: 1.25rem; }
}

/* =========================================================
   TEAM PAGE — PsiDev Build
   Palette: Blue #1a6bff, White, Gold #c9a84c, Black #0a0a0a
   ========================================================= */

/* =========================================================
   RESEARCHERS
   ========================================================= */
.rsh-page { background:#e9e6df; padding:2rem max(1rem, calc((100vw - 1120px)/2)); }
.rsh-hero { max-width:680px; margin:0 auto 2.5rem; text-align:center; }
.rsh-hero span,.rsh-panels section > span { color:var(--gold); font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.rsh-hero h1 { font-family:var(--serif); font-size:clamp(2.4rem,5vw,4.8rem); line-height:1.02; margin:.8rem 0 1.25rem; }
.rsh-hero p { color:#555; font-size:1.1rem; line-height:1.75; }
.rsh-encyclopedia-link { margin-top:.85rem; font-size:1rem; }
.rsh-encyclopedia-link a { color:var(--teal); font-weight:800; text-decoration:underline; text-underline-offset:.18em; }
.rsh-encyclopedia-link a:hover { color:var(--gold); }
.rsh-list { display:flex; flex-direction:column; gap:1.25rem; }
.rsh-profile { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.9fr); gap:.6rem; align-items:stretch; }
.rsh-profile--reverse { grid-template-columns:minmax(320px,.9fr) minmax(0,1.25fr); }
.rsh-profile--reverse .rsh-photo { order:2; }.rsh-profile--reverse .rsh-panels { order:1; }
.rsh-photo { width:100%; min-height:410px; height:100%; object-fit:cover; border-radius:14px; background:#181818; }
.rsh-panels { display:grid; grid-template-rows:1fr 1.1fr; gap:.6rem; }
.rsh-panels section { background:#1e1e1e; color:#eee; border-radius:14px; padding:1.35rem; display:flex; flex-direction:column; }
.rsh-panels section > span { border-bottom:1px solid rgba(255,255,255,.12); padding-bottom:1rem; margin-bottom:1.4rem; }
.rsh-panels h2 { font-family:var(--serif); font-size:clamp(1.8rem,3vw,2.7rem); line-height:1.05; margin:0 0 .45rem; }
.rsh-panels p { color:rgba(255,255,255,.68); line-height:1.65; margin:0; }.rsh-panels .rsh-cred { color:var(--gold); font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:1rem; }
.rsh-panels a { margin-top:auto; padding-top:1.3rem; color:#fff; font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
@media(max-width:800px){.rsh-page{padding:2rem 1rem}.rsh-profile,.rsh-profile--reverse{grid-template-columns:1fr}.rsh-profile--reverse .rsh-photo,.rsh-profile--reverse .rsh-panels{order:initial}.rsh-photo{min-height:430px}.rsh-panels{grid-template-rows:auto}.rsh-panels section{min-height:250px}}

/* ── HERO ── */
.tm-hero {
  background: var(--dark);
  padding: 10rem 2rem 8rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.tm-hero::before {
  content: '';
  position: absolute;
  top: -50%; left: -25%;
  width: 150%; height: 200%;
  background: radial-gradient(ellipse at 30% 60%, rgba(26,107,255,.08) 0%, transparent 50%),
              radial-gradient(ellipse at 70% 40%, rgba(201,168,76,.06) 0%, transparent 50%);
  animation: tm-drift 16s ease-in-out infinite alternate;
}
@keyframes tm-drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(30px, -20px) rotate(2deg); }
}
.tm-hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; gap: 1.5rem;
}
.tm-hero-line {
  width: 1px; height: 60px;
  background: linear-gradient(to bottom, transparent, var(--gold));
}
.tm-hero-label {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: #1a6bff;
}
.tm-hero-title {
  font-family: var(--serif);
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight: 700;
  color: #fff;
  line-height: .9;
  letter-spacing: -.04em;
}
.tm-hero-sub {
  font-size: .95rem;
  color: rgba(255,255,255,.4);
  line-height: 1.75;
  max-width: 520px;
}

/* ── MEMBER SECTIONS ── */
.tm-member {
  padding: 6rem 2rem;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.tm-member:nth-child(even) {
  background: #fafafa;
}
.tm-member-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 4rem;
  align-items: center;
}
.tm-member--reverse .tm-member-inner {
  grid-template-columns: 1fr 420px;
}
.tm-member--reverse .tm-photo-wrap {
  order: 2;
}
.tm-member--reverse .tm-bio {
  order: 1;
}

/* ── PHOTO ── */
.tm-photo-wrap {
  position: relative;
}
.tm-photo-frame {
  position: relative;
  z-index: 2;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.15);
}
.tm-photo-frame img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .8s cubic-bezier(.2,0,0,1), filter .8s;
  filter: saturate(.9);
}
.tm-member:hover .tm-photo-frame img {
  transform: scale(1.03);
  filter: saturate(1.1);
}

/* Color accent block behind photo */
.tm-photo-accent {
  position: absolute;
  z-index: 1;
  width: 85%;
  height: 85%;
  border-radius: 8px;
  transition: transform .6s cubic-bezier(.2,0,0,1);
}
.tm-accent--blue {
  background: #1a6bff;
  bottom: -16px; right: -16px;
}
.tm-accent--gold {
  background: var(--gold);
  bottom: -16px; left: -16px;
}
.tm-member:hover .tm-photo-accent {
  transform: translate(4px, 4px);
}

/* ── BIO ── */
.tm-bio {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.tm-role {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #1a6bff;
}
.tm-name {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: #0a0a0a;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.tm-bio-rule {
  width: 48px;
  height: 3px;
  background: var(--gold);
}
.tm-bio p {
  font-size: .92rem;
  color: #555;
  line-height: 1.85;
}
.tm-bio p em {
  color: #333;
  font-style: italic;
}

/* Contact links */
.tm-contact {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: .5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,.08);
}
.tm-contact a {
  font-size: .8rem;
  font-weight: 500;
  color: #1a6bff;
  transition: color .2s;
}
.tm-contact a:hover {
  color: var(--gold);
}

/* ── JOIN CTA ── */
.tm-join {
  background: var(--dark);
  padding: 6rem 2rem;
  text-align: center;
}
.tm-join-inner {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.tm-join-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 600;
  color: #fff;
}
.tm-join-inner > p {
  font-size: .95rem;
  color: rgba(255,255,255,.5);
  line-height: 1.7;
}
.tm-join-btn {
  display: inline-flex;
  align-items: center;
  padding: .85rem 2.5rem;
  background: transparent;
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 3px;
  transition: background .25s, color .25s;
}
.tm-join-btn:hover {
  background: var(--gold);
  color: var(--dark);
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .tm-member-inner,
  .tm-member--reverse .tm-member-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .tm-member--reverse .tm-photo-wrap { order: 0; }
  .tm-member--reverse .tm-bio { order: 0; }
  .tm-photo-frame img { height: 400px; }
  .tm-photo-accent { display: none; }
  .tm-hero { padding: 8rem 1.5rem 5rem; }
}
@media (max-width: 600px) {
  .tm-photo-frame img { height: 320px; }
  .tm-member { padding: 4rem 1.25rem; }
}

/* =========================================================
   RESEARCH DATA PAGE — PsiDev Build
   Clean, searchable, research-optimized
   ========================================================= */

/* ── HERO ── */
.rd-hero {
  background: var(--dark);
  padding: 8rem 2rem 5rem;
  text-align: center;
}
.rd-hero-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  align-items: center; gap: 1.5rem;
}
.rd-label {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold);
}
.rd-title {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.1;
}
.rd-subtitle {
  font-size: .92rem;
  color: rgba(255,255,255,.45);
  line-height: 1.7;
  max-width: 540px;
}

/* Search bar */
.rd-search-wrap {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-top: 1rem;
}
.rd-search-icon {
  position: absolute;
  left: 1.2rem; top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.3);
  pointer-events: none;
}
.rd-search {
  width: 100%;
  padding: 1rem 1rem 1rem 3.2rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  color: #fff;
  font-family: var(--sans);
  font-size: .9rem;
  outline: none;
  transition: border-color .25s, background .25s;
}
.rd-search::placeholder { color: rgba(255,255,255,.3); }
.rd-search:focus {
  border-color: var(--gold);
  background: rgba(255,255,255,.08);
}
.rd-count {
  position: absolute;
  right: 1.2rem; top: 50%;
  transform: translateY(-50%);
  font-size: .75rem;
  color: rgba(255,255,255,.3);
  font-variant-numeric: tabular-nums;
}
.rd-assistant-note {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  max-width: 560px;
  margin-top: .15rem;
  padding: .75rem 1rem;
  color: rgba(255,255,255,.68);
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px;
  font-size: .78rem;
  line-height: 1.45;
  text-align: left;
}
.rd-assistant-note svg { color: var(--gold); flex: 0 0 auto; }
.rd-assistant-note strong {
  margin-right: .25rem;
  color: #fff;
  font-weight: 600;
}

/* ── CATEGORY NAV ── */
.rd-catnav {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: .75rem 1rem;
  position: sticky;
  top: 64px; z-index: 100;
  transition: box-shadow .3s;
}
.rd-catnav--stuck {
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.rd-catnav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.rd-catnav-inner::-webkit-scrollbar { height: 0; }
.rd-cat-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem 1rem;
  border: 1px solid var(--border);
  border-radius: 2rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #555;
  white-space: nowrap;
  transition: all .2s;
  flex-shrink: 0;
}
.rd-cat-pill:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: rgba(1,105,111,.04);
}
.rd-cat-count {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 22px; height: 22px;
  background: var(--warm);
  border-radius: 50%;
  font-size: .65rem;
  font-weight: 700;
  color: #888;
}

/* ── MAIN CONTENT ── */
.rd-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 6rem;
}

/* Sections */
.rd-section {
  padding: 3rem 0;
  border-bottom: 1px solid var(--border);
}
.rd-section:last-child { border-bottom: none; }
.rd-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--dark);
}
.rd-section-title {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: #111;
}
.rd-section-count {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #aaa;
  flex-shrink: 0;
}

/* Article rows */
.rd-articles {
  display: flex;
  flex-direction: column;
}
.rd-article {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(0,0,0,.05);
  transition: background .15s;
}
.rd-article:last-child { border-bottom: none; }
.rd-article:hover {
  background: var(--warm);
  margin: 0 -1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 4px;
}
.rd-article-text {
  flex: 1;
  font-size: .88rem;
  color: #444;
  line-height: 1.6;
}
.rd-pdf-btn {
  display: inline-flex;
  align-items: center; gap: .35rem;
  padding: .4rem .9rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--teal);
  flex-shrink: 0;
  transition: all .2s;
}
.rd-pdf-btn:hover {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .rd-hero { padding: 6rem 1.5rem 4rem; }
  .rd-main { padding: 0 1.25rem 4rem; }
  .rd-section-header { flex-direction: column; gap: .5rem; }
  .rd-article { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .rd-catnav { top: 0; }

  .rd-assistant-note { align-items: flex-start; }
}

/* =========================================================
   THERAPIST DIRECTORY — PsiDev Build
   Dark mode default, light mode via .tp-light on body
   Palette: Blue #1a6bff, White, Gold #c9a84c, Black #0a0a0a
   ========================================================= */

/* ── HERO ── */
.tp-hero {
  background: var(--dark);
  padding: 7rem 2rem 4rem;
  text-align: center;
  position: relative;
}
.tp-hero-inner {
  max-width: 680px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
}
.tp-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: #1a6bff;
}
.tp-hero-title {
  font-family: var(--serif); font-size: clamp(2.2rem,5vw,3.4rem);
  font-weight: 600; color: #fff; line-height: 1.1;
}
.tp-hero-sub {
  font-size: .92rem; color: rgba(255,255,255,.45); line-height: 1.7;
}
.tp-mode-toggle {
  position: absolute; top: 2rem; right: 2rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); cursor: pointer; transition: all .2s;
}
.tp-mode-toggle:hover { background: rgba(255,255,255,.15); }

/* ── GRID WRAP ── */
.tp-grid-wrap {
  background: var(--dark); padding: 0 2rem 6rem; min-height: 60vh;
}
.tp-search-bar {
  max-width: 1200px; margin: 0 auto 2.5rem; padding-top: 1rem;
}
.tp-search {
  width: 100%; padding: .9rem 1.2rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px; color: #fff; font-family: var(--sans); font-size: .88rem;
  outline: none; transition: border-color .2s;
}
.tp-search::placeholder { color: rgba(255,255,255,.3); }
.tp-search:focus { border-color: #1a6bff; }

.tp-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.5rem;
}

/* ── CARD ── */
.tp-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; overflow: hidden;
  transition: transform .3s cubic-bezier(.2,0,0,1), box-shadow .3s, border-color .3s;
}
.tp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,.3);
  border-color: rgba(26,107,255,.3);
}
.tp-card-photo {
  height: 220px; overflow: hidden; background: #111;
}
.tp-card-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,0,0,1);
}
.tp-card:hover .tp-card-photo img { transform: scale(1.04); }
.tp-card-body { padding: 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.tp-card-name {
  font-family: var(--serif); font-size: 1.2rem; font-weight: 600; color: #fff;
}
.tp-card-title { font-size: .78rem; color: rgba(255,255,255,.4); }
.tp-card-meta {
  display: flex; gap: .5rem; font-size: .75rem; color: rgba(255,255,255,.35);
}
.tp-card-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tp-tag {
  padding: .25rem .65rem; border-radius: 2rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .03em;
  background: rgba(26,107,255,.12); color: #5a9fff; border: 1px solid rgba(26,107,255,.2);
}
.tp-tag--muted {
  background: rgba(255,255,255,.05); color: rgba(255,255,255,.4);
  border-color: rgba(255,255,255,.1);
}
.tp-tag--outline {
  background: transparent; color: var(--gold);
  border: 1px solid rgba(201,168,76,.3);
}
.tp-card-session {
  display: flex; gap: .75rem; font-size: .75rem; color: rgba(255,255,255,.4);
}
.tp-session-type { display: flex; align-items: center; gap: .3rem; }
.tp-card-btn {
  display: block; text-align: center; padding: .7rem;
  background: #1a6bff; color: #fff; border-radius: 6px;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; margin-top: .5rem;
  transition: background .2s;
}
.tp-card-btn:hover { background: #1557d4; }

/* ── PROFILE HERO ── */
.pr-hero {
  background: var(--dark); padding: 6rem 2rem 4rem;
}
.pr-hero-inner {
  max-width: 960px; margin: 0 auto;
  display: grid; grid-template-columns: 280px 1fr; gap: 3rem; align-items: center;
}
.pr-hero-photo {
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,.3);
  border: 3px solid rgba(26,107,255,.3);
}
.pr-hero-photo img {
  width: 100%; height: 340px; object-fit: cover; display: block;
}
.pr-hero-info { display: flex; flex-direction: column; gap: .75rem; }
.pr-back {
  font-size: .75rem; color: #1a6bff; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: .5rem;
}
.pr-back:hover { color: var(--gold); }
.pr-name {
  font-family: var(--serif); font-size: clamp(1.8rem,3vw,2.4rem);
  font-weight: 700; color: #fff; line-height: 1.15;
}
.pr-title { font-size: .82rem; color: rgba(255,255,255,.4); }
.pr-quick {
  display: flex; gap: .6rem; font-size: .8rem; color: rgba(255,255,255,.35);
}
.pr-session-types { display: flex; gap: 1rem; }
.pr-session {
  font-size: .78rem; color: rgba(255,255,255,.5);
  padding: .3rem .8rem; border: 1px solid rgba(255,255,255,.1);
  border-radius: 4px;
}
.pr-identity { font-size: .8rem; color: rgba(255,255,255,.3); font-style: italic; }
.pr-style-tags { display: flex; gap: .5rem; flex-wrap: wrap; }
.pr-style-tag {
  padding: .25rem .7rem; border-radius: 2rem; font-size: .7rem; font-weight: 600;
  background: rgba(201,168,76,.1); color: var(--gold); border: 1px solid rgba(201,168,76,.25);
}

/* ── PROFILE CONTENT ── */
.pr-content {
  background: var(--dark); padding: 0 2rem 5rem;
}
.pr-content-inner {
  max-width: 960px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 2.5rem;
}
.pr-section {
  padding: 2rem; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06); border-radius: 10px;
}
.pr-section-title {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 600;
  color: #fff; margin-bottom: 1rem;
  padding-bottom: .75rem; border-bottom: 1px solid rgba(255,255,255,.08);
}
.pr-text { font-size: .92rem; color: rgba(255,255,255,.55); line-height: 1.85; }
.pr-tags-wrap { display: flex; flex-direction: column; gap: 1rem; }
.pr-tag-group { display: flex; flex-direction: column; gap: .5rem; }
.pr-tag-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.3);
}
.pr-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.pr-details-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
}
.pr-detail {
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1rem; background: rgba(255,255,255,.02); border-radius: 6px;
  border: 1px solid rgba(255,255,255,.05);
}
.pr-detail-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #1a6bff;
}
.pr-detail-value { font-size: .88rem; color: rgba(255,255,255,.6); line-height: 1.5; }

/* ════════════════════════════════════════
   LIGHT MODE (.tp-light on body)
   ════════════════════════════════════════ */
.tp-light .tp-hero,
.tp-light .pr-hero { background: #f0f2f8; }
.tp-light .tp-hero-title,
.tp-light .pr-name { color: #111; }
.tp-light .tp-hero-sub,
.tp-light .pr-title { color: #666; }
.tp-light .tp-mode-toggle {
  background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.12); color: #333;
}
.tp-light .tp-grid-wrap,
.tp-light .pr-content { background: #fff; }
.tp-light .tp-search {
  background: #f5f5f5; border-color: #ddd; color: #111;
}
.tp-light .tp-search::placeholder { color: #999; }
.tp-light .tp-card {
  background: #fff; border-color: #e8e6e2;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.tp-light .tp-card:hover {
  box-shadow: 0 12px 36px rgba(0,0,0,.08); border-color: rgba(26,107,255,.3);
}
.tp-light .tp-card-name { color: #111; }
.tp-light .tp-card-title { color: #777; }
.tp-light .tp-card-meta { color: #999; }
.tp-light .tp-tag { background: rgba(26,107,255,.08); color: #1a6bff; border-color: rgba(26,107,255,.15); }
.tp-light .tp-tag--muted { background: #f5f5f5; color: #888; border-color: #e5e5e5; }
.tp-light .tp-tag--outline { color: #8b7230; border-color: rgba(139,114,48,.3); }
.tp-light .tp-card-session { color: #888; }
.tp-light .tp-card-photo { background: #eee; }
.tp-light .pr-hero-photo { border-color: rgba(26,107,255,.2); }
.tp-light .pr-back { color: #1a6bff; }
.tp-light .pr-quick { color: #999; }
.tp-light .pr-session { color: #777; border-color: #ddd; }
.tp-light .pr-identity { color: #999; }
.tp-light .pr-style-tag { background: rgba(201,168,76,.08); color: #8b7230; border-color: rgba(139,114,48,.2); }
.tp-light .pr-section { background: #fafafa; border-color: #eee; }
.tp-light .pr-section-title { color: #111; border-bottom-color: #eee; }
.tp-light .pr-text { color: #555; }
.tp-light .pr-tag-label { color: #999; }
.tp-light .pr-detail { background: #fff; border-color: #eee; }
.tp-light .pr-detail-label { color: #1a6bff; }
.tp-light .pr-detail-value { color: #444; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .pr-hero-inner { grid-template-columns: 1fr; text-align: center; }
  .pr-hero-photo { max-width: 240px; margin: 0 auto; }
  .pr-hero-info { align-items: center; }
  .pr-details-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tp-grid { grid-template-columns: 1fr; }
  .tp-hero { padding: 5rem 1.25rem 3rem; }
  .pr-hero { padding: 5rem 1.25rem 3rem; }
}

/* =========================================================
   CULTURAL & TRADITIONAL HEALERS — PsiDev Rebuild
   ========================================================= */

.ch-page {
  background: var(--warm);
  overflow: hidden;
}

/* Screen-reader only */
.ch-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── HERO ── */
.ch-hero {
  position: relative;
  background: var(--dark);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}
.ch-hero-art {
  position: relative;
  width: 100%;
  max-width: 1672px;
  margin: 0 auto;
  line-height: 0;
}
.ch-hero-art img {
  width: 100%;
  height: auto;
  display: block;
}
.ch-hero-hotspot {
  position: absolute;
  left: 4%;
  bottom: 12%;
  width: 220px;
  height: 56px;
  border-radius: 4px;
  z-index: 3;
}

/* ── REVEAL ANIMATIONS ── */
.ch-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .8s cubic-bezier(.2,0,0,1), transform .8s cubic-bezier(.2,0,0,1);
  will-change: opacity, transform;
}
.ch-reveal[data-ch-direction="left"]  { transform: translateX(-44px); }
.ch-reveal[data-ch-direction="right"] { transform: translateX(44px); }
.ch-reveal[data-ch-direction="up"]    { transform: translateY(36px); }
.ch-reveal.ch-in {
  opacity: 1;
  transform: none;
}

/* ── SECTION KICKER ── */
.ch-section-kicker {
  display: inline-block;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

/* ── INTRO ── */
.ch-intro {
  background: var(--warm);
  padding: 7rem 2rem;
}
.ch-intro-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.ch-intro h2 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin-bottom: 1.5rem;
}
.ch-intro p {
  font-size: 1.05rem;
  color: #555;
  line-height: 1.85;
  max-width: 660px;
  margin: 0 auto;
}

/* ── PRINCIPLES ── */
.ch-principles {
  background: #fff;
  padding: 7rem 2rem;
}
.ch-principles-head {
  max-width: 1100px;
  margin: 0 auto 3.5rem;
}
.ch-principles-head h2 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.2;
}
.ch-principle-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.ch-principle {
  padding: 2.5rem 2rem;
  background: var(--warm);
  border-radius: 10px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform .35s cubic-bezier(.2,0,0,1), box-shadow .35s;
}
.ch-principle:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0,0,0,.08);
}
.ch-principle span {
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 300;
  color: rgba(201,168,76,.4);
  line-height: 1;
}
.ch-principle h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: #1a1a1a;
}
.ch-principle p {
  font-size: .92rem;
  color: #5a5a5a;
  line-height: 1.75;
}

/* ── BAND ── */
.ch-band {
  background: var(--dark);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 480px;
}
.ch-band-img {
  position: relative;
  overflow: hidden;
  line-height: 0;
}
.ch-band-img img {
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
  display: block;
}
.ch-band-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem 4rem;
  max-width: 620px;
}
.ch-band-copy h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin-bottom: 1.5rem;
}
.ch-band-copy p {
  font-size: 1rem;
  color: rgba(255,255,255,.6);
  line-height: 1.85;
  margin-bottom: 2rem;
}
.ch-text-link {
  display: inline-flex;
  align-items: center;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  transition: letter-spacing .2s, color .2s;
}
.ch-text-link:hover {
  letter-spacing: .16em;
  color: var(--gold-light);
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .ch-principle-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .ch-band { grid-template-columns: 1fr; }
  .ch-band-img img { min-height: 320px; }
  .ch-band-copy { padding: 3.5rem 2rem; max-width: none; }
  .ch-intro, .ch-principles { padding: 5rem 1.5rem; }
}
@media (max-width: 600px) {
  .ch-hero-hotspot { width: 140px; height: 40px; }
  .ch-intro h2 { font-size: 1.7rem; }
}

/* =========================================================
   ORGANIZATIONS DIRECTORY
   ========================================================= */
.org-page{background:#ece9e2}.org-hero{min-height:580px;position:relative;isolation:isolate;display:grid;place-items:center;overflow:hidden;padding:5.5rem 1.5rem;color:#fff;background:var(--dark)}.org-hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,10,10,.95),rgba(10,10,10,.76) 52%,rgba(10,10,10,.55)),linear-gradient(0deg,rgba(10,10,10,.54),transparent 48%)}.org-hero-image{position:absolute;inset:0;z-index:-2;background:url('/assets/orient/organizations.webp') center/cover no-repeat;transform:scale(1.025)}.org-hero-content{width:min(100%,830px);text-align:center;position:relative}.org-kicker{display:block;margin-bottom:1rem;color:var(--gold-light);font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}.org-hero h1{font-family:var(--serif);font-size:clamp(3.5rem,8vw,7rem);font-weight:600;letter-spacing:-.04em;line-height:.86}.org-hero p{max-width:610px;margin:1.6rem auto 0;color:rgba(255,255,255,.78);font-size:1.03rem;line-height:1.75}.org-hero-meta{display:flex;justify-content:center;gap:1.2rem;margin-top:2.5rem;color:rgba(255,255,255,.7);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}.org-hero-meta span+span{padding-left:1.2rem;border-left:1px solid rgba(255,255,255,.32)}
.org-intro{width:min(100% - 3rem,1120px);margin:0 auto;padding:5.5rem 0 3.4rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.72fr);gap:4rem;align-items:end}.org-intro .org-kicker{color:var(--teal)}.org-intro h2{font-family:var(--serif);font-size:clamp(2.7rem,5vw,4.6rem);font-weight:600;letter-spacing:-.035em;line-height:.93}.org-intro p{color:#5d5b56;font-size:.98rem;line-height:1.85}.org-directory{width:min(100% - 3rem,1120px);margin:0 auto;padding-bottom:6rem}.org-group{border-top:1px solid rgba(26,26,26,.18);padding:2rem 0 3.8rem}.org-group-header{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.5rem}.org-group-header span{color:var(--teal);font-size:.72rem;font-weight:700;letter-spacing:.16em}.org-group-header h2{font-family:var(--serif);font-size:clamp(1.9rem,3vw,2.6rem);font-weight:600;line-height:1}.org-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.org-card{min-height:190px;position:relative;display:flex;flex-direction:column;padding:1.35rem;overflow:hidden;border:1px solid rgba(26,26,26,.1);background:#f8f7f3;transition:transform .28s ease,background .28s ease,box-shadow .28s ease}.org-card::before{content:'';position:absolute;inset:auto 0 0;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}.org-card:hover,.org-card:focus-visible{transform:translateY(-5px);background:#fff;box-shadow:0 15px 30px rgba(0,0,0,.11);outline:none}.org-card:hover::before,.org-card:focus-visible::before{transform:scaleX(1)}.org-card-mark{align-self:flex-end;color:var(--teal);font-size:1.15rem;line-height:1;transition:transform .25s ease}.org-card:hover .org-card-mark,.org-card:focus-visible .org-card-mark{transform:translate(3px,-3px)}.org-card h3{margin:1.15rem 0 auto;font-family:var(--serif);font-size:clamp(1.9rem,2.4vw,2.55rem);font-weight:650;line-height:.98;letter-spacing:-.03em}.org-card-link{margin-top:1.8rem;color:#56534d;font-size:.67rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase}.org-card-link span{margin-left:.35rem;color:var(--teal);font-size:.95rem}
@media(max-width:800px){.org-hero{min-height:510px;padding:4rem 1.25rem}.org-intro{grid-template-columns:1fr;gap:1.5rem;padding:4rem 0 2.5rem}.org-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.org-directory{padding-bottom:4rem}}@media(max-width:520px){.org-hero h1{font-size:clamp(3.1rem,15vw,4.6rem)}.org-hero-meta{gap:.7rem;font-size:.6rem}.org-hero-meta span+span{padding-left:.7rem}.org-intro,.org-directory{width:min(100% - 2rem,1120px)}.org-grid{grid-template-columns:1fr}.org-card{min-height:168px}}
/* =========================================================
   RESEARCH PARTICIPATION DIRECTORY
   ========================================================= */
.par-page{background:#f4f1eb}.par-hero{min-height:570px;position:relative;isolation:isolate;display:flex;align-items:flex-end;overflow:hidden;padding:5.5rem max(1.5rem,calc((100vw - 1120px)/2));color:#fff;background:var(--dark)}.par-hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,16,19,.93),rgba(5,16,19,.75) 52%,rgba(5,16,19,.38)),linear-gradient(0deg,rgba(5,16,19,.62),transparent 60%)}.par-hero-image{position:absolute;inset:0;z-index:-2;background:url('/assets/orient/participate.webp') center/cover no-repeat;transform:scale(1.03)}.par-hero-content{max-width:720px}.par-kicker{display:block;margin-bottom:1rem;color:var(--gold-light);font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}.par-hero h1{font-family:var(--serif);font-size:clamp(3.7rem,8vw,7.2rem);font-weight:600;letter-spacing:-.045em;line-height:.84}.par-hero p{max-width:585px;margin-top:1.5rem;color:rgba(255,255,255,.8);font-size:1.04rem;line-height:1.8}.par-hero-rule{width:76px;height:2px;margin-top:2rem;background:var(--gold)}
.par-intro{width:min(100% - 3rem,1120px);margin:0 auto;padding:5.5rem 0 3.2rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.74fr);gap:4rem;align-items:end}.par-intro .par-kicker{color:var(--teal)}.par-intro h2{max-width:670px;font-family:var(--serif);font-size:clamp(2.7rem,5vw,4.7rem);font-weight:600;letter-spacing:-.04em;line-height:.92}.par-intro p{color:#5d5b56;font-size:.98rem;line-height:1.85}.par-directory{width:min(100% - 3rem,1120px);margin:0 auto;padding:0 0 6rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.par-card{position:relative;min-height:270px;display:flex;flex-direction:column;padding:1.55rem;border:1px solid rgba(0,0,0,.1);background:#fff;transition:transform .25s ease,box-shadow .25s ease}.par-card:hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(0,0,0,.1)}.par-number{color:var(--teal);font-size:.7rem;font-weight:700;letter-spacing:.15em}.par-card-main{margin-top:2.5rem}.par-organization{display:block;color:#1c1c1b;font-family:var(--serif);font-size:clamp(1.75rem,2.7vw,2.35rem);font-weight:650;letter-spacing:-.025em;line-height:1.02;text-transform:none}.par-card h2{margin-top:.7rem;color:var(--teal);font-family:var(--sans);font-size:.8rem;font-weight:800;letter-spacing:.11em;line-height:1.25;text-transform:uppercase}.par-card p{margin-top:.8rem;color:#615e58;font-size:.9rem;line-height:1.55}.par-card-link{align-self:flex-start;margin-top:auto;padding-top:1.8rem;color:#1c1c1b;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.par-card-link span{margin-left:.35rem;color:var(--teal);font-size:1rem}.par-card-link:hover{color:var(--teal)}
@media(max-width:800px){.par-hero{min-height:520px;padding:4rem 1.25rem}.par-intro{grid-template-columns:1fr;gap:1.5rem;padding:4rem 0 2.5rem}.par-directory{grid-template-columns:1fr;padding-bottom:4rem}}@media(max-width:520px){.par-hero h1{font-size:clamp(3.3rem,15vw,4.9rem)}.par-intro,.par-directory{width:min(100% - 2rem,1120px)}.par-card{min-height:245px}}
/* =========================================================
   THEME ARTICLE PAGES
   ========================================================= */
.theme-page{background:var(--paper)}
.theme-hero{position:relative;min-height:430px;display:flex;align-items:flex-end;isolation:isolate;overflow:hidden;padding:6.5rem max(1.5rem,calc((100vw - 1280px)/2)) 4.2rem;color:#fff;background:#111}
.theme-hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,8,8,.92),rgba(8,8,8,.68) 52%,rgba(8,8,8,.3)),linear-gradient(0deg,rgba(8,8,8,.7),transparent 58%)}
.theme-hero-img{position:absolute;inset:0;z-index:-2;background:center/cover no-repeat;transform:scale(1.035)}
.theme-hero--perspectives .theme-hero-img{background-image:url('/assets/orient/perspectives-machu-picchu.webp')}
.theme-hero--mental-health .theme-hero-img{background-image:url('/assets/orient/mentalhealth-ed.webp')}
.theme-hero--science .theme-hero-img{background-image:url('/assets/orient/science-brain-model.webp')}
.theme-hero--philosophy .theme-hero-img{background-image:url('/assets/orient/philosophy.webp')}
.theme-hero-content{max-width:760px}
.theme-kicker{display:block;margin-bottom:.9rem;color:var(--gold-light);font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.theme-hero h1{font-family:var(--serif);font-size:clamp(3.6rem,8vw,7rem);font-weight:600;letter-spacing:-.045em;line-height:.86}
.theme-hero p{max-width:640px;margin-top:1.25rem;color:rgba(255,255,255,.8);font-size:1.03rem;line-height:1.75}
.theme-articles{padding-top:3rem}
@media(max-width:700px){.theme-hero{min-height:390px;padding:5.2rem 1.25rem 3rem}.theme-hero h1{font-size:clamp(3rem,15vw,4.5rem)}}
/* =========================================================
   RECOMMENDED BOOKS PAGE
   ========================================================= */
.books-page{background:#f1eee7;color:#1c1c1b}.books-hero{min-height:560px;position:relative;isolation:isolate;display:flex;align-items:flex-end;overflow:hidden;padding:5.8rem max(1.5rem,calc((100vw - 1180px)/2));color:#fff;background:#111}.books-hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,8,8,.95),rgba(8,8,8,.72) 52%,rgba(8,8,8,.38)),linear-gradient(0deg,rgba(8,8,8,.66),transparent 58%)}.books-hero-image{position:absolute;inset:0;z-index:-2;background:url('/assets/orient/suggested-books-take-a-book.webp') center/cover no-repeat;transform:scale(1.035)}.books-hero-content{max-width:780px}.books-kicker{display:block;margin-bottom:1rem;color:var(--gold-light);font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}.books-hero h1{font-family:var(--serif);font-size:clamp(3.6rem,8vw,7rem);font-weight:600;letter-spacing:-.045em;line-height:.86}.books-hero p{max-width:650px;margin-top:1.35rem;color:rgba(255,255,255,.8);font-size:1.04rem;line-height:1.75}.books-intro{width:min(100% - 3rem,1180px);margin:0 auto;padding:3.5rem 0 1.5rem;display:grid;grid-template-columns:.7fr 1.3fr;gap:2rem;align-items:start}.books-intro span{color:var(--teal);font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.books-intro p{max-width:760px;color:#625f58;line-height:1.75}.books-grid{width:min(100% - 3rem,1180px);margin:0 auto;padding:1rem 0 5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:1.6rem}.book-card{position:relative;display:grid;grid-template-columns:118px minmax(0,1fr);gap:1.15rem;min-height:245px;padding:1.05rem;border:1px solid rgba(0,0,0,.09);background:rgba(255,255,255,.78);box-shadow:0 12px 30px rgba(0,0,0,.045);transition:transform .24s ease,box-shadow .24s ease,background .24s ease}.book-card:hover{transform:translateY(-4px);background:#fff;box-shadow:0 18px 38px rgba(0,0,0,.1)}.book-cover{position:relative;display:flex;align-items:center;justify-content:center;align-self:start;min-height:178px;overflow:hidden;border-radius:2px;background:linear-gradient(145deg,#173f43,#d6b25e);box-shadow:8px 10px 20px rgba(0,0,0,.18)}.book-cover::after{content:'';position:absolute;inset:0;border:1px solid rgba(255,255,255,.22);pointer-events:none}.book-cover img{width:100%;height:100%;min-height:178px;object-fit:cover;display:block}.book-fallback-mark{position:absolute;top:.55rem;right:.65rem;color:rgba(255,255,255,.52);font-size:1.35rem}.book-fallback-title{position:relative;z-index:1;padding:1rem;color:#fff;font-family:var(--serif);font-size:1.05rem;font-weight:600;line-height:1.08;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.3)}.book-info{display:flex;min-width:0;flex-direction:column}.book-category{margin-bottom:.65rem;color:var(--teal);font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.book-info h2{font-family:var(--serif);font-size:clamp(1.35rem,2.2vw,1.9rem);font-weight:650;letter-spacing:-.025em;line-height:1.02;color:#1b1b1a}.book-info p{margin-top:.65rem;color:#68645d;font-size:.86rem;line-height:1.45}.book-link{align-self:flex-start;margin-top:auto;padding-top:1rem;color:#1d1d1b;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.book-link span{margin-left:.3rem;color:var(--teal)}.book-link:hover{color:var(--teal)}@media(max-width:760px){.books-hero{min-height:500px;padding:4.5rem 1.25rem}.books-intro{grid-template-columns:1fr;width:min(100% - 2rem,1180px);padding-top:3rem}.books-grid{width:min(100% - 2rem,1180px);grid-template-columns:1fr}.book-card{grid-template-columns:104px minmax(0,1fr);min-height:220px}.book-cover,.book-cover img{min-height:158px}}@media(max-width:460px){.book-card{grid-template-columns:1fr}.book-cover{width:145px}.book-info h2{font-size:1.6rem}}
/* =========================================================
   YOUTUBE VIDEOS PAGE
   ========================================================= */
.vid-page{background:#0f1516;color:#f7f1e6}.vid-hero{min-height:560px;position:relative;isolation:isolate;display:flex;align-items:flex-end;overflow:hidden;padding:5.8rem max(1.5rem,calc((100vw - 1180px)/2));background:#081011}.vid-hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,12,13,.96),rgba(6,12,13,.78) 54%,rgba(6,12,13,.38)),linear-gradient(0deg,rgba(6,12,13,.72),transparent 58%)}.vid-hero-image{position:absolute;inset:0;z-index:-2;background:url('/assets/orient/youtube-alex-gomez-marin.webp') center/cover no-repeat;transform:scale(1.035);filter:saturate(.9)}.vid-hero-content{max-width:790px}.vid-kicker{display:block;margin-bottom:1rem;color:var(--gold-light);font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase}.vid-hero h1{font-family:var(--serif);font-size:clamp(3.5rem,8vw,7rem);font-weight:600;letter-spacing:-.045em;line-height:.86}.vid-hero p{max-width:650px;margin-top:1.35rem;color:rgba(255,255,255,.8);font-size:1.04rem;line-height:1.75}.vid-subscribe{display:inline-flex;margin-top:1.6rem;padding:.85rem 1.1rem;border:1px solid rgba(255,255,255,.26);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.vid-subscribe:hover{background:var(--gold);border-color:var(--gold);color:#111}.vid-intro{width:min(100% - 3rem,1180px);margin:0 auto;padding:3.5rem 0 1.5rem;display:grid;grid-template-columns:.7fr 1.3fr;gap:2rem}.vid-intro span{color:var(--gold-light);font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.vid-intro p{max-width:760px;color:rgba(255,255,255,.68);line-height:1.75}.vid-grid{width:min(100% - 3rem,1180px);margin:0 auto;padding:1rem 0 5.5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.vid-card{background:#f8f4ec;color:#1b1b1a;border:1px solid rgba(255,255,255,.08);box-shadow:0 16px 38px rgba(0,0,0,.22);transition:transform .24s ease,box-shadow .24s ease}.vid-card:hover{transform:translateY(-5px);box-shadow:0 24px 46px rgba(0,0,0,.32)}.vid-thumb{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;overflow:hidden;cursor:pointer;background:#111}.vid-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease,filter .35s ease}.vid-card:hover .vid-thumb img{transform:scale(1.045);filter:saturate(1.05)}.vid-play{position:absolute;left:50%;top:50%;width:62px;height:62px;border-radius:50%;transform:translate(-50%,-50%);background:rgba(215,177,91,.94);box-shadow:0 10px 25px rgba(0,0,0,.28)}.vid-play::after{content:'';position:absolute;left:25px;top:20px;border-left:18px solid #111;border-top:11px solid transparent;border-bottom:11px solid transparent}.vid-body{display:flex;min-height:240px;flex-direction:column;padding:1.25rem}.vid-meta{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:.8rem;color:var(--teal);font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.vid-body h2{font-family:var(--serif);font-size:clamp(1.45rem,2.35vw,2rem);font-weight:650;letter-spacing:-.025em;line-height:1.03}.vid-body p{margin-top:.75rem;color:#66615a;font-size:.88rem;line-height:1.55}.vid-body a{align-self:flex-start;margin-top:auto;padding-top:1.2rem;color:#1d1d1b;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.vid-body a:hover{color:var(--teal)}.vid-empty{grid-column:1/-1;padding:3rem;background:#f8f4ec;color:#111;text-align:center}.vid-modal{position:fixed;inset:0;z-index:5000;display:none;align-items:center;justify-content:center;padding:1.5rem}.vid-modal[aria-hidden="false"]{display:flex}.vid-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(6px)}.vid-modal-panel{position:relative;z-index:1;width:min(100%,980px);background:#050505;box-shadow:0 22px 70px rgba(0,0,0,.55)}.vid-modal-close{position:absolute;right:.5rem;top:-2.6rem;width:2.1rem;height:2.1rem;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.35);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}.vid-frame-wrap{aspect-ratio:16/9}.vid-frame-wrap iframe{width:100%;height:100%;border:0;display:block}.vid-modal-open{overflow:hidden}@media(max-width:760px){.vid-hero{min-height:500px;padding:4.5rem 1.25rem}.vid-intro{grid-template-columns:1fr;width:min(100% - 2rem,1180px);padding-top:3rem}.vid-grid{width:min(100% - 2rem,1180px);grid-template-columns:1fr}.vid-body{min-height:210px}}