/* ========================================
   WORLD//ARCHIVE
   ABOUT US
   ======================================== */


/* ========================================
   PAGE SCROLL
   ======================================== */

html,
body {
  min-height: 100%;
  height: auto;

  overflow-x: hidden;
  overflow-y: auto;
}


body.modal-open {
  overflow: hidden;
}


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

.about-page {
  width:
    min(1180px, calc(100% - 48px));

  margin:
    0 auto;

  padding:
    110px 0 120px;
}



/* ========================================
   HERO
   ======================================== */


.about-hero {
  max-width:
    760px;

  margin-bottom:
    110px;
}


.about-eyebrow {
  margin:
    0 0 18px;

  color:
    var(--accent-red);

  font-size:
    0.62rem;

  letter-spacing:
    0.2em;
}


.about-hero h1 {
  margin:
    0;

  color:
    var(--text-main);

  font-family:
    Georgia,
    "Noto Serif TC",
    "Times New Roman",
    serif;

  font-size:
    clamp(4rem, 9vw, 7.5rem);

  font-weight:
    normal;

  line-height:
    0.92;

  letter-spacing:
    -0.055em;
}


.about-intro {
  max-width:
    610px;

  margin:
    38px 0 0;

  color:
    var(--text-muted);

  font-size:
    0.95rem;

  line-height:
    1.9;
}



/* ========================================
   TEAM HEADING
   ======================================== */


.about-section-heading {
  display:
    grid;

  grid-template-columns:
    150px 1fr;

  gap:
    30px;

  margin-bottom:
    42px;

  padding-top:
    24px;

  border-top:
    1px solid
    rgba(255,255,255,0.10);
}


.about-section-heading > p {
  margin:
    5px 0 0;

  color:
    var(--accent-red);

  font-size:
    0.6rem;

  letter-spacing:
    0.17em;
}


.about-section-heading h2 {
  margin:
    0;

  color:
    var(--text-main);

  font-family:
    Georgia,
    "Noto Serif TC",
    "Times New Roman",
    serif;

  font-size:
    clamp(1.8rem, 4vw, 3rem);

  font-weight:
    normal;
}



/* ========================================
   TEAM GRID
   ======================================== */


.about-team-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    46px 24px;
}



/* ========================================
   STAFF CARD
   ======================================== */


.staff-card {
  min-width:
    0;
}


.staff-card-portrait {
  position:
    relative;

  width:
    100%;

  aspect-ratio:
    3 / 4;

  overflow:
    hidden;

  margin-bottom:
    24px;

  background:
    rgba(255,255,255,0.035);
}


.staff-card-portrait img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  display:
    block;
}


.staff-card-content {
  padding-right:
    14px;
}


.staff-position {
  margin:
    0 0 9px;

  color:
    var(--accent-red);

  font-size:
    0.57rem;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;
}


.staff-card h3 {
  margin:
    0 0 16px;

  color:
    var(--text-main);

  font-family:
    Georgia,
    "Noto Serif TC",
    "Times New Roman",
    serif;

  font-size:
    1.65rem;

  font-weight:
    normal;
}


.staff-public-profile {
  min-height:
    74px;

  margin:
    0;

  color:
    var(--text-muted);

  font-size:
    0.78rem;

  line-height:
    1.75;
}


.staff-profile-button {
  margin-top:
    22px;

  padding:
    0 0 5px;

  border:
    0;

  border-bottom:
    1px solid
    rgba(255,255,255,0.3);

  background:
    transparent;

  color:
    var(--text-soft);

  font-family:
    inherit;

  font-size:
    0.65rem;

  letter-spacing:
    0.1em;

  cursor:
    pointer;
}


.staff-profile-button:hover {
  color:
    white;

  border-color:
    var(--accent-red);
}



.staff-card-portrait.staff-portrait-unavailable,
.staff-profile-portrait.staff-portrait-unavailable {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    14px;

  color:
    var(--text-dark);
}


