/* The characters. Each portrait is first seen the way every painting on this site is: through
   the two-inch gap, which opens as the card comes into view (characters.js sets --reveal from
   0 to 1). Open without JavaScript, under reduced motion and in print. Sun Wukong's portrait is
   the gap itself, and it never opens. */

.people-head .lede { max-width: 40rem; text-wrap: pretty; }

/* ---------------------------------------------------------------- index of names */
.people-index { padding-top: clamp(1.5rem, 4vh, 2.5rem); padding-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.people-index .label { color: var(--muted); margin-bottom: .5rem; }
/* A hairline stands between names, in the middle of the gap. The one before the first name of
   each line falls outside the list's box and is clipped, so no line starts with a rule; the
   padding (taken back by the margin) leaves room for the focus ring inside the clip. */
.people-index-list {
  --sep: 1.8rem;
  list-style: none; margin: -.5rem; padding: .5rem; overflow: hidden;
  display: flex; flex-wrap: wrap; gap: 0 var(--sep);
  font-size: var(--step-0);
}
.people-index-list li { position: relative; display: flex; }
.people-index-list li::before {
  content: ""; position: absolute; left: calc(var(--sep) / -2); top: 50%; width: 1px; height: .9em; margin-top: -.45em;
  background: var(--rule);
}
.people-index-list a {
  display: block; padding: .3rem 0; color: var(--fg);
  text-decoration: underline 1px transparent; text-underline-offset: .25em;
  transition: text-decoration-color .2s;
}
.people-index-list a:hover, .people-index-list a:focus-visible { text-decoration-color: var(--accent-2); }

/* ---------------------------------------------------------------- groups */
.people-group-title {
  display: flex; align-items: baseline; gap: .9rem;
  font-size: var(--step-2); font-weight: 350; letter-spacing: -.015em; line-height: 1.1;
  margin: 0 0 clamp(1.5rem, 4vh, 2.5rem);
}
.people-group-title .label { color: var(--accent-2); font-size: .72rem; letter-spacing: .18em; }
.people-group-lede { margin: -1rem 0 clamp(1.8rem, 5vh, 3rem); max-width: 44rem; text-wrap: pretty; }

/* One card under another at every width: side by side, the words were squeezed into a column a
   few words wide next to their portraits. */
.people-grid { display: grid; gap: clamp(2.5rem, 6vh, 4rem); }

/* ---------------------------------------------------------------- one person */
.person {
  display: grid; gap: 1.1rem clamp(1.2rem, 2.4vw, 2rem);
  grid-template-columns: minmax(7.5rem, 15rem) minmax(0, 36rem);
  align-items: start;
  scroll-margin-top: .5rem;   /* the page already keeps anchors clear of the masthead */
}
.person--lead { grid-template-columns: minmax(10rem, 24rem) minmax(0, 36rem); gap: 1.4rem clamp(1.6rem, 4vw, 3.5rem); }

.person-portrait {
  --reveal: 0;
  --st: clamp(.55rem, 1vw, .8rem);
  --sb: calc(var(--st) * .375);
  position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #0e0c08;
  box-shadow: 0 1px 0 rgba(26, 24, 16, .08), 0 18px 40px -22px rgba(26, 24, 16, .55);
  clip-path: polygon(
    calc(50% - var(--st) - (50% - var(--st)) * var(--reveal)) 0,
    calc(50% + var(--st) + (50% - var(--st)) * var(--reveal)) 0,
    calc(50% + var(--sb) + (50% - var(--sb)) * var(--reveal)) 100%,
    calc(50% - var(--sb) - (50% - var(--sb)) * var(--reveal)) 100%);
}
.person-portrait picture, .person-portrait img { display: block; width: 100%; height: 100%; }
.person-portrait img {
  object-fit: cover; object-position: 50% 30%;
  filter: sepia(calc(.55 * (1 - var(--reveal)))) brightness(calc(.8 + .2 * var(--reveal)));
  transform: scale(calc(1.06 - .06 * var(--reveal)));
}
/* The gap's own light, while it is still a gap. */
.person-portrait::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 44%, rgba(232, 184, 56, .22) 50%, transparent 56%);
  opacity: calc(1 - var(--reveal) * 1.6);
}

