/* The family album shares its paper, ink and print colours across the archive. */
:root {
    --paper: #faf7f1;
    --surface: #fffdf8;
    --ink: #29263e;
    --green: #473583;
    --green-dark: #29234b;
    --muted: #625e6a;
    --border: #dcd6d4;
    --brass: #a5493d;
    --indigo: #473583;
    --lilac: #d9cef3;
    --peach: #f7c2a6;
    --mint: #c2e0d5;
    --yellow: #f1d77a;
    --serif: Baskerville, 'Iowan Old Style', Georgia, serif;
}
.masthead { background: var(--paper); border-color: #383047; }
.masthead-inner { min-height: 70px; }
.brand { gap: 9px; }
.brand strong { font: 750 28px/.92 var(--sans); letter-spacing: -1.8px; }
.brand small { color: #5a5167; letter-spacing: 1.5px; font-size: 9px; }
.main-nav a { border-radius: 30px; color: var(--ink); }
.main-nav a[aria-current], .main-nav a:hover { color: var(--indigo); background: #e8e0f3; }
.print-label, .eyebrow { color: #58406d; font: 650 10px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.print-label { margin: 0 0 12px; }
.atlas-poster {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: 1.05fr 1fr;
    min-height: clamp(290px,24vw,365px); margin-top: 25px;
    background: var(--lilac); border-radius: 4px;
}
.poster-copy { align-self: center; z-index: 2; padding: 35px 0 35px clamp(25px,4vw,68px); }
.poster-copy h1, .album-heading h1, .page-heading h1 {
    margin: 0; font: 500 clamp(60px,8.3vw,130px)/.96 var(--serif);
    color: var(--ink); letter-spacing: -.066em;
}
.poster-copy h1 em, .page-heading h1 em, .album-heading em { font-weight: 400; color: var(--indigo); }
.poster-intro { margin: 18px 0 19px; color: #3b324b; font-size: clamp(15px,1.18vw,19px); line-height: 1.45; }
.poster-links { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 20px; }
.poster-links a, .profile-link { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 650; }
.poster-links a:first-child { background: var(--ink); color: white; padding: 9px 16px; border-radius: 30px; }
.poster-links a:last-child { color: var(--ink); border-bottom: 1px solid #706282; }
.poster-links a:hover { text-decoration: none; opacity: .82; }
.poster-art { position: relative; min-width: 0; isolation: isolate; }
.poster-art::before { content: ''; position: absolute; inset: 0 -2% 0 -8%; z-index: -2; opacity: .28; background: url('/survey.svg') center / cover; transform: rotate(-8deg) scale(1.2); }
.poster-sun { position: absolute; width: min(78%,400px); aspect-ratio: 1; background: var(--yellow); top: -14%; right: 5%; border-radius: 50%; }
.poster-waves { position: absolute; width: 45%; height: 60%; bottom: -19%; right: -9%; transform: rotate(-24deg); background: repeating-radial-gradient(ellipse at 100% 100%,transparent 0 8px,#4a397f 9px 10px,transparent 11px 17px); }
.print { display: block; position: absolute; background: #fffaf1; padding: 7px 7px 0; box-shadow: 1px 4px 8px #44335530; transition: transform .2s; color: #342f43; }
.print img { display: block; width: 100%; object-fit: cover; }
.print span { display: block; padding: 5px 0 6px; text-align: center; font: italic clamp(11px,1.03vw,15px)/1.2 var(--serif); }
.print-main { z-index: 2; top: 10%; right: 13%; width: 54%; transform: rotate(5deg); }
.print-main img { aspect-ratio: 1.28; object-position: 50% 50%; }
.print-small { z-index: 3; width: 33%; bottom: 10%; left: 4%; transform: rotate(-11deg); }
.print-small img { aspect-ratio: 1.53; }
.print:hover, .print:focus-visible { z-index: 4; transform: rotate(0deg) scale(1.03); text-decoration: none; }
.collection-strip { display: flex; justify-content: flex-start; gap: 0; align-items: center; padding: 11px 0; border-bottom: 1px solid #352c45; }
.collection-strip a { display: inline-flex; align-items: center; gap: 6px; color: #493f55; font-size: 12px; padding: 0 16px; }
.collection-strip a:first-child { padding-left: 0; border-right: 1px solid #b9aebd; }
.collection-strip .icon { width: 15px; height: 15px; }
.atlas-section,.album-section { margin-top: 25px; }
.section-heading h2,.results-heading h2,.profile-section h2,.side-box h2 { letter-spacing: -.045em; }
.section-heading h2 { font-size: clamp(32px,3.2vw,48px); }
.section-heading { margin-bottom: 12px; }
.button,.button.subtle { border-color: #cfc5d5; color: var(--ink); background: var(--surface); border-radius: 22px; }
.button.primary { background: var(--indigo); color: white; border-color: var(--indigo); }
.button:hover,.button.subtle:hover { background: #ece5f5; }
.button.primary:hover { background: #362462; }
.map-filters { padding-bottom: 2px; }
.map-filters .button { background: #eee6f6; border-color: #d8cde5; }
.atlas-panel { border-color: #cec3c9; border-radius: 5px; }
#atlas-map { background: #bdd9de; }
.place-panel { background: #f5efe8; border-color: #cec3c9; }
.place-heading-icon { border-color: #d3c4dc; background: #e3d6ee; color: var(--indigo); }
.place-heading h3 { font-size: 26px; }
.place-summary,.media-caption small,.overline,.group-title { color: #695272; }
.place-row { border-color: #ded4cf; }
.place-row:hover { background: #ebe3ed; }
.row-pin { color: #8c567f; }
.row-count,.chip { background: #e9dff0; color: #573e72; }
.map-cluster,.map-legend b,.face-count { background: var(--indigo); }
.map-cluster.major { background: #543769; outline-color: #704c8e38; }
.map-cluster.single,.map-legend i { background: #a74c4d; }
.portrait-marker .face-frame { box-shadow: 0 0 0 1.5px #754774,0 2px 5px #4a314455; }
.map-label,.area-label { color: #5d5063; text-shadow: 0 1px 2px #f9f2db,1px 0 2px #fff7ed; }
.search-field,.compact,.filters select,.link-person select { border-color: #cfc5d2; background: var(--surface); }
.search-field .icon { color: #6f6376; }
.page-heading { padding: 19px 0 24px; border-bottom: 1px solid var(--ink); }
.page-heading h1 { font-size: clamp(49px,6vw,90px); }
.page-heading .eyebrow { color: var(--indigo); }
.section-media .page-heading:not(.media-heading) { background: var(--peach); padding: clamp(20px,3vw,40px); border: none; }
.section-people .page-heading { background: var(--mint); padding: clamp(20px,3vw,40px); border: none; }
.filters { border-color: var(--border); background: #f0eae8; border-radius: 4px; }
.person-card,.media-card,.profile-section,.side-box,.original-view { border-radius: 4px; }
.person-card:hover,.media-card:hover { border-color: #8d6794; }
.person-card .avatar,.avatar.large { color: #51416f; background: var(--lilac); border-color: transparent; }
.person-card:nth-child(4n+2) .avatar { background: var(--peach); }
.person-card:nth-child(4n+3) .avatar { background: var(--mint); }
.person-card:nth-child(4n) .avatar { background: var(--yellow); }
.media-frame { background: #e8dacd; }
.media-card { border-color: #d6cac5; }
.media-caption { border-top: 3px solid var(--lilac); }
.media-card:nth-child(4n+2) .media-caption { border-color: var(--peach); }
.media-card:nth-child(4n+3) .media-caption { border-color: var(--mint); }
.media-card:nth-child(4n) .media-caption { border-color: var(--yellow); }
.record-heading { padding: 22px; background: #e6e0ef; border-left: 5px solid #7d68a8; }
.record-nav { border-color: #cfc3ce; }
.side-box:first-child { border-top: 4px solid #d8a28e; }
.life-event { border-color: #e3dce2; }
.event-date { color: #78546b; }
.original-view { background: #e8e2ec; }
.album-heading { margin: 37px auto 25px; }
.album-heading h1 { font-size: clamp(56px,6.8vw,96px); }
.album-heading > p:last-child { max-width: 730px; font-size: 17px; line-height: 1.55; color: var(--muted); }
.four-portraits { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(10px,1.5vw,23px); margin-bottom: 35px; }
.album-person { --tint: var(--peach); border-top: 7px solid var(--tint); }
.album-person:nth-child(2) { --tint: var(--mint); }
.album-person:nth-child(3) { --tint: var(--lilac); }
.album-person:nth-child(4) { --tint: var(--yellow); }
.album-person figure { margin: 0; }
.album-person figure a { display: block; background: var(--tint); }
.album-person img { display: block; width: 100%; height: clamp(175px,19vw,292px); object-fit: cover; object-position: 50% 35%; }
.album-person figcaption { font: italic 13px/1.35 var(--serif); color: #605763; margin: 6px 0; }
.album-person-text { padding-top: 11px; }
.album-person-text .print-label { margin-bottom: 5px; }
.album-person h2 { margin: 0; font: 500 clamp(27px,2.6vw,40px)/1.03 var(--serif); letter-spacing: -.055em; }
.album-person h2 a { color: var(--ink); }
.album-person-text > p:not(.print-label) { font-size: 14px; line-height: 1.6; }
.profile-link { color: var(--indigo); gap: 7px; text-decoration: underline; text-underline-offset: 4px; }
.about-opening { background: #e6d9ed; border: 0; border-radius: 4px; }
.about-opening figure img { max-height: 345px; transform: rotate(2deg); }
.earlier-heading { margin-top: 38px; border-bottom: 1px solid var(--ink); padding-bottom: 12px; }
.family-story { border-color: #cec2c9; }
.family-story figure { padding: 18px; background: #f3d9ca; }
.family-story:nth-of-type(even) figure { background: #dce9df; }
.about-opening figcaption,.family-story figcaption { color: #5b4861; }
.site-footer { color: #5c5365; background: #eee7f1; border-color: #bfb2c6; }
@media (max-width: 900px) {
    .four-portraits { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 25px; }
    .album-person img { height: clamp(170px,29vw,270px); }
    .poster-copy h1 { font-size: clamp(56px,8vw,82px); }
    .print-main { right: 8%; top: 15%; width: 65%; }
    .print-small { left: 0; width: 38%; }
}
@media (max-width: 620px) {
    .masthead-inner { min-height: 60px; }
    .brand strong { font-size: 20px; }
    .brand small { font-size: 7px; }
    .atlas-poster { margin-top: 15px; grid-template-columns: 1fr; min-height: 0; }
    .poster-copy { padding: 23px 20px 8px; }
    .poster-copy h1 { font-size: clamp(56px,13vw,74px); }
    .poster-copy .print-label { margin-bottom: 5px; }
    .poster-intro { font-size: 14px; margin: 9px 0 12px; }
    .poster-links a { font-size: 12px; }
    .poster-art { height: clamp(135px,34vw,195px); width: 100%; }
    .poster-sun { width: 52%; right: 6%; top: 1%; }
    .print-main { width: 40%; top: 0; right: 12%; }
    .print-main img { aspect-ratio: 1.75; object-position: center 45%; }
    .print-small { width: 25%; bottom: 11%; left: 25%; }
    .print { padding: 4px 4px 0; }
    .print span { font-size: 10px; padding: 3px 0; }
    .collection-strip { padding: 8px 0; }
    .album-heading > p:last-child { font-size: 15px; }
    .four-portraits { gap: 20px 12px; }
    .album-person img { height: clamp(145px,41vw,200px); }
    .album-person-text > p:not(.print-label) { font-size: 13px; }
    .album-person h2 { font-size: 26px; }
    .album-person figcaption { font-size: 12px; }
    .record-heading { padding: 15px; }
    .about-opening figure img { max-height: 280px; }
}
@media (max-width: 370px) {
    .four-portraits { grid-template-columns: 1fr; }
    .album-person img { height: 220px; object-fit: contain; }
}
@media (prefers-reduced-motion: reduce) {
    .print,.media-card img { transition: none; }
}
