body[data-page="character-emma.html"] {
  background: radial-gradient(ellipse 58rem 30rem at 50% 4rem, #231d22 0%, transparent 100%), var(--base);
}

.emma-profile {
  --emma-accent: #f5c493;
  --emma-subtle: #d0c0b7;
  width: min(100% - 2 * var(--gutter), 1020px);
  margin: 0 auto;
  padding-block: 1.55rem clamp(3.5rem, 8vw, 7rem);
}

.emma-profile [hidden] { display: none; }

.emma-return {
  min-height: 44px;
  color: var(--emma-subtle);
  border-bottom: 0;
  font-size: .95rem;
}

.emma-header {
  display: grid;
  grid-template-columns: clamp(126px, 16vw, 180px) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(1.75rem, 5vw, 4.25rem);
  margin: clamp(1.7rem, 3.4vw, 2.65rem) auto 1.05rem;
  max-width: 830px;
}

.emma-avatar {
  padding: 5px;
  border: 1px solid #c79a79;
  border-radius: 50%;
}

.emma-avatar img {
  display: block;
  aspect-ratio: 1;
  width: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: 50% 37%;
}

.emma-handle {
  color: #f5c493;
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: .035em;
}

.emma-identity h1 {
  margin: .31rem 0 .72rem;
  font-size: clamp(2.75rem, 5.75vw, 4.5rem);
  line-height: .99;
  letter-spacing: -.06em;
}

.emma-bio {
  color: var(--emma-subtle);
  max-width: 34ch;
  font-size: clamp(1.05rem, 2vw, 1.27rem);
  line-height: 1.45;
}

.emma-book {
  margin-top: .75rem;
  min-height: 44px;
  color: var(--emma-accent);
  border: 0;
  font-size: .95rem;
  gap: .5rem;
}

.emma-note {
  margin: 0 auto 1.45rem;
  max-width: 830px;
  color: var(--emma-subtle);
  font-size: .9rem;
}

.private-profile-notice {
  max-width: 830px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.75rem) 1rem;
  border: 1px solid var(--line);
  border-radius: .4rem;
  background: var(--panel);
  text-align: center;
}

.private-profile-notice h2 {
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  margin: 0;
}

.emma-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: .95rem clamp(1rem, 3vw, 2rem);
  margin: 0 auto clamp(1.65rem, 3.4vw, 2.65rem);
  max-width: 830px;
}

.emma-highlight {
  display: grid;
  justify-items: center;
  gap: .45rem;
  min-width: 76px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 600 .9rem/1.2 var(--body);
  cursor: pointer;
}

.emma-highlight-cover {
  display: block;
  width: clamp(65px, 8vw, 83px);
  padding: 3px;
  border: 1px solid #9c7971;
  border-radius: 50%;
}

.emma-highlight-cover img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: inherit;
  object-fit: cover;
}

.emma-highlight:hover .emma-highlight-cover,
.emma-highlight[aria-pressed="true"] .emma-highlight-cover {
  border-color: var(--emma-accent);
  box-shadow: 0 0 0 2px var(--emma-accent);
}

.emma-feed-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem 1rem;
  min-height: 68px;
  border-top: 1px solid var(--line);
}

.emma-feed-bar h2 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: -.042em;
}

.emma-count { color: var(--emma-subtle); font-size: .93rem; }

.emma-reset, .emma-dialog-controls button, .emma-dialog-close {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #86756e;
  border-radius: 99px;
  background: transparent;
  color: var(--ink);
  font: 600 .95rem/1 var(--body);
  cursor: pointer;
}

.emma-reset { margin-left: auto; padding-inline: .85rem; }

.emma-reset:hover, .emma-dialog-controls button:hover, .emma-dialog-close:hover {
  border-color: #f5c493;
  color: #f5c493;
}

.emma-reset[aria-pressed="true"] {
  border-color: #f5c493;
  background: #f5c493;
  color: #211811;
}

.emma-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(5px, 1vw, 12px); }

.emma-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 3px;
  background: #16171c;
  aspect-ratio: 4 / 5;
}

.emma-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.emma-tile:hover img { filter: brightness(1.12); }