.staff-portrait-x {
  display:
    block;

  position:
    static;

  font-family:
    Georgia,
    "Noto Serif TC",
    serif;

  font-size:
    2.2rem;

  font-weight:
    300;

  line-height:
    1;
}


.staff-portrait-unavailable small {
  display:
    block;

  position:
    static;

  inset:
    auto;

  margin:
    0;

  text-align:
    center;

  color:
    var(--text-dark);

  font-size:
    0.53rem;

  line-height:
    1.65;

  letter-spacing:
    0.15em;
}



/* ========================================
   MODAL
   ======================================== */


.staff-modal {
  position:
    fixed;

  inset:
    0;

  z-index:
    3000;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    32px;

  visibility:
    hidden;

  opacity:
    0;

  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}


.staff-modal.is-open {
  visibility:
    visible;

  opacity:
    1;
}


.staff-modal-backdrop {
  position:
    absolute;

  inset:
    0;

  background:
    rgba(0,0,0,0.88);

  backdrop-filter:
    blur(5px);
}


.staff-modal-dialog {
  position:
    relative;

  z-index:
    1;

  width:
    min(960px, 100%);

  max-height:
    calc(100vh - 64px);

  overflow-y:
    auto;

  padding:
    34px;

  border:
    1px solid
    rgba(255,255,255,0.13);

  background:
    #0d0d0d;

  box-shadow:
    0 35px 100px
    rgba(0,0,0,0.65);
}

/* ========================================
   MODAL SCROLLBAR
   ======================================== */


.staff-modal-dialog {
  scrollbar-width:
    thin;

  scrollbar-color:
    var(--accent-red)
    rgba(255,255,255,0.05);

  overscroll-behavior:
    contain;
}


/* Chrome / Edge / Safari */

.staff-modal-dialog::-webkit-scrollbar {
  width:
    9px;
}


.staff-modal-dialog::-webkit-scrollbar-track {
  background:
    rgba(255,255,255,0.025);
}


.staff-modal-dialog::-webkit-scrollbar-thumb {
  background:
    rgba(230,0,60,0.65);

  border:
    2px solid #0d0d0d;

  border-radius:
    999px;
}


.staff-modal-dialog::-webkit-scrollbar-thumb:hover {
  background:
    var(--accent-red);
}


.staff-modal-x {
  position:
    absolute;

  top:
    14px;

  right:
    18px;

  z-index:
    2;

  border:
    0;

  background:
    transparent;

  color:
    var(--text-muted);

  font-family:
    Georgia,
    "Noto Serif TC",
    serif;

  font-size:
    1.8rem;

  cursor:
    pointer;
}


.staff-modal-x:hover {
  color:
    var(--accent-red);
}



/* ========================================
   MODAL LAYOUT
   ======================================== */


.staff-modal-layout {
  display:
    grid;

  grid-template-columns:
    minmax(220px, 300px)
    minmax(0, 1fr);

  gap:
    42px;
}


.staff-profile-portrait {
  width:
    100%;

  aspect-ratio:
    3 / 4;

  overflow:
    hidden;

  background:
    rgba(255,255,255,0.035);
}


.staff-profile-portrait img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


.staff-profile-label {
  margin:
    0 0 12px;

  color:
    var(--accent-red);

  font-size:
    0.56rem;

  letter-spacing:
    0.17em;
}


.staff-profile-content h2 {
  margin:
    0;

  color:
    var(--text-main);

  font-family:
    Georgia,
    "Noto Serif TC",
    "Times New Roman",
    serif;

  font-size:
    clamp(2.5rem, 6vw, 4.5rem);

  font-weight:
    normal;

  line-height:
    0.95;

  letter-spacing:
    -0.045em;
}


.staff-profile-position {
  margin:
    14px 0 30px;

  color:
    var(--text-muted);

  font-size:
    0.72rem;

  letter-spacing:
    0.08em;
}



