@charset "UTF-8";

/* ==============================
  Special Talk / preview & release
============================== */
:root {
  --talking-brains-bg: #190000;
  --talking-brains-gold: #a2874b;
  --talking-brains-white: #fff;
  --talking-brains-rule: rgba(162, 135, 75, .72);
}

html {
  background: var(--talking-brains-bg);
}

.TalkingBrainsBody {
  min-width: 320px;
  overflow-x: hidden;
  background: var(--talking-brains-bg);
  color: var(--talking-brains-white);
}

.TalkingBrainsHeader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 70px;
  border-bottom: 1px solid rgba(255, 255, 255, .76);
  background: rgba(25, 0, 0, .96);
}

.TalkingBrainsHeader__inner {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 3vw;
}

.TalkingBrainsHeader__logo {
  display: inline-flex;
  align-items: center;
}

.TalkingBrainsHeader__logo img {
  display: block;
  width: auto;
  max-height: 45px;
}

.TalkingBrainsPage {
  overflow: hidden;
  padding-top: 70px;
  background: var(--talking-brains-bg);
  color: var(--talking-brains-white);
}

.TalkingBrainsTitle {
  padding: 4.6vw 0 3.4vw;
  text-align: center;
}

.TalkingBrainsTitle h1 {
  color: var(--talking-brains-gold);
  font-family: 'Noto Serif JP', 'Times New Roman', serif;
  font-size: clamp(1.9rem, 2.7vw, 3rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: .04em;
}

/* ==============================
  Main speaker introduction
============================== */
.TalkingBrainsProfiles__inner {
  width: 60vw;
  margin: 0 auto;
}

.TalkingBrainsProfiles__people {
  display: grid;
  grid-template-columns: 24.6vw 7.1vw 24.6vw;
  column-gap: 1.35vw;
  justify-content: center;
  align-items: end;
}

.TalkingBrainsSpeaker {
  display: grid;
  min-width: 0;
  grid-template-rows: auto 20.5vw;
  row-gap: .9vw;
}

.TalkingBrainsSpeaker__heading {
  min-width: 0;
}

.TalkingBrainsSpeaker__name,
.TalkingBrainsSpeaker__meta {
  overflow: hidden;
  font-family: 'Noto Serif JP', serif;
  white-space: nowrap;
}

.TalkingBrainsSpeaker__name {
  font-size: 3.45vw;
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: .055em;
}

.TalkingBrainsSpeaker__meta {
  margin-top: .12vw;
  font-size: 1.12vw;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .025em;
}

.TalkingBrainsSpeaker__photo {
  display: block;
  width: 24.6vw;
  height: 20.5vw;
  object-fit: cover;
}

.TalkingBrainsSpeaker:first-child .TalkingBrainsSpeaker__photo {
  object-position: 51% 24%;
}

.TalkingBrainsSpeaker:last-child .TalkingBrainsSpeaker__photo {
  object-position: 50% 22%;
}

.TalkingBrainsProfiles__cross {
  position: relative;
  align-self: end;
  justify-self: center;
  display: block;
  width: 7.1vw;
  aspect-ratio: 1;
  margin-bottom: 6.7vw;
}

.TalkingBrainsProfiles__cross::before,
.TalkingBrainsProfiles__cross::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: .075vw;
  background: rgba(162, 135, 75, .82);
  transform-origin: center;
}

.TalkingBrainsProfiles__cross::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.TalkingBrainsProfiles__cross::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.TalkingBrainsIntro {
  width: 100%;
  margin-top: 4.4vw;
}

.TalkingBrainsIntro__lead {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  text-align: center;
}

.TalkingBrainsIntro__lead p:first-child {
  font-size: clamp(1.65rem, 2.5vw, 2.8rem);
  line-height: 1.6;
  letter-spacing: .05em;
}

.TalkingBrainsIntro__lead p:last-child {
  margin-top: .65vw;
  font-size: clamp(1.05rem, 1.62vw, 1.8rem);
  line-height: 1.7;
  letter-spacing: .04em;
}

.TalkingBrainsIntro__body {
  margin-top: 3.2vw;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 2.15;
  letter-spacing: calc(.045em + .1px);
  text-align: justify;
  text-justify: inter-character;
}

.TalkingBrainsIntro__body p + p {
  margin-top: 2.2vw;
}

.TalkingBrainsProfiles--release {
  margin-top: 7.2vw;
}

/* ==============================
  Preview: interview photo & date
============================== */
.TalkingBrainsPreviewVisual {
  margin-top: 3vw;
}

