/* ==========================================================================
   Members page (Figma: 0918 / Members, 1440 x 3995 + footer)
   Depends on css/style.css for tokens, header, footer
   ========================================================================== */

.members {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 3233px;
}

/* ---------- left column ---------- */

/* The whole left column follows the scroll (sticky). Content flows top-to-bottom so any
   number of talents fits. If the column is taller than the viewport it sticks with its
   bottom edge aligned to the viewport (--side-h is measured by js/members.js). */
.members__side {
  position: sticky;
  top: min(0px, calc(100vh / var(--page-scale) - var(--side-h, 900px)));
  z-index: 1;
  flex: none;
  width: 600px;
  padding: 135px 0 2px;
}

.members__label { margin-left: var(--gutter); }
.members__title {
  margin: 19px 0 0 var(--gutter);
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -0.04em;
}

.talent-list {
  margin: 41px 0 0 119px;
  width: 362px;
}
/* equal rows: every card is as tall as the tallest one */
.talent-list { display: grid; grid-auto-rows: 1fr; gap: 22px; }
.talent-list > li { display: flex; }

.talent-card {
  position: relative;
  display: flex;
  flex: 1;
  /* 138px in the design; grows when the name wraps or the tags need more rows */
  min-height: 138px;
  border: 1.5px solid var(--color-red);
  border-radius: 12px;
  overflow: hidden;
  color: var(--color-red);
  transition: transform var(--duration-normal) var(--ease-out-expo), background-color var(--duration-fast) ease;
}
.talent-card:hover { transform: translateY(-2px); }
.talent-card:focus-visible { outline: 2px solid var(--color-red); outline-offset: 3px; }
.talent-card__photo {
  /* out of flow so the photo fills the card's height without setting it */
  position: absolute;
  left: 0; top: 0;
  width: 120px; height: 100%;
  object-fit: cover;
}
.talent-card__body {
  position: relative;
  flex: 1;
  min-width: 0;
  margin-left: 120px;
  /* right padding keeps the name and tags clear of the arrow */
  padding: 20px 54px 20px 15px;
}
.talent-card__followers {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.02em;
}
.talent-card__name {
  margin-top: 12px;
  font-size: 20px;
  line-height: 22px;
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
}
.talent-card__name--en {
  font-family: var(--font-en);
  font-size: 19px;
  letter-spacing: 0.02em;
}
.talent-card__arrow {
  position: absolute;
  right: 20px; top: calc(50% - 13px);
  width: 26px; height: 26px;
}
.talent-card--active {
  background: var(--color-red);
  color: var(--color-light);
}
.talent-card--active .chips li { background: var(--color-red-deep); color: var(--color-light); }

/* chips (tags) */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 14px;
}
.chips li {
  height: 22px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  background: #fff;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-red);
}
.chips--sm { gap: 4px; margin-top: 14px; }
.chips--sm li { height: 16px; padding: 0 7px; font-size: 12px; }

/* side note (sticker + speech) */
.side-note {
  position: relative;
  margin: 71px 0 0 100px;
  width: 380px; height: 270px;
}
.side-note {
  display: block;
  color: inherit;
}
.side-note__photo { transition: transform var(--duration-normal) var(--ease-out-expo); }
.side-note:hover .side-note__photo { transform: translateY(-4px) rotate(-2deg); }
.side-note:hover .side-note__text { text-decoration: underline; text-underline-offset: 3px; }
.side-note:focus-visible { outline: 2px solid var(--color-red); outline-offset: 4px; border-radius: 8px; }
.side-note__photo {
  position: absolute;
  left: 0; top: 2px;
  width: 172px; height: 267px;
  object-fit: contain;
  object-position: center bottom;
}
.side-note__marks {
  position: absolute;
  left: 168px; top: 0;
  width: 12.5px; height: 96.5px;
  color: var(--color-red);
}
.side-note__text {
  position: absolute;
  left: 174px; top: 16px;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.05em;
  width: 206px;          /* space right of the photo; long lines wrap */
}
/* no photo set: the speech bubble text starts at the left edge */
.side-note--text-only { height: auto; }
.side-note--text-only .side-note__marks { left: 0; }
.side-note--text-only .side-note__text { position: relative; left: 0; top: 0; margin-left: 8px; padding-top: 20px; width: 360px; }

/* ---------- right column ---------- */

.talent {
  position: relative;
  flex: none;
  width: 720px;
  margin: 136px 0 120px;
}

