:root {
  --edition-paper: #fff;
  --edition-ink: #111;
  --edition-blue: #111;
  --edition-blue-deep: #111;
  --edition-lime: #f2f2f2;
  --edition-rule: #c7c7c7;
  --edition-display: Arial, 'Microsoft YaHei', sans-serif;
  --edition-mono: Arial, 'Microsoft YaHei', sans-serif;
  --house-gutter: clamp(12px, 1.35vw, 24px);
}

body { font-family: Arial, 'Microsoft YaHei', sans-serif; }
.campaign-notice { position: relative; display: grid; place-items: center; min-height: 44px; padding: 6px 45px; background: #080808; color: #fff; text-align: center; font-size: 12px; }
.campaign-notice a span { margin-inline-start: 5px; text-decoration: underline; text-underline-offset: 2px; }
.campaign-notice button { position: absolute; inset: 0 0 0 auto; width: 44px; padding: 0; background: none; color: inherit; font: 300 21px/1 Arial, sans-serif; }
.campaign-notice a:hover, .campaign-notice button:hover { color: #ddd; }

.house-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: 'nav brand actions'; align-items: center; min-height: 45px; border-bottom: 1px solid #161616; padding: 0 var(--house-gutter); background: #fff; }
.house-wordmark { grid-area: brand; font: 900 clamp(1.18rem, 1rem + .3vw, 1.42rem)/1 Arial, sans-serif; letter-spacing: .05em; padding-block: 11px; }
.house-nav, .house-actions { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(12px, 1.75vw, 29px); color: #111; }
.house-header .house-nav { grid-area: nav; padding: 0; flex-direction: row; }
.house-actions { grid-area: actions; justify-content: end; gap: clamp(10px, 1.5vw, 24px); }
.house-nav a, .house-book, .house-cap { display: inline-flex; min-height: 43px; align-items: center; gap: 6px; padding: 0; border: 0; color: inherit; font-size: 12px; white-space: nowrap; }
.house-nav a:hover, .house-nav a[aria-current], .house-book:hover, .house-book[aria-current], .house-cap:hover { text-decoration: underline; text-underline-offset: 4px; }
.house-header .house-nav a.active::after { content: none; }
.house-cap img { display: block; width: 27px; height: 29px; object-fit: contain; }
.house-book [data-collection-count] { padding: 2px 4px; background: #eee; font-size: 10px; }
.house-header :focus-visible, .house-footer :focus-visible, .house-search :focus-visible, .house-campaign :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.house-visually-hidden { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.house-search { position: relative; display: block; border-bottom: 1px solid #161616; background: #fff; z-index: 5; }
.house-search form { display: flex; align-items: center; gap: 8px; margin-inline: var(--house-gutter); }
.house-search form button { display: grid; flex: 0 0 27px; min-height: 43px; place-items: center start; background: none; color: #111; padding: 0; }
.house-search form button span { position: relative; display: block; width: 13px; height: 13px; border: 1.5px solid currentColor; border-radius: 50%; }
.house-search form button span::after { content: ''; position: absolute; width: 6px; height: 1.5px; background: currentColor; right: -5px; bottom: -2px; transform: rotate(45deg); }
.house-search input { width: 100%; min-width: 0; min-height: 43px; margin: 0; padding: 4px 0; border: 0; background: #fff; color: #111; font: inherit; font-size: max(1rem, 1em); }
.house-search input::placeholder { font-size: 12px; color: #646464; }
#house-results { position: absolute; inset: 100% 0 auto; max-height: min(55dvh, 380px); overflow: auto; border-block: 1px solid #111; padding: 13px var(--house-gutter) 17px; color: #111; background: #fff; box-shadow: 0 10px 18px #0002; }
#house-results p { margin: 0; color: #555; font-size: 12px; }
#house-results ul { list-style: none; margin: 6px 0 0; padding: 0; }
#house-results a { display: block; padding-block: 10px; font-size: 13px; }
#house-results a:hover { text-decoration: underline; }

.house-campaign { position: relative; display: grid; align-items: end; isolation: isolate; aspect-ratio: 2 / 1; max-height: calc(100svh - 133px); min-height: 365px; color: #fff; background: #2b2927; }
.house-campaign > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 39%; }
.house-campaign::after { position: absolute; inset: 44% 0 0; z-index: -1; content: ''; pointer-events: none; background: linear-gradient(transparent, #0009); }
.house-campaign-copy { width: 100%; text-align: center; padding: 16px var(--house-gutter) 20px; }
.house-campaign-copy h1 { margin: 0 0 12px; font: 700 clamp(1.18rem, .98rem + .45vw, 1.5rem)/1.3 Arial, 'Microsoft YaHei', sans-serif; letter-spacing: .12em; }
.house-campaign-actions { display: flex; justify-content: center; gap: 8px; }
.house-campaign-actions a { display: grid; place-items: center; padding: 8px 14px; min-width: 140px; min-height: 40px; border: 1px solid #111; border-radius: 3px; background: #fff; color: #111; font-size: 12px; }
.house-campaign-actions a:hover { background: #111; color: #fff; border-color: #fff; }
.house-campaign-actions a:focus-visible { outline-color: #fff; }

.house-footer { color: #111; background: #f4f4f4; }
.house-footer nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 20px; padding: 25px var(--house-gutter) 32px; border-block: 1px solid #111; }
.house-footer h2 { font-size: 11px; letter-spacing: .05em; margin: 0 0 13px; }
.house-footer nav a, .house-footer nav button { display: block; width: fit-content; padding: 0; margin: 8px 0 0; color: inherit; background: none; font-size: 12px; text-align: left; }
.house-footer nav a:hover, .house-footer nav button:hover { text-decoration: underline; }
.house-footer-bottom { padding: 15px var(--house-gutter); font-size: 11px; text-align: center; }

.residents-view .residents-hero { grid-template-columns: minmax(13rem, 25%) minmax(0, 1fr); grid-template-rows: minmax(28rem, auto) auto; }
.residents-view .residents-intro h1 { font-size: clamp(2.65rem, 1.35rem + 3.25vw, 5rem); letter-spacing: -.07em; }
.residents-view .residents-stage { background: radial-gradient(ellipse at center, #eee, #c9c9c9); }
.residents-view .residents-controls { color: #111; background: #f6f6f6; border-top: 1px solid #999; }
.residents-view .residents-transport button { border-color: #555; }
.residents-view .residents-pager button::before { background: #888; }
.residents-view .residents-pager button[aria-current='true']::before { background: #111; }
.residents-view .residents-stage :focus-visible, .residents-view .residents-controls :focus-visible { outline-color: #111; }
.residents-view .resident-card, .collection-view .resident-card, #resident-card-dialog .resident-card { box-shadow: 0 14px 22px #0003, inset 0 0 0 1px #444; }
.collection-placeholder { background: #f5f5f5; border-color: #777; color: #444; }
.collection-placeholder b { color: #333; }
.collection-slot:hover .collection-placeholder { background: #eaeaea; }
.resident-detail-back { background: #1a1a1a; border-color: #b9b9b9; }
.resident-detail-back .residents-series, .resident-back-number, .resident-detail-back small { color: #eee; }
.edition-archive-head, .edition-notes-head, .edition-expert-head { color: #111; background: #f3f3f3; }
.edition-archive-head h1 span { color: #111; }
.first-people, .living-content .journal-art, .living-content .journal-card:nth-child(even) .journal-art { background: #f2f2f2; }
.edition-village .village-poster { background: #2a2a2a; }
.edition-village .place-art, .edition-village .art-experience, .edition-village .art-service, .edition-village .cl-connections { background: #eee; color: #111; }
.edition-day .day-intro { background: #161616; }
.edition-day .day-intro h1 span { color: #fff; }
.edition-day .channels button[aria-pressed='true'] { background: #ececec; }
.edition-nav a[aria-current], .edition-nav a:hover { color: #111; }
.edition-day .house-actions .edition-action { min-height: 34px; margin-block: 4px; }

@media (prefers-reduced-motion: no-preference) {
  .house-cap img { animation: cap-turn 7s linear infinite; }
  .house-cap:hover img, .house-cap:focus-visible img { animation-play-state: paused; }
}

@media (max-width: 790px) {
  .house-header { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'brand actions' 'nav nav'; }
  .house-header .house-nav { justify-content: flex-start; border-top: 1px solid #ddd; gap: 8px 15px; }
  .house-actions { gap: 6px 10px; }
  .house-book, .house-cap { font-size: 11px; }
}

@media (max-width: 650px) {
  .house-campaign { min-height: 400px; max-height: none; aspect-ratio: 4 / 5; overflow: clip; }
  .house-campaign > img { right: auto; left: -100%; width: 300%; max-width: none; object-position: center 34%; }
  .house-campaign-copy { padding-bottom: 24px; }
  .house-campaign-actions a { min-width: min(140px, 42%); }
  .house-footer nav { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 23px; }
  .residents-view .residents-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
}

@media (max-width: 370px) {
  .house-cap span, .house-book [data-collection-count] { display: none; }
  .house-header .house-nav { gap: 5px 10px; }
  .house-nav a { font-size: 11px; }
}