.TalkingBrainsPreviewVisual__inner {
  width: 60vw;
  margin: 0 auto;
}

.TalkingBrainsPreviewPhoto {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
}

.TalkingBrainsPreviewPhoto img {
  display: block;
  width: 100%;
  height: 40vw;
  object-fit: cover;
  object-position: center;
}

.TalkingBrainsSchedule {
  margin-top: 4.8vw;
  font-family: 'Noto Serif JP', serif;
  font-size: 6.4vw;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: 0;
  text-align: center;
}

.TalkingBrainsSchedule__date,
.TalkingBrainsSchedule__release {
  display: block;
}

.TalkingBrainsSchedule__number {
  font-size: 1em;
}

.TalkingBrainsSchedule__small,
.TalkingBrainsSchedule__weekday {
  font-size: .85em;
}

.TalkingBrainsSchedule__weekday {
  display: inline-block;
  margin-right: -.5em;
  margin-left: -.16em;
}

.TalkingBrainsSchedule__release {
  margin-top: .25vw;
  font-size: .94em;
  letter-spacing: .035em;
}

/* ==============================
  Release: video thumbnail
============================== */
.TalkingBrainsVideo__inner {
  width: 83vw;
  margin: 0 auto;
  padding-bottom: 3.2vw;
  border-bottom: 1px solid rgba(255, 255, 255, .68);
}

.TalkingBrainsVideo__stage {
  position: relative;
  width: 100%;
  margin: 0;
}

.TalkingBrainsVideo__thumbnail {
  display: block;
  width: 100%;
  height: auto;
}

.TalkingBrainsVideo__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 8.8vw;
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 .35vw .75vw rgba(0, 0, 0, .35));
}

/* ==============================
  Detailed profiles
============================== */
.TalkingBrainsBio {
  margin-top: 8vw;
}

.TalkingBrainsBio__inner {
  width: 73vw;
  margin: 0 auto;
}

.TalkingBrainsBio__title {
  display: flex;
  align-items: center;
  gap: 2.4vw;
  color: var(--talking-brains-gold);
  font-family: 'Times New Roman', 'Noto Serif JP', serif;
  font-size: clamp(1.6rem, 2.4vw, 2.7rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
}

.TalkingBrainsBio__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--talking-brains-rule);
}

.TalkingBrainsBioItem {
  display: grid;
  grid-template-columns: 24.6vw minmax(0, 1fr);
  grid-template-areas:
    "identity ."
    "photo text";
  column-gap: 4.4vw;
  row-gap: 1vw;
  align-items: start;
  margin-top: 5.8vw;
}

.TalkingBrainsBioItem + .TalkingBrainsBioItem {
  margin-top: 5vw;
}

.TalkingBrainsBioItem__identity {
  grid-area: identity;
}

.TalkingBrainsBioItem__identity h3 {
  font-family: 'Noto Serif JP', serif;
  font-size: 3.25vw;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .05em;
}

.TalkingBrainsBioItem__identity > p {
  margin-top: .15vw;
  font-family: 'Noto Serif JP', serif;
  font-size: 1.12vw;
  line-height: 1.4;
  letter-spacing: .02em;
}

.TalkingBrainsBioItem__photo {
  grid-area: photo;
  position: relative;
  width: 24.6vw;
  height: var(--talking-brains-bio-photo-height, auto);
  min-height: 0;
  align-self: stretch;
  overflow: hidden;
}

.TalkingBrainsBioItem__photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.TalkingBrainsBioItem:first-of-type .TalkingBrainsBioItem__photo img {
  object-position: 51% 24%;
}

.TalkingBrainsBioItem:last-of-type .TalkingBrainsBioItem__photo img {
  object-position: 50% 22%;
}

.TalkingBrainsBioItem__text {
  grid-area: text;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(.9rem, 1vw, 1.05rem);
  font-weight: 300;
  line-height: 2.05;
  letter-spacing: calc(.035em + .1px);
  text-align: justify;
  text-justify: inter-character;
}

.TalkingBrainsPage__footerSpace {
  height: 10vw;
}

