/* Scoped to the two resident collections; the existing site layout is retained. */
.resident-card, .resident-card * { box-sizing: border-box; }
div.main a.resident-card { display: block; overflow: hidden; width: 100%; border: 1px solid #ded6d0; border-radius: 10px; background: #fff; color: #272323; text-align: left; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
div.main a.resident-card:hover, div.main a.resident-card:focus-visible { border-color: #822; box-shadow: 0 8px 24px #3c181819; transform: translateY(-2px); text-decoration: none; }
.resident-cover { display: flex; position: relative; align-items: center; justify-content: center; height: 210px; overflow: hidden; background: radial-gradient(ellipse at 75% 20%, #7d4141 0, #36272c 48%, #1f1b20 100%); }
.resident-cover img { width: 100%; height: 100%; object-fit: cover; border: 0; }
.resident-cover-number { color: #ffffff1c; font-size: 140px; font-weight: bold; line-height: 1; letter-spacing: -12px; }
.resident-cover-label { position: absolute; bottom: 22px; left: 22px; color: #f2e7df; font-size: 10px; letter-spacing: 3px; }
.resident-card-content { display: block; padding: 20px; }
.resident-eyebrow { display: block; margin-bottom: 8px; color: #93433b; font-size: 10px; font-weight: bold; letter-spacing: 1.5px; }
.resident-card-title { display: block; margin-bottom: 8px; font-size: 24px; line-height: 1.2; }
.resident-card-description { display: block; min-height: 35px; color: #746a66; font-size: 13px; font-weight: normal; line-height: 1.5; }
.resident-card-bottom { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #eee7e3; color: #822; font-size: 12px; }
.resident-card-bottom > :first-child { color: #827875; font-weight: normal; }
.resident-pinned td { padding-top: 14px; padding-bottom: 14px; }
div.main.resident-page { box-sizing: border-box; width: 800px; max-width: 100%; padding: 28px 24px 38px; text-align: left; }
.resident-page *, .resident-page *::before, .resident-page *::after { box-sizing: border-box; }
.resident-back { display: inline-block; margin-bottom: 26px; font-size: 12px; }
.resident-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 26px; }
.resident-heading h1 { margin: 0 0 10px; color: #2d2727; font-size: 30px; line-height: 1.2; }
.resident-heading p { color: #746a66; line-height: 1.6; }
.resident-summary { flex-shrink: 0; padding: 9px 12px; border: 1px solid #e9dfd9; border-radius: 20px; color: #756762; font-size: 12px; white-space: nowrap; }
.resident-tabs { display: flex; gap: 20px; margin-bottom: 20px; border-bottom: 1px solid #e6dcd6; }
div.around .resident-tabs a { display: block; padding: 10px 0 14px; color: #827874; font-size: 13px; text-decoration: none; }
div.around .resident-tabs a.resident-tab-active { border-bottom: 3px solid #822; color: #822; }
.resident-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 22px; padding: 18px; border: 1px solid #ebded1; border-radius: 8px; background: #fcf6ef; color: #66544b; font-size: 13px; line-height: 1.6; }
.resident-notice > span { flex: 1 1 100%; }
div.around a.resident-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 14px; border: 1px solid #822; border-radius: 5px; background: #822; color: #fff; font-size: 12px; line-height: 1.35; text-align: center; text-decoration: none; }
div.around a.resident-button:hover, div.around a.resident-button:focus-visible { border-color: #5e1515; background: #5e1515; color: #fff; text-decoration: none; }
.resident-login { font-size: 12px; }
.resident-empty { padding: 56px 28px; border: 1px dashed #dbd1c9; border-radius: 8px; background: #fdfbf8; text-align: center; }
.resident-empty-symbol { display: block; margin-bottom: 16px; color: #a66c63; font-size: 32px; }
.resident-empty h2 { margin-bottom: 12px; color: #51443e; font-size: 21px; }
.resident-empty p { color: #8a7a70; line-height: 1.6; }
.resident-hint { margin-bottom: 14px; color: #8a7a70; font-size: 12px; }
.resident-table-wrap { overflow-x: auto; }
.resident-table { width: 100%; border-collapse: collapse; }
.resident-table th { padding: 11px 8px; border-bottom: 1px solid #e5dbd5; color: #8c7c72; font-size: 10px; font-weight: normal; letter-spacing: .7px; text-align: left; text-transform: uppercase; }
.resident-table td { padding: 18px 8px; border-bottom: 1px solid #eee7e2; vertical-align: middle; }
.resident-table .resident-preview-cell { width: 192px; padding-left: 0; }
.resident-preview { display: block; position: relative; width: 192px; height: 108px; overflow: hidden; border-radius: 6px; background: #2f282a; }
.resident-preview img { display: block; width: 192px; height: 108px; object-fit: cover; border: 0; }
.resident-preview-play { display: flex; position: absolute; top: 50%; left: 50%; align-items: center; justify-content: center; width: 34px; height: 34px; margin: -17px; border-radius: 50%; background: #17111499; color: white; font-size: 14px; transition: opacity .2s; }
.resident-preview:hover .resident-preview-play, .resident-preview:focus .resident-preview-play { opacity: 0; }
.resident-preview-pending { display: flex; align-items: center; justify-content: center; height: 100%; color: #d0c3bb; font-size: 11px; }
.resident-frame-count { position: absolute; bottom: 5px; right: 6px; padding: 3px 5px; border-radius: 3px; background: #171114aa; color: white; font-size: 9px; font-weight: normal; }
.resident-filename { min-width: 170px; overflow-wrap: anywhere; line-height: 1.5; }
.resident-filename a { font-size: 13px; }
.resident-filename > span { display: block; margin-top: 7px; color: #8c7c72; font-size: 11px; }
.resident-file-size { color: #746a66; font-size: 12px; white-space: nowrap; }
.resident-download-button { min-width: 100px; }
.resident-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.resident-page a:focus-visible, .resident-card:focus-visible { outline: 3px solid #bc7e63; outline-offset: 3px; }
@media (max-width: 600px) { .resident-heading { align-items: flex-start; flex-direction: column; } div.main.resident-page { padding: 22px 16px; } }
@media (prefers-reduced-motion: reduce) { .resident-card, .resident-preview-play { transition: none !important; } div.main a.resident-card:hover { transform: none; } }