/* ========================================
   ARCHIVE DATA
   ======================================== */


.staff-archive-data {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  margin-bottom:
    34px;

  border-top:
    1px solid
    rgba(255,255,255,0.10);

  border-left:
    1px solid
    rgba(255,255,255,0.10);
}


.staff-archive-data > div {
  padding:
    14px 16px;

  border-right:
    1px solid
    rgba(255,255,255,0.10);

  border-bottom:
    1px solid
    rgba(255,255,255,0.10);
}


.staff-archive-data span {
  display:
    block;

  margin-bottom:
    7px;

  color:
    var(--text-dark);

  font-size:
    0.51rem;

  letter-spacing:
    0.13em;
}


.staff-archive-data strong {
  color:
    var(--text-soft);

  font-size:
    0.68rem;

  font-weight:
    normal;
}



/* ========================================
   ARCHIVE PROFILE
   ======================================== */


.staff-archive-profile {
  margin:
    0 0 30px;
}


.staff-profile-section-label {
  margin:
    0 0 14px !important;

  color:
    var(--accent-red) !important;

  font-family:
    inherit !important;

  font-size:
    0.54rem !important;

  letter-spacing:
    0.15em;
}


.staff-archive-profile > p {
  margin:
    0 0 14px;

  color:
    var(--text-muted);

  font-family:
    Georgia,
    "Noto Serif TC",
    "Times New Roman",
    serif;

  font-size:
    0.92rem;

  line-height:
    1.8;
}


.staff-profile-aside {
  color:
    var(--text-soft) !important;

  font-style:
    italic;
}


.staff-profile-struck {
  color:
    var(--text-dark) !important;
}



/* ========================================
   PREFERENCES
   ======================================== */


.staff-preferences {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    12px;

  margin:
    28px 0;
}


.staff-preferences > div {
  padding:
    14px 16px;

  background:
    rgba(255,255,255,0.025);
}


.staff-preferences span {
  display:
    block;

  margin-bottom:
    8px;

  color:
    var(--text-dark);

  font-size:
    0.5rem;

  letter-spacing:
    0.13em;
}


.staff-preferences strong,
.staff-preferences del {
  display:
    block;

  color:
    var(--text-soft);

  font-size:
    0.68rem;

  font-weight:
    normal;
}


.staff-preferences del {
  margin-top:
    5px;

  color:
    var(--text-dark);
}



/* ========================================
   CLOSE
   ======================================== */


.staff-close-profile {
  margin-top:
    10px;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    var(--text-soft);

  font-family:
    "Courier New",
    "Noto Serif TC",
    monospace;

  font-size:
    0.62rem;

  letter-spacing:
    0.13em;

  cursor:
    pointer;
}


.staff-close-profile::before {
  content:
    "[ ";

  color:
    var(--accent-red);
}


.staff-close-profile::after {
  content:
    " ]";

  color:
    var(--accent-red);
}



/* ========================================
   RESPONSIVE
   ======================================== */


@media (max-width: 900px) {

  .about-team-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .staff-modal-layout {
    grid-template-columns:
      220px minmax(0, 1fr);
  }

}


@media (max-width: 650px) {

  .about-page {
    width:
      min(100% - 32px, 1180px);

    padding-top:
      80px;
  }


  .about-section-heading {
    grid-template-columns:
      1fr;

    gap:
      12px;
  }


  .about-team-grid {
    grid-template-columns:
      1fr;
  }


  .staff-public-profile {
    min-height:
      0;
  }


  .staff-modal {
    padding:
      14px;
  }


  .staff-modal-dialog {
    max-height:
      calc(100vh - 28px);

    padding:
      24px;
  }


  .staff-modal-layout {
    grid-template-columns:
      1fr;
  }


  .staff-profile-portrait {
    max-width:
      280px;
  }


  .staff-archive-data,
  .staff-preferences {
    grid-template-columns:
      1fr;
  }

}