@media screen and (max-width: 767px) {
  .TalkingBrainsHeader {
    height: 64px;
  }

  .TalkingBrainsHeader__inner {
    padding: 0 5vw;
  }

  .TalkingBrainsHeader__logo img {
    max-width: 58vw;
    max-height: 35px;
  }

  .TalkingBrainsPage {
    padding-top: 64px;
  }

  .TalkingBrainsTitle {
    padding: 3.5rem 0 2.7rem;
  }

  .TalkingBrainsTitle h1 {
    font-size: clamp(1.4rem, 6.7vw, 2rem);
  }

  .TalkingBrainsProfiles__inner {
    width: 87vw;
  }

  .TalkingBrainsProfiles__people {
    grid-template-columns: 34vw 10.5vw 34vw;
    column-gap: 2vw;
    justify-content: center;
  }

  .TalkingBrainsSpeaker {
    grid-template-rows: minmax(4.8rem, auto) 28.33vw;
    row-gap: 2vw;
  }

  .TalkingBrainsSpeaker__heading {
    align-self: end;
  }

  .TalkingBrainsSpeaker__name {
    font-size: clamp(1.35rem, 6.3vw, 1.8rem);
    line-height: 1.22;
    letter-spacing: .025em;
  }

  .TalkingBrainsSpeaker__meta {
    margin-top: .5vw;
    font-size: clamp(.52rem, 2.25vw, .68rem);
    line-height: 1.45;
    letter-spacing: 0;
    white-space: normal;
  }

  .TalkingBrainsSpeaker__photo {
    width: 34vw;
    height: 28.33vw;
  }

  .TalkingBrainsProfiles__cross {
    width: 10.5vw;
    margin-bottom: 8.915vw;
  }

  .TalkingBrainsProfiles__cross::before,
  .TalkingBrainsProfiles__cross::after {
    height: 1px;
  }

  .TalkingBrainsIntro {
    margin-top: 3.3rem;
  }

  .TalkingBrainsIntro__lead p:first-child {
    font-size: clamp(1.35rem, 6.2vw, 1.75rem);
    line-height: 1.65;
  }

  .TalkingBrainsIntro__lead p:last-child {
    margin-top: .6rem;
    font-size: clamp(.95rem, 4.1vw, 1.15rem);
    line-height: 1.8;
  }

  .TalkingBrainsIntro__body {
    margin-top: 2.3rem;
    font-size: 1.1rem;
    line-height: 2.05;
    letter-spacing: calc(.025em + .1px);
    text-align: justify;
  }

  .TalkingBrainsIntro__body p + p {
    margin-top: 1.75rem;
  }

  .TalkingBrainsProfiles--release {
    margin-top: 12vw;
  }

  .TalkingBrainsPreviewVisual {
    margin-top: 12vw;
  }

  .TalkingBrainsPreviewVisual__inner {
    width: 90vw;
  }

  .TalkingBrainsPreviewPhoto img {
    height: 60vw;
  }

  .TalkingBrainsSchedule {
    margin-top: 2.8rem;
    font-size: 13vw;
    line-height: 1.25;
  }

  .TalkingBrainsSchedule__release {
    margin-top: .1rem;
    font-size: .94em;
    letter-spacing: .03em;
  }

  .TalkingBrainsVideo__inner {
    width: 90vw;
    padding-bottom: 5vw;
  }

  .TalkingBrainsVideo__play {
    width: 18vw;
    filter: drop-shadow(0 1vw 2vw rgba(0, 0, 0, .35));
  }

  .TalkingBrainsBio {
    margin-top: 18vw;
  }

  .TalkingBrainsBio__inner {
    width: 87vw;
  }

  .TalkingBrainsBio__title {
    gap: 5vw;
    font-size: clamp(1.55rem, 7vw, 2rem);
  }

  .TalkingBrainsBioItem {
    grid-template-columns: 1fr;
    grid-template-areas:
      "identity"
      "photo"
      "text";
    gap: 0;
    margin-top: 3.5rem;
  }

  .TalkingBrainsBioItem + .TalkingBrainsBioItem {
    margin-top: 5rem;
  }

  .TalkingBrainsBioItem__identity h3 {
    font-size: clamp(1.75rem, 8vw, 2.3rem);
  }

  .TalkingBrainsBioItem__identity > p {
    margin-top: .2rem;
    font-size: .85rem;
  }

  .TalkingBrainsBioItem__photo {
    width: 70vw;
    height: 58.33vw;
    margin-top: 1rem;
    align-self: start;
  }

  .TalkingBrainsBioItem__text {
    margin-top: 2rem;
    font-size: .94rem;
    line-height: 2.05;
    letter-spacing: calc(.025em + .1px);
    text-align: justify;
  }

  .TalkingBrainsPage__footerSpace {
    height: 10vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .TalkingBrainsPage *,
  .TalkingBrainsPage *::before,
  .TalkingBrainsPage *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}