.emma-tile-label {
  position: absolute;
  inset: auto 0 0;
  padding: 1.8rem .7rem .48rem;
  background: linear-gradient(transparent, #08090bed);
  color: #fff8ed;
  font-size: clamp(.74rem, 1.6vw, .98rem);
  line-height: 1.18;
  font-weight: 650;
}

.emma-footer-links { margin-top: 1.35rem; }
.emma-footer-links a { min-height: 44px; }

.emma-profile :is(a, button):focus-visible,
.emma-post-dialog button:focus-visible {
  outline: 2px solid #f5c493;
  outline-offset: 4px;
}

.emma-post-dialog {
  width: min(93vw, 1060px);
  max-width: none;
  max-height: 92svh;
  padding: 0;
  overflow: auto;
  color: var(--ink);
  background: #15141a;
  border: 1px solid #65554f;
  border-radius: 5px;
}

.emma-post-dialog::backdrop { background: #05060aeb; }

.emma-dialog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(250px, 1fr);
}

.emma-dialog-media {
  display: grid;
  place-items: center;
  background: #0a0a0d;
}

.emma-dialog-media img {
  display: block;
  width: 100%;
  max-height: 83svh;
  object-fit: contain;
}

.emma-dialog-copy {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 4.15rem clamp(1.1rem, 3vw, 2rem) 1.3rem;
}

.emma-dialog-copy h2 {
  font-size: clamp(2rem, 4vw, 3.35rem);
  margin: .4rem 0 .75rem;
}

.emma-caption { color: #e1d6cf; font-size: 1.05rem; line-height: 1.5; }

.emma-dialog-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  font-size: 1.5rem;
  background: #15141a;
}

.emma-dialog-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 1.5rem;
  color: #d0c0b7;
}

@media (max-width: 640px) {
  .emma-profile { padding-top: 1rem; }
  .emma-header {
    grid-template-columns: clamp(72px, 24vw, 126px) minmax(0, 1fr);
    gap: .85rem;
    align-items: start;
    margin-top: 1.35rem;
  }
  .emma-avatar { padding: 3px; margin-top: .18rem; }
  .emma-identity h1 { font-size: clamp(2.02rem, 7.15vw, 3.2rem); }
  .emma-bio { font-size: .97rem; }
  .emma-book { margin-top: .3rem; }
  .emma-note { margin-bottom: 1.15rem; }
  .emma-highlights { margin-bottom: 1.55rem; }
  .emma-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .emma-dialog-layout { grid-template-columns: minmax(0, 1fr); position: relative; }
  .emma-dialog-media img { max-height: 49svh; }
  .emma-dialog-copy { position: static; padding: .95rem 1.05rem; }
  .emma-dialog-controls { padding-top: .9rem; }
}

body[data-page="character-taya.html"] {
  background: radial-gradient(ellipse 58rem 30rem at 50% 4rem, #1b2a35 0%, transparent 100%), var(--base);
}
body[data-page="character-taya.html"] .emma-profile {
  --emma-accent: #b9dcf0;
  --emma-subtle: #ccd7de;
}
body[data-page="character-taya.html"] .emma-avatar {
  border-color: #7897ac;
}

body[data-page="character-susan.html"] {
  background: radial-gradient(ellipse 58rem 30rem at 50% 4rem, #252c25 0%, transparent 100%), var(--base);
}
body[data-page="character-susan.html"] .emma-profile {
  --emma-accent: #cedeb8;
  --emma-subtle: #d0d6ca;
}
body[data-page="character-susan.html"] .emma-avatar {
  border-color: #a8b396;
}

body[data-page="character-ashaar.html"] {
  background: radial-gradient(ellipse 58rem 30rem at 50% 4rem, #22272c 0%, transparent 100%), var(--base);
}
body[data-page="character-ashaar.html"] .emma-profile {
  --emma-accent: #d8c6ae;
  --emma-subtle: #d1cfc9;
}
body[data-page="character-ashaar.html"] .emma-avatar {
  border-color: #8f9aa2;
}
body[data-page="character-ashaar.html"] .emma-avatar img {
  object-position: 50% 31%;
}

body[data-page="character-stella.html"] {
  background: radial-gradient(ellipse 58rem 30rem at 50% 4rem, #30262d 0%, transparent 100%), var(--base);
}
body[data-page="character-stella.html"] .emma-profile {
  --emma-accent: #ebc6bc;
  --emma-subtle: #deced0;
}
body[data-page="character-stella.html"] .emma-avatar {
  border-color: #b18a96;
}

body[data-page="character-stephanie.html"] {
  background: radial-gradient(ellipse 58rem 30rem at 50% 4rem, #332621 0%, transparent 100%), var(--base);
}
body[data-page="character-stephanie.html"] .emma-profile {
  --emma-accent: #f0cfad;
  --emma-subtle: #dfd1c5;
}
body[data-page="character-stephanie.html"] .emma-avatar {
  border-color: #a9917e;
}

body[data-page="character-bryan.html"] {
  background: radial-gradient(ellipse 58rem 30rem at 50% 4rem, #222a30 0%, transparent 100%), var(--base);
}
body[data-page="character-bryan.html"] .emma-profile {
  --emma-accent: #b5d2de;
  --emma-subtle: #cbd6d9;
}
body[data-page="character-bryan.html"] .emma-avatar {
  border-color: #7d9aa7;
}