.talent__hero {
  /* flow layout: a long name wraps (followers stay on its right) and pushes the buttons down.
     Default spacing reproduces the design (883px tall with SNS and link rows). */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 24px;
  align-items: start;
  padding: 61px 0 60px;
}
.talent__photo {
  grid-column: 1 / -1;
  width: 720px; height: 481px;
  border: 1.5px solid var(--color-red);
  border-radius: 14px;
  object-fit: cover;
}
.talent__chips {
  grid-column: 1 / -1;
  margin: 31px 0 0;
}
.talent__name {
  grid-column: 1;
  margin: 16px 0 0 -2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.talent__followers {
  grid-column: 2;
  margin: 12px 2px 0 0;
  text-align: center;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
}
.talent__followers strong {
  display: block;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.talent__followers span {
  display: block;
  margin-top: 3px;
  font-family: var(--font-en);
  font-size: 16px;
  letter-spacing: 0.02em;
}

.sns {
  grid-column: 1 / -1;
  margin-top: 33px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.sns__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 53px;
  padding: 0 16px 0 14px;
  border: 1.5px solid var(--color-red);
  border-radius: 8px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--color-red);
  transition: background-color var(--duration-fast) ease;
}
.sns__btn:hover { background: #fff; }
.sns__btn:focus-visible { outline: 2px solid var(--color-red); outline-offset: 3px; }
.sns__btn--ig { padding-left: 8px; gap: 3px; }
.sns__btn svg, .sns__btn img { flex: none; }

.links {
  grid-column: 1 / -1;
  margin-top: 33px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.sns + .links { margin-top: 9px; }
.links__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 53px;
  padding: 0 18px 0 16px;
  border: 1.5px solid var(--color-red);
  border-radius: 8px;
  font-size: 16px;
  letter-spacing: -0.04em;
  color: var(--color-red);
  transition: background-color var(--duration-fast) ease;
}
.links__btn:hover { background: #fff; }
.links__btn:focus-visible { outline: 2px solid var(--color-red); outline-offset: 3px; }
.links__btn svg { flex: none; }

/* hand-drawn divider */
.divider {
  display: block;
  width: 720px; height: 8px;
  color: var(--color-red);
}

/* generic section inside the talent column */
.tsec {
  position: relative;
  padding: 61px 0 0;
}
.tsec__title {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.04em;
}
.tsec__title span {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* profile */
.profile__text {
  margin-top: 35px;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.05em;
}
.profile__text p + p { margin-top: 26px; }
.profile__data {
  margin: 31px 0 60px;
  border-top: 2px solid #fff;
}
.profile__data div {
  display: flex;
  height: 51px;
  align-items: center;
  border-bottom: 2px solid #fff;
  font-size: 16px;
  letter-spacing: 0.05em;
}
.profile__data dt { width: 119px; margin: 0; }
.profile__data dd { margin: 0; }

/* fields */
.fields {
  display: grid;
  grid-template-columns: repeat(3, 229px);
  gap: 16px 16px;
  margin: 35px 0 60px;
}
.fields li {
  height: 104px;
  padding: 24px 24px 0;
  border-radius: 8px;
  background: #fff;
}
.fields__title {
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.04em;
}
.fields__desc {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.05em;
}

/* artifacts: horizontal slider (trackpad / wheel / swipe, and mouse drag via js/members.js).
   The track runs from the column's left edge to the page's right edge (840px). */
.tworks {
  display: flex;
  gap: 24px;
  width: 840px;
  margin: 35px 0 59px;
  padding-right: 120px;           /* last card can rest at the design's right margin */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-left: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tworks::-webkit-scrollbar { display: none; }
.tworks.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.tworks.is-dragging a { pointer-events: none; }
.twork {
  position: relative;
  flex: none;
  scroll-snap-align: start;
  width: 420px; height: 358px;
  padding: 14px;
  border: 2px solid transparent;
  border-radius: 20px;
  background: var(--color-bg);
  transition: border-color var(--duration-fast) ease;
}
.twork:hover,
.twork:focus-within { border-color: var(--color-red); }
.twork__link { display: block; color: inherit; }
.twork__link:focus-visible { outline: none; }
.twork__img {
  width: 388px; height: 246px;
  border-radius: 10px;
  object-fit: cover;
}
.twork__title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.04em;
}
/* hover underline is drawn left → right (same motion as .project__name in css/style.css) */
.twork__title span {
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 1px) / 0 1.5px no-repeat;
  transition: background-size var(--duration-normal) var(--ease-out-expo);
}
.twork:hover .twork__title span,
.twork:focus-within .twork__title span { background-size: 100% 1.5px; }
.twork__ext { width: 19.5px; height: 19.9px; flex: none; }
.twork .chips { margin-top: 17px; }
.twork .chips li { padding: 0 12px; }

/* gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 224px);
  gap: 23px 24px;
  margin: 34px 0 0;
}
.gallery img {
  width: 224px; height: 224px;
  border-radius: 12px;
  object-fit: cover;
}
.gallery p {
  margin-top: 6px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* footer sits directly under the content here (no overlapping section above) */
.page--members .site-footer { margin-top: 0; }

/* PC: the logo stays in the viewport corner while the page scrolls (the 120px left gutter is
   always free), and fades out just before the red footer would slide under it (js/nav.js). */
@media (min-width: 768px) {
  .page--members .site-header__logo {
    position: fixed;
    transition:
      transform var(--duration-normal) var(--ease-out-expo),
      opacity var(--duration-normal) ease,
      visibility 0s linear 0s;
  }
  .page--members .site-header__logo.is-away {
    opacity: 0; visibility: hidden; pointer-events: none;
    transition:
      transform var(--duration-normal) var(--ease-out-expo),
      opacity var(--duration-normal) ease,
      visibility 0s linear var(--duration-normal);
  }
}

/* talent switcher is SP-only */
.talent-switch { display: none; }

/* ==========================================================================
   Smartphone (≤767px, 390px canvas) — no Figma SP frame for this page yet;
   follows the TOP SP system. The left column is removed: its sticker + speech
   bubble float at the bottom-left, and a switcher to the other talents floats
   at the bottom-right.
   ========================================================================== */
@media (max-width: 767px) {
  html[data-sp] .page--members .fab-contact { display: none; }

  html[data-sp] .members { display: block; min-height: 0; padding-bottom: 120px; }

  /* heading only; the talent list moves into the floating switcher */
  html[data-sp] .members__side { position: static; width: auto; padding: 150px 20px 0; }
  html[data-sp] .members__label { margin-left: 0; font-size: 14px; }
  html[data-sp] .members__title { margin: 12px 0 0; font-size: 28px; line-height: 36px; }
  html[data-sp] .talent-list { display: none; }

  /* sticker + speech bubble: pinned to the bottom-left of the screen.
     The bubble sits ABOVE the photo (clear of the right-hand switcher),
     hides while scrolling, and both floaters hide over the footer (js/members.js). */
  html[data-sp] .side-note {
    position: fixed;
    left: 8px; bottom: 0;
    margin: 0;
    width: 76px; height: 118px;
    z-index: 25;
    transition: opacity 0.3s ease, transform 0.4s var(--ease-out-expo);
  }
  html[data-sp] .side-note__photo { left: 0; top: auto; bottom: 0; width: 76px; height: 118px; }
  /* same look as the PC side: hand-drawn marks + plain red text beside the photo */
  html[data-sp] .side-note__marks { left: 75px; top: -14px; width: 10px; height: 76px; transition: opacity 0.25s ease; }
  html[data-sp] .side-note__text {
    left: 80px; top: 2px; bottom: auto;
    width: max-content;
    font-size: 10px; line-height: 15px; letter-spacing: 0.08em;
    white-space: nowrap;
    /* soft halo in the page colour so the text stays legible over content (no box) */
    text-shadow: 0 0 3px var(--color-bg), 0 0 6px var(--color-bg);
    isolation: isolate;
    transform-origin: 0 50%;
    transition: opacity 0.25s ease, transform 0.35s var(--ease-out-expo);
  }
  html[data-sp] .side-note.is-quiet .side-note__marks { opacity: 0; }
  /* faint, edge-less backdrop so the text reads over busy content without looking like a box */
  html[data-sp] .side-note__text::before {
    content: "";
    position: absolute;
    inset: -16px -26px -16px -22px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(241 237 237 / 0.9) 55%, rgb(241 237 237 / 0.6) 75%, rgb(241 237 237 / 0) 100%);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 100%);
            mask-image: radial-gradient(closest-side, #000 60%, transparent 100%);
  }
  html[data-sp] .side-note.is-quiet .side-note__text { opacity: 0; transform: translateX(-6px); }
  html[data-sp] .side-note.is-away,
  html[data-sp] .talent-switch.is-away { opacity: 0; transform: translateY(24px); pointer-events: none; }
  html[data-sp] .talent-switch { transition: opacity 0.3s ease, transform 0.4s var(--ease-out-expo); }
  html[data-sp] .side-note--text-only { width: 0; height: 60px; bottom: 16px; }
  html[data-sp] .side-note--text-only .side-note__marks { left: 0; }
  html[data-sp] .side-note--text-only .side-note__text { left: 6px; }

  /* switcher: pinned to the bottom-right of the screen */
  html[data-sp] .talent-switch {
    display: block;
    position: fixed;
    right: 16px; bottom: 16px;
    z-index: 30;
  }
  html[data-sp] .talent-switch__btn {
    display: flex; align-items: center; gap: 8px;
    height: 48px;
    padding: 0 16px 0 6px;
    border: 0; border-radius: 24px;
    background: var(--color-red);
    color: var(--color-white);
    font: inherit; font-size: 13px; letter-spacing: 0.06em;
    box-shadow: 0 6px 16px rgb(0 0 0 / 0.18);
  }
  html[data-sp] .talent-switch__btn:focus-visible { outline: 2px solid var(--color-red); outline-offset: 3px; }
  html[data-sp] .talent-switch__faces { display: flex; }
  html[data-sp] .talent-switch__face {
    width: 36px; height: 36px;
    border: 2px solid var(--color-red);
    border-radius: 50%;
    object-fit: cover;
  }
  html[data-sp] .talent-switch__face + .talent-switch__face { margin-left: -12px; }

  html[data-sp] .talent-switch__list:not([hidden]) {
    position: absolute;
    right: 0; bottom: 58px;
    width: 240px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 6px;
    border-radius: 10px;
    background: var(--color-red);
    box-shadow: 0 10px 24px rgb(0 0 0 / 0.2);
    animation: sp-menu-in 0.25s var(--ease-out-expo);
  }
  html[data-sp] .talent-switch__list li + li { border-top: 1px solid var(--color-red-deep); }
  html[data-sp] .talent-switch__item {
    display: flex; align-items: center; gap: 12px;
    padding: 8px;
    font-size: 14px; letter-spacing: 0.04em;
    color: var(--color-white);
  }
  html[data-sp] .talent-switch__item.is-current { opacity: 0.55; }
  html[data-sp] .talent-switch__item:focus-visible { outline: 2px solid var(--color-white); outline-offset: -2px; border-radius: 6px; }
  html[data-sp] .talent-switch__photo { width: 40px; height: 46px; border-radius: 6px; object-fit: cover; flex: none; }

  /* ---------- detail column ---------- */
  html[data-sp] .talent { width: 350px; margin: 26px 20px 0; }

  html[data-sp] .talent__hero { display: block; padding: 0 0 36px; }
  html[data-sp] .talent__photo { position: static; width: 350px; height: 234px; border-radius: 12px; }
  html[data-sp] .talent__chips { position: static; margin-top: 14px; }
  html[data-sp] .talent__name { position: static; margin: 12px 0 0; font-size: 38px; white-space: normal; }
  html[data-sp] .talent__followers { position: static; margin: 8px 0 0; display: flex; align-items: baseline; gap: 8px; margin-top: 8px; text-align: left; }
  html[data-sp] .talent__followers strong { font-size: 26px; }
  html[data-sp] .talent__followers span { margin-top: 0; font-size: 14px; }
  html[data-sp] .sns,
  html[data-sp] .links,
  html[data-sp] .talent__hero:not(:has(.sns)) .links { position: static; flex-wrap: wrap; gap: 8px; }
  html[data-sp] .sns + .links { margin-top: 8px; }
  html[data-sp] .sns { margin-top: 18px; }
  html[data-sp] .links { margin-top: 8px; }
  html[data-sp] .sns__btn,
  html[data-sp] .links__btn { height: 44px; padding: 0 12px 0 10px; font-size: 14px; }
  html[data-sp] .sns__btn--ig { padding-left: 6px; }
  html[data-sp] .sns__btn--ig img { width: 30px; height: 30px; }

  html[data-sp] .divider { width: 350px; height: 6px; }
  html[data-sp] .tsec { padding-top: 40px; }
  html[data-sp] .tsec__title { gap: 14px; font-size: 24px; }
  html[data-sp] .tsec__title span { font-size: 12px; }

  html[data-sp] .profile__text { margin-top: 24px; font-size: 14px; line-height: 24px; letter-spacing: 0.05em; }
  html[data-sp] .profile__text p + p { margin-top: 24px; }
  html[data-sp] .profile__data { margin: 20px 0 44px; }
  html[data-sp] .profile__data div { height: 44px; font-size: 14px; }
  html[data-sp] .profile__data dt { width: 92px; }

  html[data-sp] .fields { grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 24px 0 44px; }
  html[data-sp] .fields li { height: auto; padding: 18px 16px; }
  html[data-sp] .fields__title { font-size: 16px; line-height: 1.35; }
  html[data-sp] .fields__desc { margin-top: 8px; font-size: 12px; line-height: 1.5; }

  /* artifacts slider bleeds to the screen edges */
  html[data-sp] .tworks { width: 390px; margin: 24px -20px 44px; padding: 0 20px; gap: 14px; scroll-padding-left: 20px; }
  html[data-sp] .twork { width: 290px; height: auto; padding: 10px 10px 14px; border-radius: 16px; }
  html[data-sp] .twork__img { width: 266px; height: 169px; border-radius: 8px; }
  html[data-sp] .twork__title { gap: 10px; margin-top: 12px; font-size: 16px; }
  html[data-sp] .twork .chips { margin-top: 10px; }

  html[data-sp] .gallery { grid-template-columns: repeat(3, 110px); gap: 20px 10px; margin-top: 24px; }
  html[data-sp] .gallery img { width: 110px; height: 110px; border-radius: 8px; }
  html[data-sp] .gallery p { font-size: 11px; }
}