:root {
  color: #2c2422;
  background: #f7f3ef;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 0; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #a65e49; outline-offset: 3px; }

.auth-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(420px, .75fr); }
.brand-panel { min-height: 100vh; padding: clamp(2rem, 6vw, 6.5rem); color: #fffaf3; background: radial-gradient(circle at 16% 17%, rgba(242, 192, 131, .42), transparent 25%), radial-gradient(circle at 78% 78%, rgba(128, 78, 65, .58), transparent 42%), #65473e; display: flex; flex-direction: column; justify-content: space-between; }
.wordmark { color: inherit; font-size: 1.35rem; text-decoration: none; font-weight: 750; letter-spacing: -.05em; }
.wordmark span { color: #f5bd78; margin-right: .25rem; }
.eyebrow { color: #c77752; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .9rem; }
.brand-panel .eyebrow { color: #ffd89b; }
h1, h2, p { margin-top: 0; }
.brand-panel h1 { font-family: Georgia, serif; font-size: clamp(3rem, 6vw, 5.8rem); max-width: 9ch; line-height: .98; letter-spacing: -.06em; margin: 0 0 1.5rem; }
.lede { max-width: 31rem; font-size: 1.08rem; line-height: 1.65; color: #f4e5d7; }
.small-print { color: #dec8b7; font-size: .86rem; margin: 2rem 0 0; }
.auth-card { width: min(100%, 32rem); align-self: center; justify-self: center; padding: 3rem; }
.tabs { display: flex; gap: 1.45rem; margin-bottom: 3.2rem; border-bottom: 1px solid #e6ddd6; }
.tab { border: 0; background: none; padding: 0 0 .8rem; color: #857570; font-weight: 700; }
.tab.active { color: #4e332c; border-bottom: 2px solid #c56b4d; margin-bottom: -1px; }
.form-intro h2 { font-family: Georgia, serif; font-size: 2rem; letter-spacing: -.045em; margin-bottom: .55rem; }
.form-intro p, .legal { color: #756762; line-height: 1.55; }
form { display: grid; gap: 1.05rem; margin-top: 2rem; }
label { display: grid; gap: .45rem; color: #4b3d38; font-size: .86rem; font-weight: 700; }
input { border: 1px solid #d7cbc2; border-radius: .7rem; padding: .88rem .95rem; background: #fffdfa; color: #2c2422; outline-offset: 2px; }
input:focus { border-color: #a65e49; outline: 2px solid rgba(196, 107, 77, .18); }
.primary-button { border: 0; border-radius: .7rem; padding: .95rem 1rem; color: #fff; background: #a9553e; font-weight: 800; margin-top: .4rem; box-shadow: 0 8px 18px rgba(108, 57, 42, .16); }
.primary-button:hover { background: #914832; }
.primary-button:disabled { opacity: .7; cursor: wait; }
.form-message { min-height: 1.2rem; color: #725f58; margin: 0; font-size: .88rem; }
.form-message.error { color: #ac3528; }
.legal { font-size: .76rem; margin-top: 1.8rem; }
.otp-switch { margin-top: 1rem; font-size: .82rem; }

.home-layout { min-height: 100vh; background: #f7f3ef; }
.app-header { height: 4.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0 clamp(1.25rem, 7vw, 7rem); border-bottom: 1px solid #e5dbd3; background: rgba(255, 253, 250, .85); }
.app-header .wordmark { color: #543b34; }
.app-header nav { display: flex; align-items: center; gap: 1.15rem; }
.nav-link { border: 0; padding: 0; color: #765d54; background: none; text-decoration: none; font-size: .9rem; font-weight: 750; }
.nav-link.active { color: #a24f39; }
.header-actions { display: flex; align-items: center; gap: .8rem; }
.new-memory { border: 0; border-radius: .55rem; padding: .58rem .75rem; color: #fff; background: #a9553e; font-size: .8rem; font-weight: 800; }
.new-memory:hover { background: #914832; }
.avatar { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; color: #fff; border-radius: 50%; background: #b66f58; font-weight: 800; }
.text-button { border: 0; background: none; color: #795c53; font-weight: 700; }
.feed-layout { width: min(100% - 2.5rem, 47rem); margin: 0 auto; padding: clamp(2.75rem, 7vw, 5rem) 0; }
.feed-heading { display: flex; justify-content: space-between; gap: 2rem; margin: 0 0 2.3rem; }
.feed-heading h1 { font-family: Georgia, serif; font-size: clamp(2.7rem, 5vw, 4.3rem); letter-spacing: -.06em; line-height: .98; margin: 0 0 .8rem; }
.feed-heading p:not(.eyebrow) { max-width: 32rem; color: #6e605b; font-size: 1.05rem; line-height: 1.6; }
.feed-spark { display: grid; flex: 0 0 auto; width: 3.2rem; height: 3.2rem; place-items: center; border-radius: 50%; background: #f3dfc5; color: #a64c37; font-size: 1.4rem; }
.feed { display: grid; gap: 1.15rem; }
.feed-loading, .feed-error { color: #786b65; text-align: center; padding: 2.2rem; }
.memory-card { overflow: hidden; border: 1px solid #e6ddd6; border-radius: 1.05rem; background: #fffdfa; box-shadow: 0 10px 26px rgba(78, 51, 44, .035); }
.post-header { display: flex; align-items: center; gap: .75rem; padding: 1.15rem 1.2rem 0; }
.post-header h2 { margin: 0 0 .1rem; font-size: .92rem; }
.post-header p { margin: 0; color: #8a7d76; font-size: .78rem; }
.post-body { padding: 1rem 1.2rem .2rem; margin: 0; color: #403532; line-height: 1.6; white-space: pre-wrap; }
.post-media { display: grid; gap: 2px; margin-top: 1rem; background: #f0e9e5; }
.post-media img, .post-media video { display: block; width: 100%; min-height: 18rem; max-height: 34rem; object-fit: cover; background: #ded4ce; }
.image-memory { position: relative; min-height: 18rem; overflow: hidden; }
.post-media.media-count-2, .post-media.media-count-3, .post-media.media-count-4 { grid-template-columns: repeat(2, 1fr); }
.post-media.media-count-2 img, .post-media.media-count-3 img, .post-media.media-count-4 img, .post-media.media-count-2 video, .post-media.media-count-3 video, .post-media.media-count-4 video { min-height: 13rem; height: 100%; }
.post-media.media-count-2 .image-memory, .post-media.media-count-3 .image-memory, .post-media.media-count-4 .image-memory { min-height: 13rem; }
.image-subject-tag { position: absolute; top: var(--tag-y); left: var(--tag-x); display: inline-flex; align-items: center; gap: .3rem; transform: translate(-50%, -50%); border: 0; padding: 0; color: #fff; background: none; font: inherit; text-decoration: none; cursor: pointer; }
.image-subject-tag span { display: grid; width: 1.5rem; height: 1.5rem; place-items: center; border: 2px solid #fff; border-radius: 50%; background: rgba(87, 48, 39, .84); font-size: 1rem; font-weight: 800; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.image-subject-tag b { max-width: 0; overflow: hidden; padding: 0; border-radius: .35rem; background: rgba(87, 48, 39, .88); font-size: .7rem; line-height: 1.5rem; white-space: nowrap; transition: max-width .16s ease, padding .16s ease; }
.image-subject-tag:hover b, .image-subject-tag:focus b { max-width: 12rem; padding: 0 .45rem; }
.tag-image-button { position: absolute; right: .55rem; bottom: .55rem; border: 0; border-radius: .4rem; padding: .4rem .5rem; color: #fff; background: rgba(54, 35, 30, .78); font-size: .7rem; font-weight: 750; opacity: 0; transition: opacity .15s ease; }
.image-memory:hover .tag-image-button, .tag-image-button:focus { opacity: 1; }
.audio-memory { display: flex; align-items: center; gap: 1rem; padding: 1.2rem; background: #f4e5d4; }
.audio-memory > span { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff8f0; background: #b2644d; font-size: 1.25rem; }
.audio-memory div { min-width: 0; flex: 1; }
.audio-memory p { color: #6f4e44; margin: 0 0 .35rem; font-size: .85rem; font-weight: 800; }
.audio-memory audio { width: 100%; height: 2.2rem; }
.post-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .45rem 1rem; padding: .85rem 1.2rem; color: #9b8d85; font-size: .75rem; }
.post-footer > span { min-width: 0; overflow-wrap: anywhere; }
.comment-toggle { border: 0; padding: 0; color: #84675d; background: none; font-size: inherit; font-weight: 750; }
.comments-panel { padding: 0 1.2rem 1.15rem; border-top: 1px solid #f0e7e1; }
.comment-list { display: grid; gap: .8rem; padding: 1rem 0; }
.comment { display: flex; gap: .55rem; }
.comment-avatar { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff; background: #b67460; font-size: .7rem; font-weight: 800; }
.comment p { margin: 0; color: #53433d; font-size: .84rem; line-height: 1.5; }
.comment strong { color: #3d302c; }
.comment small { color: #9a8b83; font-size: .69rem; }
.comment-tags { display: inline-flex; flex-wrap: wrap; gap: .25rem; margin-left: .1rem; }
.comment-tags a { color: #9c513d; font-weight: 750; text-decoration: none; }
.inline-person-link { border: 0; padding: 0; color: #9c513d; background: none; font: inherit; font-weight: 750; cursor: pointer; }
.no-comments { margin: 0; color: #95867e; font-size: .82rem; }
.comment-form { display: grid; gap: .6rem; margin: 0; padding-top: .15rem; }
.comment-form textarea { min-height: 4.2rem; padding: .55rem .65rem; border: 1px solid #e2d5cc; border-radius: .55rem; font-size: .84rem; }
.comment-tags-picker { border: 0; padding: 0; margin: 0; }
.comment-tags-picker legend { margin-bottom: .35rem; color: #83746c; font-size: .7rem; font-weight: 700; }
.comment-tags-picker > div { display: flex; flex-wrap: wrap; gap: .4rem; }
.comment-tags-picker label { display: flex; width: auto; align-items: center; gap: .25rem; color: #795e54; font-size: .75rem; font-weight: 650; }
.comment-tags-picker input { width: .9rem; height: .9rem; margin: 0; accent-color: #aa5a43; }
.comment-form-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.comment-error { color: #a63327; font-size: .73rem; }
.empty-feed { padding: 3.5rem 1.5rem; text-align: center; border: 1px dashed #d7c9bf; border-radius: 1rem; color: #766863; }
.empty-feed > span { display: grid; width: 3rem; height: 3rem; place-items: center; margin: 0 auto 1rem; border-radius: 50%; background: #f0dec7; color: #a95d47; font-size: 1.3rem; }
.empty-feed h2 { color: #4d3a34; font-family: Georgia, serif; font-size: 1.55rem; letter-spacing: -.03em; }
.empty-feed p { max-width: 27rem; margin: auto; line-height: 1.6; }
.composer-layout { width: min(100% - 2.5rem, 46rem); margin: 0 auto; padding: clamp(2.75rem, 7vw, 5rem) 0; }
.composer-heading { margin-bottom: 2.1rem; }
.composer-heading h1 { font-family: Georgia, serif; font-size: clamp(2.6rem, 5vw, 4rem); letter-spacing: -.06em; line-height: 1; margin-bottom: .8rem; }
.composer-heading > p:not(.eyebrow) { color: #6e605b; line-height: 1.6; max-width: 38rem; }
.composer-card { display: block; padding: 1.25rem; border: 1px solid #e6ddd6; border-radius: 1.05rem; background: #fffdfa; }
.composer-label { margin-bottom: .5rem; }
.composer-label span { color: #9b8d85; font-weight: 500; }
.audience-picker { margin: 1rem 0 0; padding: 1rem; border: 1px solid #e8ddd5; border-radius: .7rem; }
.audience-picker legend { padding: 0 .25rem; color: #4f3c35; font-size: .86rem; font-weight: 800; }
.audience-picker > p { margin: 0 0 .7rem; color: #877871; font-size: .79rem; line-height: 1.5; }
.circle-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.circle-option { display: flex; align-items: center; gap: .4rem; width: auto; padding: .45rem .55rem; border: 1px solid #e0d1c8; border-radius: .55rem; color: #634d45; background: #fff; font-size: .78rem; }
.circle-option input { width: 1rem; height: 1rem; margin: 0; accent-color: #ae5c45; }
.circle-option small { color: #a18f86; font-size: .7rem; font-weight: 500; }
.no-circles { margin: 0; }
.inline-button { border: 0; padding: 0; color: #9b503c; background: none; text-decoration: underline; font-weight: 750; }
textarea { width: 100%; min-height: 8rem; resize: vertical; border: 0; border-bottom: 1px solid #eee5df; padding: .25rem 0 1.1rem; color: #352a27; background: transparent; font: inherit; line-height: 1.6; outline: none; }
textarea:focus { border-color: #bb654c; }
.capture-actions { display: flex; flex-wrap: wrap; gap: .55rem; padding-top: 1rem; }
.capture-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.35rem; border: 1px solid #decfc5; border-radius: .6rem; padding: .5rem .7rem; color: #614940; background: #fffdfa; font-size: .8rem; font-weight: 750; }
.capture-button:hover { background: #f8eee4; }
.capture-button input { display: none; }
.capture-help { margin: .75rem 0 1rem; color: #9a8c84; font-size: .75rem; }
.bulk-upload-section { margin-top: 1.2rem; }
.bulk-upload-section h2, .ready-media h2, .upload-list h2 { margin: 0 0 .65rem; color: #4b3832; font-size: .9rem; }
.drop-zone { display: grid; min-height: 10rem; place-content: center; gap: .45rem; padding: 1.25rem; border: 1.5px dashed #d5bcae; border-radius: .75rem; color: #765a50; background: #fcf8f4; text-align: center; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.drop-zone:hover, .drop-zone.drag-over { border-color: #ad5b44; background: #f8e9dc; }
.drop-zone input { display: none; }
.drop-zone strong { color: #61473e; font-size: .92rem; }
.drop-zone small { color: #9b887f; font-size: .75rem; }
.drop-icon { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; margin: 0 auto .15rem; border-radius: 50%; color: #a5543e; background: #f0d9c2; font-size: 1.35rem; }
.bulk-upload-section .capture-actions { padding-top: .7rem; }
.upload-list { display: grid; gap: .55rem; margin-top: 1.15rem; padding: 1rem; border: 1px solid #ece1da; border-radius: .75rem; background: #fff; }
.upload-list h2 { margin-bottom: .1rem; }
.upload-row { display: grid; grid-template-columns: minmax(0, 1fr) 7rem 1.7rem; align-items: center; gap: .55rem; }
.upload-row > div:first-child { min-width: 0; display: grid; gap: .1rem; }
.upload-row strong, .upload-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-row strong { color: #59453e; font-size: .77rem; }
.upload-row small { color: #97877f; font-size: .69rem; }
.progress-track { height: .35rem; overflow: hidden; border-radius: 99px; background: #eee1d8; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: #b5634b; transition: width .2s ease; }
.upload-row .remove-media { position: static; }
.ready-media { margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px solid #eee4de; }
.ready-media-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.ready-media-heading h2 { margin-bottom: .35rem; }
.ready-media-heading p { margin: 0; color: #887972; font-size: .77rem; line-height: 1.45; }
.ready-media-heading > span { padding: .32rem .45rem; border-radius: 999px; color: #8f4c38; background: #f5e2ce; font-size: .7rem; font-weight: 750; white-space: nowrap; }
.bulk-tag-tools { display: flex; align-items: end; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; padding: .75rem; border-radius: .6rem; background: #f8efe8; }
.bulk-tag-tools label { display: grid; gap: .25rem; color: #77584e; font-size: .72rem; }
.bulk-tag-tools select { min-width: 12rem; border: 1px solid #ddcec4; border-radius: .45rem; padding: .4rem; color: #5a443b; background: #fff; font: inherit; }
.media-draft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .65rem; }
.draft-media { position: relative; overflow: hidden; min-height: 9rem; border-radius: .65rem; background: #eee4dc; }
.draft-media img, .draft-media video { width: 100%; height: 100%; min-height: 9rem; object-fit: cover; display: block; }
.draft-image { position: relative; height: 100%; min-height: 9rem; }
.draft-subject-tag { position: absolute; top: var(--tag-y); left: var(--tag-x); display: grid; width: 1.35rem; height: 1.35rem; place-items: center; transform: translate(-50%, -50%); border: 2px solid #fff; border-radius: 50%; color: #fff; background: rgba(91, 48, 38, .82); font-size: .9rem; font-weight: 800; }
.remove-media { position: absolute; top: .35rem; right: .35rem; display: grid; width: 1.7rem; height: 1.7rem; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(44, 31, 27, .72); font-size: 1.25rem; line-height: 1; }
.tag-draft-image { position: absolute; right: .4rem; bottom: .4rem; border: 0; border-radius: .4rem; padding: .35rem .42rem; color: #fff; background: rgba(49, 31, 26, .8); font-size: .68rem; font-weight: 750; }
.audio-preview { display: grid; align-content: center; gap: .6rem; padding: 1rem; min-height: 9rem; color: #694f45; background: #f2dfca; }
.audio-preview span { display: grid; width: 2.1rem; height: 2.1rem; place-items: center; border-radius: 50%; background: #bd6b51; color: white; }
.audio-preview p { overflow: hidden; margin: 0; font-size: .77rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.audio-preview audio { width: 100%; height: 2rem; }
.empty-composer { display: grid; min-height: 9rem; place-content: center; gap: .5rem; border: 1px dashed #d9cabe; border-radius: .7rem; color: #8a7a72; text-align: center; }
.empty-composer span { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; margin: auto; border-radius: 50%; background: #f1dfcb; color: #a95d47; font-size: 1.4rem; }
.empty-composer p { max-width: 17rem; margin: 0; font-size: .83rem; line-height: 1.5; }
.composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; color: #8f8079; font-size: .8rem; }
.circles-layout { width: min(100% - 2.5rem, 58rem); margin: 0 auto; padding: clamp(2.75rem, 7vw, 5rem) 0; }
.circles-heading { max-width: 40rem; margin-bottom: 2.25rem; }
.circles-heading h1 { font-family: Georgia, serif; font-size: clamp(2.7rem, 5vw, 4.2rem); letter-spacing: -.06em; line-height: 1; margin-bottom: .8rem; }
.circles-heading > p:not(.eyebrow) { color: #6e605b; line-height: 1.6; }
.circles-content { display: grid; grid-template-columns: minmax(17rem, .75fr) minmax(0, 1.25fr); gap: 1rem; align-items: start; }
.create-circle, .circle-list { padding: 1.2rem; border: 1px solid #e6ddd6; border-radius: 1rem; background: #fffdfa; }
.create-circle h2, .circle-list > h2 { font-family: Georgia, serif; font-size: 1.35rem; letter-spacing: -.025em; margin-bottom: 1rem; }
.create-circle form { margin-top: 0; }
.create-circle fieldset { border: 0; padding: 0; margin: 0; }
.create-circle legend { margin-bottom: .45rem; color: #5a453e; font-size: .82rem; font-weight: 750; }
.people-checklist { display: grid; gap: .35rem; max-height: 9rem; overflow: auto; padding: .55rem; border: 1px solid #eadfd7; border-radius: .55rem; }
.people-checklist label { display: flex; align-items: center; gap: .4rem; color: #6a554d; font-size: .78rem; font-weight: 600; }
.people-checklist input { width: 1rem; height: 1rem; margin: 0; accent-color: #ae5c45; }
.circle-list { display: grid; gap: .8rem; }
.circle-card { display: flex; gap: .9rem; padding: .85rem 0; border-top: 1px solid #eee4de; }
.circle-list > h2 + .circle-card, .circle-list > h2 + .empty-feed { border-top: 0; }
.circle-icon { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; flex: 0 0 auto; border-radius: .65rem; color: #a2543d; background: #f2dfc7; font-size: 1.15rem; }
.circle-card-main { min-width: 0; flex: 1; }
.circle-card h2 { margin: .1rem 0 .3rem; font-size: .95rem; }
.circle-card p { margin: 0; color: #7d6e67; font-size: .78rem; line-height: 1.45; }
.add-person-form { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; }
.add-person-form select { min-width: 0; flex: 1; border: 1px solid #dfd1c7; border-radius: .45rem; color: #5e4b44; background: #fff; font-size: .75rem; }
.secondary-button { border: 1px solid #d6c6bc; border-radius: .45rem; padding: .42rem .55rem; color: #674e45; background: #fffdfa; font-size: .73rem; font-weight: 750; white-space: nowrap; }
.quiet { margin-top: .65rem !important; color: #9b8c84 !important; font-size: .74rem !important; }
.notifications-layout { width: min(100% - 2.5rem, 46rem); margin: 0 auto; padding: clamp(2.75rem, 7vw, 5rem) 0; }
.notifications-layout h1 { font-family: Georgia, serif; font-size: clamp(2.7rem, 5vw, 4rem); letter-spacing: -.06em; line-height: 1; margin-bottom: 1.7rem; }
.notifications { display: grid; gap: .7rem; }
.notification { display: grid; grid-template-columns: 2.3rem 1fr; gap: .7rem; padding: 1rem; border: 1px solid #e6ddd6; border-radius: .8rem; background: #fffdfa; }
.notification > span { display: grid; width: 2.3rem; height: 2.3rem; place-items: center; grid-row: span 2; border-radius: 50%; color: #fff; background: #ad6049; font-weight: 850; }
.notification p { margin: 0; color: #5a4841; font-size: .85rem; line-height: 1.5; }
.notification small { color: #998a82; font-size: .72rem; }
.people-layout { width: min(100% - 2.5rem, 58rem); margin: 0 auto; padding: clamp(2.75rem, 7vw, 5rem) 0; }
.people-heading { max-width: 42rem; margin-bottom: 2.25rem; }
.people-heading h1, .person-profile-card h1 { margin: 0 0 .8rem; color: #4a3731; font-family: Georgia, serif; font-size: clamp(2.7rem, 5vw, 4.2rem); letter-spacing: -.06em; line-height: 1; }
.people-heading > p:not(.eyebrow), .person-profile-card > p:not(.eyebrow) { color: #6e605b; line-height: 1.6; }
.people-content { display: grid; grid-template-columns: minmax(17rem, .75fr) minmax(0, 1.25fr); gap: 1rem; align-items: start; }
.person-create, .people-list, .person-profile-card { padding: 1.2rem; border: 1px solid #e6ddd6; border-radius: 1rem; background: #fffdfa; }
.person-create h2, .people-list h2 { margin: 0 0 1rem; color: #4a3731; font-family: Georgia, serif; font-size: 1.35rem; letter-spacing: -.025em; }
.person-create form, .person-edit { display: grid; gap: .75rem; }
.person-create label, .person-edit label { display: grid; gap: .35rem; color: #634d45; font-size: .78rem; font-weight: 750; }
.person-create label span, .person-edit label span { color: #a08d84; font-weight: 500; }
.person-create input, .person-edit input { width: 100%; border: 1px solid #dfd1c7; border-radius: .5rem; padding: .55rem .6rem; color: #473630; background: #fff; font: inherit; }
.contact-import { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #eee4de; }
.contact-import h3 { margin: 0 0 .35rem; color: #60483f; font-size: .85rem; }
.contact-import p { margin: 0 0 .65rem; color: #83746c; font-size: .76rem; line-height: 1.45; }
.people-list-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.people-list-heading .quiet { margin: 0 !important; text-align: right; }
#people-results { display: grid; }
.person-row { display: grid; grid-template-columns: 2.35rem 1fr auto; align-items: center; gap: .7rem; width: 100%; padding: .8rem 0; border: 0; border-top: 1px solid #eee4de; color: #5a453d; background: none; text-align: left; cursor: pointer; }
.person-row:first-child { border-top: 0; }
.person-row strong, .person-row small { display: block; }
.person-row strong { color: #4d3933; font-size: .85rem; }
.person-row small { margin-top: .15rem; color: #97877f; font-size: .72rem; }
.person-row > span:last-child { color: #ab5d47; font-size: 1.4rem; }
.person-initial { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: 50%; color: #fff; background: #b56e57; font-weight: 800; }
.person-profile { margin-top: 1.1rem; }
.person-profile-card { max-width: 43rem; }
.person-profile-card dl { display: grid; grid-template-columns: 8rem 1fr; gap: .65rem 1rem; margin: 1.25rem 0; padding: 1rem 0; border-top: 1px solid #eee4de; border-bottom: 1px solid #eee4de; }
.person-profile-card dl div { display: contents; }
.person-profile-card dt { color: #9b8d85; font-size: .75rem; font-weight: 750; }
.person-profile-card dd { margin: 0; color: #5d473f; font-size: .82rem; line-height: 1.45; }
.person-edit { max-width: 25rem; margin: 1.25rem 0; }
.link-suggestion { display: grid; grid-template-columns: 1fr auto; gap: 1rem; margin: -1rem 0 1.5rem; padding: 1rem 1.1rem; border: 1px solid #ecd1bb; border-radius: .85rem; background: #fff7ef; }
.link-suggestion h2 { margin: .15rem 0 .35rem; color: #5d4238; font-family: Georgia, serif; font-size: 1.3rem; }
.link-suggestion p:not(.eyebrow) { margin: 0; color: #80685e; font-size: .79rem; line-height: 1.45; }
.link-suggestion-list { display: grid; align-content: center; gap: .35rem; min-width: 14rem; }
.link-suggestion-list label { display: flex; align-items: center; gap: .35rem; color: #654d44; font-size: .78rem; }
.link-suggestion-list small { color: #9d877b; }
.image-tagger-modal, .person-add-modal { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(43, 30, 26, .64); }
.person-add-modal { z-index: 11; }
.image-tagger { width: min(100%, 48rem); max-height: calc(100vh - 2rem); overflow: auto; padding: 1.25rem; border-radius: 1rem; background: #fffdfa; box-shadow: 0 22px 65px rgba(22, 13, 10, .35); }
.image-tagger header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.image-tagger h2 { margin: 0; font-family: Georgia, serif; font-size: 1.65rem; letter-spacing: -.035em; }
.tagger-help { color: #786961; font-size: .85rem; line-height: 1.5; }
.image-stage { position: relative; overflow: hidden; cursor: crosshair; border-radius: .7rem; background: #e9dfd8; }
.image-stage > img { display: block; width: 100%; max-height: 62vh; object-fit: contain; }
.tagger-status { min-height: 1.2rem; margin: .75rem 0 0; color: #a34532; font-size: .8rem; }
.tag-name-entry { position: absolute; z-index: 4; top: var(--tag-y); left: var(--tag-x); width: min(15rem, calc(100% - 1rem)); transform: translate(-.35rem, -.35rem); cursor: default; }
.tag-name-entry.near-right { transform: translate(calc(-100% + .35rem), -.35rem); }
.tag-name-entry.near-bottom { transform: translate(-.35rem, calc(-100% + .35rem)); }
.tag-name-entry.near-right.near-bottom { transform: translate(calc(-100% + .35rem), calc(-100% + .35rem)); }
.tag-name-entry input { width: 100%; padding: .55rem .65rem; border: 2px solid #a75640; border-radius: .55rem; background: #fffdfa; box-shadow: 0 7px 20px rgba(42, 26, 22, .22); font-size: .8rem; }
.tag-name-options { overflow: hidden; margin-top: .25rem; border: 1px solid #e1d2c9; border-radius: .55rem; background: #fffdfa; box-shadow: 0 9px 22px rgba(42, 26, 22, .18); }
.tag-name-options p { margin: 0; padding: .55rem .65rem; color: #7f7069; font-size: .73rem; line-height: 1.35; }
.tag-name-options button { display: grid; width: 100%; grid-template-columns: 1fr auto; gap: .5rem; padding: .55rem .65rem; border: 0; border-top: 1px solid #eee4de; color: #503c35; background: #fffdfa; text-align: left; }
.tag-name-options button:first-child { border-top: 0; }
.tag-name-options button:hover, .tag-name-options button:focus { background: #fbf0e5; }
.tag-name-options button strong { font-size: .78rem; }
.tag-name-options button small { align-self: center; color: #97867d; font-size: .67rem; white-space: nowrap; }
.tag-name-options .add-tag-person { display: block; color: #954b37; font-size: .75rem; font-weight: 750; }
.tag-name-status { min-height: 1rem; margin: .25rem 0 0; color: #fff; font-size: .7rem; font-weight: 700; text-shadow: 0 1px 3px rgba(42, 26, 22, .6); }
.person-add-dialog { width: min(100%, 28rem); padding: 1.25rem; border-radius: 1rem; background: #fffdfa; box-shadow: 0 22px 65px rgba(22, 13, 10, .35); }
.person-add-dialog header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.person-add-dialog h2 { margin: 0; color: #4a352f; font-family: Georgia, serif; font-size: 1.55rem; letter-spacing: -.035em; }
.person-add-dialog > p { margin: .8rem 0 0; color: #75665e; font-size: .83rem; line-height: 1.5; }
.person-add-dialog form { margin-top: 1rem; gap: .75rem; }
.person-add-dialog label { color: #5d473f; font-size: .8rem; }
.person-add-dialog label span { color: #a28f85; font-weight: 500; }
.person-add-dialog footer { display: flex; align-items: center; justify-content: flex-end; gap: .8rem; margin-top: .25rem; }

@media (max-width: 920px) {
  .auth-layout { grid-template-columns: 1fr; }
  .brand-panel { min-height: auto; padding: 2rem 1.5rem 2.5rem; gap: 2.5rem; }
  .brand-panel h1 { font-size: clamp(2.7rem, 13vw, 4rem); }
  .small-print { display: none; }
  .auth-card { padding: 2.5rem 1.5rem 3rem; }
  .tabs { margin-bottom: 2.2rem; }
  .app-header { height: auto; min-height: 4.25rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .55rem .75rem; padding: .7rem 1rem 0; }
  .app-header .wordmark { min-width: 0; }
  .app-header .header-actions { grid-column: 2; grid-row: 1; justify-self: end; }
  .app-header nav { display: flex; grid-column: 1 / -1; width: 100%; gap: .15rem; margin: 0 -.1rem; padding: 0 .1rem .45rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .app-header nav::-webkit-scrollbar { display: none; }
  .nav-link { flex: 0 0 auto; min-height: 2.5rem; padding: .55rem .6rem; white-space: nowrap; }
  .header-actions { gap: .45rem; }
  .new-memory { display: grid; width: 2.5rem; min-height: 2.5rem; place-items: center; padding: .45rem; }
  .new-memory span { display: none; }
  .header-actions .text-button { min-height: 2.5rem; padding: .45rem .1rem; }
  #back-to-feed, #back-to-people { grid-column: 1; grid-row: 2; width: max-content; min-height: 2.5rem; padding: .45rem 0; }
  .feed-layout { width: min(100% - 2rem, 47rem); }
  .feed-heading { margin-bottom: 1.8rem; }
  .post-media img, .post-media video { min-height: 14rem; }
  .image-memory { min-height: 14rem; }
  .composer-layout { width: min(100% - 2rem, 46rem); }
  .circles-layout { width: min(100% - 2rem, 58rem); }
  .notifications-layout { width: min(100% - 2rem, 46rem); }
  .people-layout { width: min(100% - 2rem, 58rem); }
  .circles-content { grid-template-columns: 1fr; }
  .people-content, .link-suggestion { grid-template-columns: 1fr; }
  .composer-footer { align-items: flex-end; }
  .upload-row { grid-template-columns: minmax(0, 1fr) 5rem 1.7rem; }
  .bulk-tag-tools { align-items: stretch; }
  .bulk-tag-tools label, .bulk-tag-tools select { width: 100%; }
}

@media (hover: none) {
  .tag-image-button { opacity: 1; }
}

@media (max-width: 520px) {
  .brand-panel { padding: 1.5rem 1.25rem 2rem; }
  .auth-card { padding: 2rem 1.25rem 2.5rem; }
  .tabs { gap: .9rem; margin-bottom: 1.8rem; }
  .feed-layout, .composer-layout, .circles-layout, .notifications-layout, .people-layout { width: min(100% - 1.5rem, 58rem); padding-top: 2rem; padding-bottom: 3rem; }
  .feed-heading { gap: .75rem; }
  .feed-spark { width: 2.6rem; height: 2.6rem; font-size: 1.15rem; }
  .memory-card, .composer-card, .create-circle, .circle-list, .person-create, .people-list, .person-profile-card { border-radius: .8rem; }
  .composer-card, .create-circle, .circle-list, .person-create, .people-list, .person-profile-card { padding: 1rem; }
  .post-header { padding: 1rem 1rem 0; }
  .post-body { padding: .85rem 1rem .15rem; }
  .post-footer { padding: .8rem 1rem; }
  .comments-panel { padding: 0 1rem 1rem; }
  .post-media img, .post-media video, .image-memory { min-height: 12rem; }
  .post-media.media-count-2 img, .post-media.media-count-3 img, .post-media.media-count-4 img, .post-media.media-count-2 video, .post-media.media-count-3 video, .post-media.media-count-4 video, .post-media.media-count-2 .image-memory, .post-media.media-count-3 .image-memory, .post-media.media-count-4 .image-memory { min-height: 9rem; }
  .tag-image-button { min-height: 2rem; opacity: 1; }
  .capture-actions > * { flex: 1 1 8.5rem; }
  .ready-media-heading { flex-wrap: wrap; gap: .55rem; }
  .ready-media-heading > span { width: max-content; }
  .upload-row { grid-template-columns: minmax(0, 1fr) auto; }
  .upload-row .progress-track { grid-column: 1 / -1; }
  .upload-row .remove-media { grid-column: 2; grid-row: 1; }
  .media-draft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .draft-media, .draft-media img, .draft-media video, .draft-image { min-height: 7.5rem; }
  .composer-footer { align-items: stretch; flex-direction: column; }
  .composer-footer .primary-button { width: 100%; }
  .add-person-form select, .add-person-form .secondary-button { min-height: 2.5rem; }
  .add-person-form select { flex-basis: 10rem; }
  .people-list-heading { align-items: start; flex-direction: column; gap: .2rem; }
  .people-list-heading .quiet { text-align: left; }
  .person-profile-card dl { grid-template-columns: 1fr; gap: .2rem; }
  .person-profile-card dd { margin-bottom: .55rem; }
  .link-suggestion { margin-top: 0; padding: .9rem; }
  .link-suggestion-list { min-width: 0; }
  .link-suggestion-list label { flex-wrap: wrap; }
  .image-tagger-modal { padding: .65rem; }
  .image-tagger { max-height: calc(100vh - 1.3rem); padding: 1rem; border-radius: .8rem; }
  .image-tagger header { align-items: center; }
  .image-tagger h2 { font-size: 1.35rem; }
  .tag-name-entry { right: .5rem; left: .5rem; width: auto; transform: translateY(-.35rem); }
  .image-stage:has(.tag-name-entry) { overflow: visible; }
  .tag-name-entry input { font-size: 16px; }
  .tag-name-options button { min-height: 2.75rem; }
  .tagger-select { align-items: stretch; flex-direction: column; }
  .tagger-select select { min-width: 0; width: 100%; }
  .person-add-modal { padding: .65rem; }
  .person-add-dialog { max-height: calc(100vh - 1.3rem); overflow: auto; padding: 1rem; border-radius: .8rem; }
  .person-add-dialog footer { flex-wrap: wrap; gap: .55rem; }
  .person-add-dialog footer .primary-button { flex: 1 1 11rem; }
  input, select, textarea { font-size: 16px; }
}

@media (max-width: 340px) {
  .app-header { padding-right: .75rem; padding-left: .75rem; }
  .app-header .avatar { display: none; }
  .feed-spark { display: none; }
}