.person-post { color: var(--muted); line-height: 1.5; }
.person-name {
  font-family: var(--f-body); font-size: var(--step-2); font-weight: 400; letter-spacing: -.01em;
  line-height: 1.05; margin: .35rem 0 .8rem; text-wrap: balance;
}
.person--lead .person-name { font-size: var(--step-3); }
.person-note { max-width: var(--measure); line-height: 1.55; text-wrap: pretty; }
.person-quote {
  margin: 1.1rem 0 0; padding: 0 0 0 1rem; border-left: 2px solid var(--accent-2);
  max-width: var(--measure);
}
.person-quote p { font-style: italic; font-size: var(--step-1); line-height: 1.35; margin-bottom: 0; text-wrap: pretty; }
.person-quote footer { margin-top: .7rem; font-size: var(--step--1); color: var(--muted); }
.person-quote cite { font-style: normal; }
.person-where { margin: 1rem 0 0; font-size: var(--step--1); color: var(--fg-2); }
.person-where .label { color: var(--muted); margin-right: .5rem; }
.person-where a { color: inherit; white-space: nowrap; }

/* The two beyond the map, on jade silk. */
.people-group--jade { background: linear-gradient(180deg, rgba(60, 176, 160, .07), rgba(60, 176, 160, 0) 70%); }

/* ---------------------------------------------------------------- the subject */
.people-absent {
  background: #120f0a; color: #ece5d3;
  --muted: #9a917f; --fg-2: #cbc2ae; --rule: rgba(236, 229, 211, .16); --accent-2: #e03010;
  --focus: var(--gold-1);   /* the paper's dark red ring is lost on this ground */
}
/* The numeral in a red light enough to read on the dark (5.6:1; the stamp's red). */
.people-absent .people-group-title .label { color: #e8603c; }
.people-absent-grid {
  display: grid; gap: 1.6rem clamp(2rem, 5vw, 4.5rem); align-items: center;
  grid-template-columns: minmax(11rem, 20rem) minmax(0, 36rem);
}
.absent-portrait {
  position: relative; aspect-ratio: 3 / 4; background: #0a0806; overflow: hidden;
  --st: clamp(.55rem, 1vw, .8rem); --sb: calc(var(--st) * .375);
}
/* The painting stays behind the gap: never more than two inches of it. */
.absent-portrait picture {
  position: absolute; inset: 0; display: block;
  clip-path: polygon(calc(50% - var(--st)) 0, calc(50% + var(--st)) 0, calc(50% + var(--sb)) 100%, calc(50% - var(--sb)) 100%);
}
.absent-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%; filter: blur(.6px) saturate(1.1); }
.absent-portrait video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%;
  clip-path: polygon(calc(50% - var(--st)) 0, calc(50% + var(--st)) 0, calc(50% + var(--sb)) 100%, calc(50% - var(--sb)) 100%);
  filter: blur(.8px); opacity: 0; transition: opacity .35s var(--ease-ink);
}
.absent-portrait.is-passing video { opacity: 1; }
.absent-stamp {
  position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%) rotate(-2deg);
  white-space: nowrap; padding: .35rem .6rem; border: 1px solid rgba(224, 48, 16, .7);
  color: #e8603c; background: rgba(18, 15, 10, .84); letter-spacing: .16em; font-size: .64rem;
}
.people-absent .person-name { font-size: var(--step-3); }
.people-absent a { color: #ece5d3; }

/* ---------------------------------------------------------------- also in the file */
.also-list {
  display: grid; gap: 1.2rem clamp(2rem, 4vw, 3rem); margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.also-list div { border-top: 1px solid var(--rule); padding-top: .8rem; }
.also-list dt { font-weight: 500; }
.also-list dd { margin: .3rem 0 0; color: var(--fg-2); line-height: 1.5; text-wrap: pretty; }
.people-next { margin-top: clamp(2.5rem, 7vh, 4rem); }
.people-next .prose { max-width: var(--measure); margin-bottom: 1.2rem; text-wrap: pretty; }

/* ---------------------------------------------------------------- narrow screens */
@media (max-width: 40rem) {
  .person, .person--lead, .people-absent-grid { grid-template-columns: 1fr; }
  .person-portrait, .absent-portrait { max-width: 20rem; }
  /* Names big enough to read and to tap: every line of the index is 44 px. */
  .people-index-list { --sep: 1.3rem; font-size: 1rem; }
  .people-index-list a { padding: .6rem 0; }
  /* "Appears" lines are 46 px apart, and each link's box fills its line (1em of type and 1rem
     above and below), so every link is a 44 px tap target that stops short of the next line. */
  .person-where { margin-top: .5rem; line-height: 2.9rem; }
  .person-where a { padding: 1rem 0; }
}

/* ---------------------------------------------------------------- open without motion */
.no-js .person-portrait, html.reduce-motion .person-portrait { --reveal: 1; }
@media print {
  .person-portrait { --reveal: 1; clip-path: none; }
  .absent-portrait video { display: none; }
}