/* People-map module, shared by the local site and its independent preview. */
html { min-width: 0; }
body[data-page="people"] { --encounter-ink: #794d48; --encounter-rose: #ae6965; --encounter-thread: #c7a6a0; }
.people-room { max-width: 1440px; padding: 12px 40px 60px; }
.people-directory > .people-directory-tools,
.people-directory > #peopleGroups { display: none !important; }
.page-masthead { max-width: 1360px; padding: 22px 32px 20px; border-bottom: 0; }
.page-masthead .room-label { margin-bottom: 8px; font-size: 13px; }
.page-masthead .masthead-heading { width: 260px; height: 64px; }
.page-masthead p:not(.room-label) { max-width: 60ch; font-size: 16px; line-height: 1.65; }
.masthead-bow { width: 26px; height: 20px; margin-top: 7px; }
.encounter-map { color: var(--encounter-ink); }
.encounter-map *, .encounter-map *::before, .encounter-map *::after { box-sizing: border-box; letter-spacing: 0; }
.encounter-map [hidden] { display: none !important; }
.encounter-map button, .encounter-map input { font: inherit; }
.encounter-map button { -webkit-tap-highlight-color: transparent; cursor: pointer; }
.encounter-map button:focus-visible, .encounter-map a:focus-visible { outline: 2px solid var(--encounter-rose); outline-offset: 5px; }
.encounter-map button:disabled { cursor: default; }
.encounter-map svg:not(.encounter-threads) { width: 18px; height: 18px; stroke-width: 1.6; flex-shrink: 0; }
.encounter-toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 48px; gap: 16px; border-bottom: 1px solid #b58c8026; }
.encounter-total { min-width: 0; font-size: 14px; color: #897d73; margin: 0; font-family: var(--font-ui); }
.encounter-total span { color: var(--encounter-ink); font-variant-numeric: tabular-nums; }
.encounter-map .encounter-search-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 8px; min-height: 44px; padding: 9px 15px; border: 1px solid #96605a; border-radius: 4px; background: #fffaf7; color: var(--encounter-ink); font: 600 14px/1.5 var(--font-ui); white-space: nowrap; }
.encounter-map .encounter-search-toggle:hover,
.encounter-map .encounter-search-toggle[aria-expanded="true"] { background: #f4e5df; }
.encounter-map .encounter-search-toggle:active { background: #ecd7d0; }
.encounter-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 0; background: transparent; color: var(--encounter-ink); border-radius: 50%; }
.encounter-icon:hover { background: #cba7a41f; }
.encounter-search { display: flex; align-items: center; gap: 12px; max-width: 640px; margin: 20px auto 0; padding: 0 6px 0 14px; border: 1px solid #96605a; border-radius: 4px; background: #fffaf7; }
.encounter-search:focus-within { border-color: var(--encounter-ink); outline: 1px solid var(--encounter-ink); outline-offset: 0; }
.encounter-search .encounter-icon { width: 44px; height: 44px; flex-shrink: 0; }
.encounter-search input { border: 0; background: transparent; width: 100%; min-width: 0; color: var(--ink); padding: 13px 0; }
.encounter-search input:focus { outline: none; }
.encounter-search input::placeholder { color: #806c65; opacity: 1; }
.encounter-overview { position: relative; width: 100%; height: 690px; isolation: isolate; }
.encounter-threads { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; }
.encounter-threads path { stroke: var(--encounter-thread); fill: none; stroke-width: 1.3; opacity: .75; transition: stroke 180ms, opacity 180ms; vector-effect: non-scaling-stroke; }
.encounter-threads path.is-active { stroke: var(--encounter-rose); opacity: 1; stroke-width: 2; }
.encounter-envelope { position: absolute; left: var(--x); top: var(--y); width: 250px; height: 250px; padding: 0; margin: 0; border: 0; background: transparent; color: var(--encounter-ink); transform: translate(-50%, -50%) rotate(var(--tilt)); text-align: center; }
.encounter-envelope-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.encounter-envelope-front { clip-path: polygon(0 42%, 12% 42%, 25% 51%, 50% 54%, 77% 51%, 90% 42%, 100% 42%, 100% 100%, 0 100%); z-index: 2; }
.encounter-envelope-slips { position: absolute; inset: 0; z-index: 1; }
.encounter-name-slip { position: absolute; top: 37%; left: 24%; width: 39%; height: 34%; background: #fffdfa; border: 1px solid #d4c7bd; box-shadow: 0 1px 3px #473c3420; border-radius: 1px; transform: rotate(-9deg); padding: 9px 4px; font: 14px/1.3 var(--font-ui); transition: transform 220ms ease; }
.encounter-name-slip + .encounter-name-slip { top: 38%; left: 43%; transform: rotate(8deg); background: #f4f4eb; }
.encounter-name-slip:only-child { left: 31%; }
.encounter-envelope-label { position: absolute; z-index: 3; inset: 60% 13% 10%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; }
.encounter-envelope-label strong { font: 23px/1.3 var(--font-display); color: inherit; white-space: pre-line; }
.encounter-envelope-label small { font: 12px/1.4 var(--font-ui); color: #96766c; }
.encounter-envelope-number { position: absolute; z-index: 3; bottom: 15%; right: 13%; font: 11px/1 var(--font-ui); color: #a58379; }
.encounter-envelope[data-group="members"] { color: #5b687c; }
.encounter-envelope[data-group="work"] { color: #657365; }
.encounter-envelope[data-group="organizations"] { color: #827047; }
.encounter-envelope[data-group="external"] { color: #736080; }
.encounter-envelope[data-group="external"] .encounter-envelope-label { top: 54%; }
.encounter-envelope[data-group="external"] .encounter-envelope-label strong { font-size: 21px; line-height: 1.2; }
@media (hover: hover) {
  .encounter-envelope:hover .encounter-name-slip, .encounter-envelope:focus-visible .encounter-name-slip { transform: translateY(-17px) rotate(-12deg); }
  .encounter-envelope:hover .encounter-name-slip + .encounter-name-slip, .encounter-envelope:focus-visible .encounter-name-slip + .encounter-name-slip { transform: translateY(-22px) rotate(10deg); }
  .encounter-envelope:hover .encounter-envelope-label strong { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
}
.encounter-center { position: absolute; left: 50%; top: 54%; width: 224px; padding: 10px 10px 13px; border: 1px solid #e8e3dd; background: #fffefa; box-shadow: 1px 4px 12px #4f3f3324; transform: translate(-50%, -50%) rotate(-3deg); color: var(--encounter-ink); transition: transform 180ms ease; }
.encounter-center:hover { transform: translate(-50%, -50%) rotate(-1deg); }
.encounter-center > img { width: 100%; height: 246px; display: block; object-fit: cover; object-position: 50% 24%; }
.encounter-center-name { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 12px 0 5px; font: 26px/1.15 var(--font-display); }
.encounter-center-name .bow-mark { width: 24px; height: 20px; }
.encounter-center-caption { font: 12px/1.5 var(--font-ui); color: #8f7c70; }
.encounter-photo-tape { position: absolute; width: 100px; height: 24px; background: #dba99a72; top: -12px; left: calc(50% - 50px); transform: rotate(4deg); clip-path: polygon(0 3%, 98% 0, 100% 88%, 1% 100%); z-index: 2; }
.encounter-colophon { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-top: 1px solid #b58c8036; color: #928275; font: 13px/1.5 var(--font-ui); }
.encounter-colophon a { display: flex; gap: 4px; align-items: center; color: inherit; text-decoration: none; white-space: nowrap; }
.encounter-colophon a:hover { color: var(--encounter-ink); }
.encounter-collection { display: grid; grid-template-columns: 185px minmax(0, 1fr); gap: 48px; padding: 34px 0 36px; scroll-margin-top: 80px; min-height: 610px; }
.encounter-back { border: 0; color: var(--encounter-ink); padding: 8px 0; margin-bottom: 23px; display: flex; align-items: center; gap: 9px; background: transparent; min-height: 44px; font-family: var(--font-ui) !important; }
.encounter-index { min-width: 0; }
.encounter-tabs { display: flex; flex-direction: column; gap: 10px; }
.encounter-tab { display: flex; text-align: left; align-items: center; justify-content: space-between; gap: 10px; color: #816c62; border: 0; border-bottom: 1px solid #b89c874a; background: #faf8f0b5; padding: 14px 12px 13px 15px; min-height: 52px; font-family: var(--font-ui) !important; clip-path: polygon(0 0, 92% 0, 100% 8px, 100% calc(100% - 8px), 92% 100%, 0 100%); }
.encounter-tab[aria-pressed="true"] { background: #ad6b63; color: #fffefa; }
.encounter-tab:not([aria-pressed="true"]):hover { background: #eee5dbe8; }
.encounter-tab small { font-size: 12px; font-variant-numeric: tabular-nums; }
.encounter-tab span { min-width: 0; text-wrap: balance; }
.encounter-tab small { flex-shrink: 0; }
.encounter-tab:focus-visible { clip-path: none; outline-offset: 1px !important; }
.encounter-open-letter { min-width: 0; }
.encounter-collection-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 0 27px; border-bottom: 1px solid #b58c8054; margin-bottom: 31px; }
.encounter-eyebrow { margin: 0 0 8px; color: #9a7c70; font: 12px/1.5 var(--font-ui); }
.encounter-collection-heading h2 { font: 31px/1.4 var(--font-display); color: var(--encounter-ink); margin: 0; outline: none; overflow-wrap: anywhere; }
.encounter-collection-heading > div { min-width: 0; }
.encounter-collection-heading p:last-child { margin: 8px 0 0; color: #89776b; font-size: 15px; line-height: 1.6; }
.encounter-heading-bow { flex-shrink: 0; width: 44px; height: 34px; margin-right: 10px; opacity: .75; }
.encounter-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px 25px; align-items: start; padding-top: 10px; }
.encounter-person { position: relative; min-width: 0; background: #fdfaf5; border: 1px solid #ddd4c74d; box-shadow: 1px 3px 5px #4833251c; border-radius: 1px; transform: rotate(var(--card-tilt)); transform-origin: 50% 20%; transition: transform 240ms cubic-bezier(.16, 1, .3, 1), box-shadow 240ms ease; }
.encounter-person::before,
.encounter-reader-portrait::before { content: ""; position: absolute; z-index: 2; top: -17px; left: 12%; width: 16px; height: 64px; background: url("../scrapbook-details/paperclip.webp?v=32c01bb2b9dd") center / contain no-repeat; filter: drop-shadow(1px 2px 1px rgb(63 48 35 / .2)); transform: rotate(-9deg); pointer-events: none; }
.encounter-person:nth-child(even)::before { left: auto; right: 12%; transform: rotate(9deg); }
.encounter-person:focus-within { z-index: 3; transform: translateY(-12px) rotate(0) scale(1.025); box-shadow: 3px 17px 22px #48332530; }
@media (hover: hover) and (pointer: fine) {
  .encounter-person:hover { z-index: 3; transform: translateY(-12px) rotate(0) scale(1.025); box-shadow: 3px 17px 22px #48332530; }
  .encounter-person:active { transform: translateY(-7px) rotate(0) scale(1.01); }
}
.encounter-person-open { display: block; border: 0; padding: 9px 9px 0; background: transparent; color: var(--encounter-ink); width: 100%; text-align: left; }
.encounter-person-photo { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #e8e6df; }
.encounter-person-photo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: var(--photo-position, 50% 0%); transform: scale(var(--photo-zoom, 1)); transform-origin: var(--photo-position, 50% 0%); }
.encounter-person[data-kind="illustration"] .encounter-person-photo img { object-position: center; }
.encounter-person[data-kind="character"] .encounter-person-photo img { object-fit: cover; object-position: 50% 0; background: #eeeae4; }
:is(.encounter-person, .encounter-reader-portrait)[data-kind="group"] .encounter-person-photo img { object-fit: contain; object-position: center; background: #e8e6df; }
:is(.encounter-person, .encounter-reader-portrait)[data-fit="contain"] .encounter-person-photo img { object-fit: contain; object-position: center; }
:is(.encounter-person, .encounter-reader-portrait)[data-fit="contain"] .encounter-person-photo,
:is(.encounter-person, .encounter-reader-portrait)[data-kind="group"] .encounter-person-photo { aspect-ratio: var(--photo-aspect, 4 / 3); }
.encounter-person-copy { display: block; padding: 15px 9px 10px; }
.encounter-person-name { display: block; color: #503b33; font: 22px/1.4 var(--font-display); overflow-wrap: anywhere; min-height: 31px; }
.encounter-person-role { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 7px; color: #8b776b; font-size: 13px; line-height: 1.6; min-height: 42px; }
.encounter-person-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 17px; padding: 11px 0 14px; border-top: 1px solid #cdb6a745; font: 12px/1.5 var(--font-ui); color: #a4776a; }
#peopleReader .people-page-header.has-encounter-portrait { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 32%); align-items: center; gap: 32px; }
.encounter-reader-copy { min-width: 0; }
.encounter-reader-copy h2, .encounter-reader-copy .people-page-role { overflow-wrap: anywhere; }
.encounter-reader-portrait { position: relative; min-width: 0; width: 100%; max-width: 300px; margin: 0; padding: 8px 8px 15px; justify-self: end; background: #fdfaf5; box-shadow: 2px 5px 9px #48332526; transform: rotate(2deg); }
.encounter-reader-portrait::before { left: auto; right: 13%; transform: rotate(9deg); }
.encounter-empty { text-align: center; padding: 90px 20px; }
.encounter-empty .bow-mark { margin: 0 auto 22px; }
.encounter-empty p { font: 24px/1.5 var(--font-display); }
.encounter-empty button { background: transparent; border: 0; border-bottom: 1px solid #a8756c; color: var(--encounter-ink); padding: 8px 2px; }
.encounter-cards.is-unpacking .encounter-person { animation: encounter-unpack 320ms backwards; animation-delay: calc(var(--card-index) * 22ms); }
@keyframes encounter-unpack { from { opacity: 0; transform: translateY(15px) rotate(0); } to { opacity: 1; transform: rotate(var(--card-tilt)); } }
@media (min-width: 1600px) { .encounter-envelope { width: 276px; height: 276px; } .encounter-center { width: 238px; } .encounter-center > img { height: 262px; } }
@media (min-width: 851px) { .encounter-envelope[data-group="core"] { width: 210px; height: 210px; } }
@media (max-width: 1100px) {
  .people-room { padding-inline: 24px; }
  .encounter-overview { height: 650px; }
  .encounter-envelope { width: 225px; height: 225px; }
  .encounter-center { width: 205px; }
  .encounter-center > img { height: 219px; }
  .encounter-envelope-label strong { font-size: 21px; }
  .encounter-collection { grid-template-columns: 155px minmax(0, 1fr); gap: 28px; }
  .encounter-cards { gap: 38px 16px; }
  .encounter-person-name { font-size: 20px; }
}
@media (max-width: 850px) {
  #peopleReader .people-page-header.has-encounter-portrait { grid-template-columns: minmax(0, 1fr) minmax(180px, 32%); gap: 24px; }
  .page-masthead { padding: 25px 24px 17px; }
  .people-room { padding: 6px 20px 45px; }
  .encounter-overview { height: auto; display: flex; flex-direction: column; padding-top: 30px; }
  .encounter-threads { display: none; }
  .encounter-center { position: relative; inset: auto; align-self: center; order: -1; transform: rotate(-3deg); width: 190px; margin: 10px 0 20px; }
  .encounter-center:hover { transform: rotate(-1deg); }
  .encounter-center > img { height: 190px; }
  #encounterEnvelopes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
  .encounter-envelope { position: relative; inset: auto; width: 100%; max-width: 240px; height: auto; aspect-ratio: 1; transform: rotate(var(--tilt)); justify-self: center; }
  .encounter-envelope:last-child { grid-column: 2; }
  .encounter-collection { display: block; padding-top: 18px; min-height: 600px; }
  .encounter-index { margin-bottom: 25px; }
  .encounter-back { margin: 0 0 9px; }
  .encounter-tabs { flex-direction: row; overflow-x: auto; padding: 4px 0 10px; gap: 8px; scrollbar-width: thin; scrollbar-color: #c6a299 transparent; }
  .encounter-tab { flex: 0 0 auto; min-height: 46px; padding: 12px 16px; gap: 15px; white-space: nowrap; }
  .encounter-collection-heading { padding-bottom: 22px; margin-bottom: 24px; }
  .encounter-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px 19px; }
  .encounter-person-copy { padding-inline: 6px; }
  .encounter-person-bottom { margin-inline: 14px; }
}
@media (max-width: 560px) {
  #peopleReader .people-page-header.has-encounter-portrait { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .encounter-reader-portrait { width: min(100%, 256px); justify-self: center; }
  .people-room { padding-inline: 16px; }
  .page-masthead .masthead-heading { width: 220px; height: 55px; }
  .page-masthead p:not(.room-label) { font-size: 15px; line-height: 1.7; }
  .encounter-total { font-size: 12px; }
  .encounter-overview { padding-top: 20px; }
  #encounterEnvelopes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; margin: 0 -6px; }
  .encounter-envelope { max-width: 215px; }
  .encounter-envelope:last-child { grid-column: 1 / -1; width: 50%; }
  .encounter-envelope-label { inset-inline: 11%; top: 58%; }
  .encounter-envelope-label strong { font-size: 20px; }
  .encounter-envelope[data-group="external"] .encounter-envelope-label strong { font-size: 17px; }
  .encounter-name-slip { font-size: 11px; padding-top: 6px; }
  .encounter-envelope-label small { font-size: 10px; }
  .encounter-envelope-number { display: none; }
  .encounter-colophon { font-size: 11px; gap: 8px; }
  .encounter-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 13px; }
  .encounter-person::before { top: -12px; width: 12px; height: 48px; }
  .encounter-person:focus-within { transform: translateY(-6px) rotate(0) scale(1.015); }
  .encounter-person-open { padding: 6px 6px 0; }
  .encounter-person-copy { padding: 10px 4px 8px; }
  .encounter-person-name { font-size: 18px; line-height: 1.4; }
  .encounter-person-role { font-size: 12px; line-height: 1.55; min-height: 38px; }
  .encounter-person-photo { aspect-ratio: 1; }
  .encounter-person-bottom { font-size: 10px; margin-inline: 10px; padding-block: 9px 12px; }
  .encounter-collection-heading h2 { font-size: 27px; }
  .encounter-collection-heading p:last-child { font-size: 14px; }
  .encounter-heading-bow { width: 30px; height: 23px; margin-right: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .encounter-map *, .encounter-map *::before, .encounter-map *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 380px) {
  .encounter-envelope-label strong { font-size: 18px; }
  .encounter-envelope[data-group="external"] .encounter-envelope-label { gap: 2px; }
  .encounter-envelope[data-group="external"] .encounter-envelope-label strong { font-size: 15px; line-height: 1.15; }
}