.category-choices {
  grid-template-columns: repeat(3, 1fr);
}

.public-profile-books {
  margin-top: 28px;
}

.public-profile-books .books-grid {
  margin-top: 22px;
}

.public-profile-books .book-card {
  color: inherit;
  text-decoration: none;
}

.public-profile-books .book-cover {
  min-height: 0;
}

.writer-engagement {
  width: min(900px, calc(100% - 30px));
  margin: 30px auto 0;
  padding: 25px;
  border: 1px solid rgba(126, 91, 77, .2);
  border-radius: 20px;
  background: rgba(255, 252, 247, .88);
  box-shadow: 0 16px 38px rgba(78, 55, 44, .08);
}

.writer-engagement[hidden] {
  display: none;
}

.engagement-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 17px;
}

.engagement-head h3 {
  margin: 4px 0 0;
  color: #60423b;
  font-size: 1.35rem;
  font-weight: 500;
}

.reaction-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.reaction-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  border: 1px solid #dccbc0;
  border-radius: 999px;
  background: #fffaf4;
  color: #72574f;
  padding: 5px 10px;
  cursor: pointer;
  font: 700 .72rem/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  white-space: nowrap;
}

.reaction-button:hover,
.reaction-button:focus {
  border-color: #976a5e;
  background: #f2e1d8;
  outline: none;
}

.reaction-icon {
  font-size: .82rem;
  font-weight: 500;
  line-height: 1;
}

.reaction-button [data-reaction-count] {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  background: rgba(119, 80, 70, .1);
  font-size: .64rem;
  line-height: 1;
}

.comments-list {
  max-height: 330px;
  margin: 20px 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.writer-comment {
  padding: 13px 0;
  border-top: 1px solid rgba(126, 91, 77, .14);
}

.writer-comment > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.writer-comment > div > span:first-child {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.writer-comment strong {
  color: #6b4c44;
  font: 750 .78rem/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.writer-comment time {
  color: #9a877f;
  font: 500 .67rem/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.writer-comment p,
.comments-empty {
  margin: 6px 0 0;
  color: #5f534e;
  font: 400 .87rem/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.comment-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
}

.comment-form[hidden],
.comment-auth-prompt[hidden] {
  display: none;
}

.comment-form input {
  min-width: 0;
  border: 1px solid #d9c9bd;
  border-radius: 11px;
  background: #fffdf9;
  padding: 10px 11px;
  outline: none;
}

.comment-form button {
  border: 0;
  border-radius: 11px;
  background: #80534a;
  color: #fff;
  padding: 10px 15px;
  cursor: pointer;
  font-weight: 750;
}

.comment-auth-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid #dfcec2;
  border-radius: 12px;
  background: #f8eee6;
  color: #745f57;
  font: 650 .78rem/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.comment-auth-prompt a,
.comment-actions button,
.comment-edit-form button {
  border: 1px solid #cdb8ad;
  border-radius: 999px;
  background: #fffaf4;
  color: #77574f;
  padding: 7px 11px;
  cursor: pointer;
  font: 750 .7rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-decoration: none;
  white-space: nowrap;
}

.comment-actions {
  display: flex;
  gap: 6px;
}

.comment-actions button:last-child {
  color: #9b433d;
}

.comment-edit-form {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  margin-top: 10px;
}

.comment-edit-form textarea {
  min-height: 76px;
  resize: vertical;
  border: 1px solid #d9c9bd;
  border-radius: 11px;
  background: #fffdf9;
  padding: 10px 11px;
  outline: none;
  font: inherit;
}

.engagement-status {
  min-height: 18px;
  margin: 9px 0 0;
  color: #846d65;
  font: 600 .72rem/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.connect-page {
  min-height: 100vh;
  background: radial-gradient(circle at 12% 8%, rgba(226, 198, 180, .48), transparent 28%), linear-gradient(145deg, #fbf6ee, #efe1d6);
}

.connect-main {
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  padding: 52px 0 70px;
}

.connect-intro {
  max-width: 720px;
  margin-bottom: 25px;
}

.connect-intro h1 {
  margin: 9px 0 10px;
  color: #64443d;
  font-size: clamp(2.4rem, 6vw, 4.7rem);
  font-weight: 500;
  line-height: 1;
}

.connect-intro p {
  margin: 0;
  color: #75635c;
}

.community-auth {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(360px, 1.15fr);
  gap: 34px;
  align-items: center;
  margin: 0 0 28px;
  padding: 28px;
  border: 1px solid rgba(126, 91, 77, .18);
  border-radius: 24px;
  background: rgba(255, 252, 247, .72);
}

.community-auth[hidden] {
  display: none;
}

.community-auth-copy h2 {
  margin: 8px 0 9px;
  color: #67483f;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  font-weight: 500;
  line-height: 1.15;
}

.community-auth-copy p {
  margin: 0;
  color: #806e66;
}

.auth-card {
  padding: 20px;
  border: 1px solid #dfd0c5;
  border-radius: 18px;
  background: #fffdf9;
  box-shadow: 0 15px 35px rgba(75, 52, 44, .08);
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 17px;
  padding: 4px;
  border-radius: 12px;
  background: #f2e6dc;
}

.auth-tabs button {
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #735b52;
  padding: 9px;
  cursor: pointer;
  font-weight: 750;
}

.auth-tabs button.active {
  background: #fffdf9;
  color: #68473f;
  box-shadow: 0 4px 12px rgba(90, 63, 52, .09);
}

.community-auth-form {
  display: grid;
  gap: 11px;
}

.community-auth-form[hidden] {
  display: none;
}

.community-auth-form label {
  display: grid;
  gap: 5px;
  color: #705c54;
  font: 700 .73rem/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.community-auth-form input {
  width: 100%;
  min-width: 0;
  border: 1px solid #d8c7bc;
  border-radius: 10px;
  background: #fff;
  padding: 10px 11px;
  outline: none;
}

.community-auth-form input:focus {
  border-color: #95675c;
  box-shadow: 0 0 0 3px rgba(149, 103, 92, .11);
}

.auth-passwords {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.community-auth-form small {
  color: #8e7b73;
}

.community-auth-form > button {
  border: 0;
  border-radius: 11px;
  background: #80534a;
  color: #fff;
  padding: 11px 15px;
  cursor: pointer;
  font-weight: 750;
}

.auth-status {
  min-height: 18px;
  margin-top: 9px;
  color: #8d4d45;
  font: 650 .72rem/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.chat-room {
  overflow: hidden;
  border: 1px solid rgba(126, 91, 77, .2);
  border-radius: 25px;
  background: rgba(255, 252, 247, .9);
  box-shadow: 0 25px 70px rgba(76, 52, 43, .12);
}

.chat-room-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 22px;
  border-bottom: 1px solid rgba(126, 91, 77, .16);
  background: rgba(241, 224, 212, .72);
}

.chat-room-head strong {
  color: #65483f;
}

.live-mark {
  color: #6f8c70;
  font: 750 .72rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.live-mark::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: #6ba56f;
  box-shadow: 0 0 0 5px rgba(107, 165, 111, .12);
}

.chat-account {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  color: #735c53;
  font: 650 .72rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.chat-account[hidden] {
  display: none;
}

.chat-account button {
  border: 1px solid #cdb9ad;
  border-radius: 999px;
  background: #fffaf4;
  color: #75574f;
  padding: 7px 10px;
  cursor: pointer;
}

.chat-messages {
  height: min(52vh, 520px);
  min-height: 360px;
  padding: 22px;
  overflow-y: auto;
  background: linear-gradient(rgba(255, 253, 249, .88), rgba(250, 243, 235, .92)), url('/static/writers-reader-editorial-v1.webp') center/cover;
}

.chat-message {
  max-width: 76%;
  margin: 0 0 13px;
  padding: 12px 14px;
  border: 1px solid rgba(126, 91, 77, .14);
  border-radius: 4px 16px 16px 16px;
  background: rgba(255, 252, 247, .94);
  box-shadow: 0 7px 18px rgba(86, 61, 51, .07);
}

.chat-message.is-other {
  margin-left: auto;
  border-radius: 16px 4px 16px 16px;
  background: rgba(244, 233, 225, .96);
}

.chat-message.is-own {
  margin-right: auto;
}

.chat-message header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 5px;
}

.chat-message strong {
  color: #775148;
  font: 750 .75rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.chat-message time {
  color: #a08c84;
  font: 500 .64rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.chat-message p {
  margin: 0;
  color: #4e4541;
  font: 400 .9rem/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.chat-compose {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 16px;
  border-top: 1px solid rgba(126, 91, 77, .16);
}

.chat-compose[hidden] {
  display: none;
}

.chat-locked {
  padding: 14px 18px;
  border-top: 1px solid rgba(126, 91, 77, .16);
  background: #f3e8df;
  color: #77635b;
  text-align: center;
  font: 650 .76rem/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.chat-locked[hidden] {
  display: none;
}

.chat-compose input {
  min-width: 0;
  border: 1px solid #d8c6ba;
  border-radius: 12px;
  background: #fffdf9;
  padding: 12px;
  outline: none;
}

.chat-compose button {
  border: 0;
  border-radius: 12px;
  background: #80534a;
  color: #fff;
  padding: 11px 20px;
  cursor: pointer;
  font-weight: 750;
}

.chat-note,
.chat-status {
  color: #89766f;
  font: 500 .72rem/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.chat-note {
  margin: 12px 4px 0;
}

.chat-status {
  min-height: 18px;
  padding: 0 18px 12px;
}

.profile-page {
  min-height: 100vh;
  background: radial-gradient(circle at 8% 4%, rgba(221, 191, 173, .42), transparent 28%), linear-gradient(145deg, #fbf7f0, #efe2d8);
}

.profile-books-beta{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;margin:20px 0;padding:20px 24px;border:1px solid #d7c1b4;border-radius:18px;background:linear-gradient(120deg,#fffaf2,#eee0d5);color:#50423c;text-decoration:none;box-shadow:0 12px 30px rgba(74,50,41,.07)}
.profile-books-beta[hidden]{display:none}.profile-books-beta>span{padding:6px 9px;border-radius:999px;background:#765047;color:#fff;font:800 .58rem system-ui;letter-spacing:.1em;text-transform:uppercase}.profile-books-beta h2{margin:0;font:500 1.35rem Georgia,serif}.profile-books-beta p{margin:5px 0 0;color:#7b6961;font:.75rem/1.5 system-ui}.profile-books-beta>b{font:.72rem system-ui;white-space:nowrap}

.profile-main {
  width: min(1040px, calc(100% - 32px));
  min-height: 72vh;
  margin: 0 auto;
  padding: 48px 0 72px;
}

.profile-auth-gate {
  max-width: 620px;
  margin: 70px auto;
  padding: 42px;
  border: 1px solid #dfcec2;
  border-radius: 25px;
  background: rgba(255, 252, 247, .88);
  text-align: center;
  box-shadow: 0 24px 60px rgba(80, 54, 45, .1);
}

.profile-auth-gate[hidden],
#profileContent[hidden],
.profile-list[hidden] {
  display: none;
}

.profile-auth-gate > div {
  color: #a17567;
  font-size: 2.2rem;
}

.profile-auth-gate h1 {
  margin: 10px 0;
  color: #62443d;
  font-weight: 500;
}

.profile-auth-gate p {
  color: #79665e;
}

.profile-auth-gate a {
  display: inline-block;
  margin-top: 12px;
  border-radius: 999px;
  background: #80534a;
  color: #fff;
  padding: 11px 18px;
  text-decoration: none;
  font-weight: 750;
}

.profile-identity {
  overflow: hidden;
  border: 1px solid rgba(126, 91, 77, .2);
  border-radius: 24px;
  background: rgba(255, 252, 247, .88);
}

.profile-banner {
  position: relative;
  height: 190px;
  background: linear-gradient(135deg, #d8b9a7, #efe1d5 48%, #b88677);
  background-position: center;
  background-size: cover;
}

.profile-banner > button {
  position: absolute;
  right: 16px;
  bottom: 14px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  background: rgba(70, 47, 40, .72);
  color: #fff;
  padding: 8px 13px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  font-weight: 700;
}

.profile-identity-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 26px 24px;
}

.profile-avatar {
  position: relative;
  display: grid;
  flex: 0 0 78px;
  height: 78px;
  margin-top: -30px;
  place-items: center;
  overflow: visible;
  border: 4px solid #fffaf5;
  border-radius: 50%;
  background: linear-gradient(145deg, #b78778, #744a42);
  color: #fff;
  font: 500 2.2rem/1 Georgia, serif;
  box-shadow: 0 10px 25px rgba(99, 64, 54, .2);
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.profile-avatar img[hidden],
.profile-avatar span[hidden] {
  display: none;
}

.profile-avatar > button {
  position: absolute;
  right: -5px;
  bottom: -4px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 2px solid #fffaf5;
  border-radius: 50%;
  background: #80534a;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
}

.profile-identity h1 {
  margin: 5px 0 3px;
  color: #62443d;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 500;
}

.profile-identity p {
  margin: 0;
  color: #88746c;
}

.writer-id {
  display: inline-block;
  margin-top: 8px;
  border: 1px solid #d7c3b7;
  border-radius: 999px;
  background: #f7ece4;
  color: #77594f;
  padding: 5px 9px;
  font: 750 .68rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .04em;
}

.profile-account-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.public-profile-main {
  width: min(980px, calc(100% - 32px));
  min-height: 72vh;
  margin: 0 auto;
  padding: 45px 0 72px;
}

.public-profile-hero {
  overflow: hidden;
  border: 1px solid rgba(126, 91, 77, .2);
  border-radius: 26px;
  background: rgba(255,252,247,.9);
  box-shadow: 0 22px 55px rgba(79,54,45,.1);
}

.public-profile-hero[hidden],
#publicProfileWriting[hidden],
#publicProfileLoading[hidden],
#publicExplore[hidden],
#publicLettersAd[hidden],
#publicJoin[hidden] {
  display: none;
}

.public-profile-banner {
  height: 230px;
  background: linear-gradient(135deg, #d8b9a7, #efe1d5 48%, #b88677);
  background-position: center;
  background-size: cover;
}

.public-profile-person {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 30px 28px;
}

.public-profile-avatar {
  display: grid;
  width: 96px;
  height: 96px;
  margin-top: -38px;
  overflow: hidden;
  place-items: center;
  border: 5px solid #fffaf5;
  border-radius: 50%;
  background: linear-gradient(145deg, #b78778, #744a42);
  color: #fff;
  font: 500 2.5rem/1 Georgia, serif;
}

.public-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.public-profile-avatar img[hidden],
.public-profile-avatar span[hidden] {
  display: none;
}

.public-profile-person h1 {
  margin: 5px 0 0;
  color: #62443d;
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 500;
}

.public-profile-person-copy p {
  margin: 10px 0 0;
  color: #88736b;
  font-size: .78rem;
}

.public-profile-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

.public-profile-actions a,
.public-join a {
  border: 1px solid #ceb9ae;
  border-radius: 999px;
  background: #fffaf4;
  color: #72534b;
  padding: 10px 14px;
  text-decoration: none;
  font: 750 .74rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.public-profile-actions a.primary,
.public-join a.primary {
  border-color: #80534a;
  background: #80534a;
  color: #fff;
}

.public-writing-heading {
  margin: 35px 0 14px;
  color: #64483f;
  font-weight: 500;
}

.public-discovery {
  scroll-margin-top: 90px;
}

.public-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 35px 0 15px;
}

.public-section-heading h2 {
  margin: 5px 0 0;
  color: #64483f;
  font-size: clamp(1.65rem, 4vw, 2.45rem);
  font-weight: 500;
}

.public-section-heading > a {
  color: #80584e;
  font-size: .78rem;
  font-weight: 750;
  text-decoration: none;
}

.public-writing-list {
  display: grid;
  gap: 14px;
}

.public-writing-card {
  padding: 24px;
  border: 1px solid #e0d0c5;
  border-radius: 18px;
  background: rgba(255,253,249,.94);
}

.public-writing-card h2 {
  margin: 7px 0 13px;
  color: #66483f;
  font-size: 1.35rem;
}

.public-writing-card .public-writing-body {
  margin: 0;
  color: #5f534e;
  white-space: pre-wrap;
  line-height: 1.7;
}

.public-piece-toggle {
  display: none;
}

.public-explore {
  margin-top: 38px;
  padding: 28px;
  border: 1px solid rgba(126,91,77,.16);
  border-radius: 22px;
  background: rgba(255,252,247,.76);
}

.public-explore > h2 {
  margin: 6px 0 20px;
  color: #64483f;
  font-size: clamp(1.45rem, 4vw, 2.15rem);
  font-weight: 500;
}

.public-explore-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.public-explore-grid a {
  display: grid;
  gap: 7px;
  min-height: 145px;
  padding: 20px;
  border: 1px solid #dfcec3;
  border-radius: 17px;
  background: #fffdfa;
  color: #684a42;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.public-explore-grid a:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(79,54,45,.09);
}

.public-explore-grid span {
  color: #a47668;
  font-size: 1.45rem;
}

.public-explore-grid strong {
  font-size: 1rem;
}

.public-explore-grid small {
  color: #88746d;
  line-height: 1.5;
}

.public-letters-ad {
  position: relative;
  display: flex;
  min-height: 360px;
  margin-top: 38px;
  overflow: hidden;
  align-items: center;
  border: 1px solid #decec0;
  border-radius: 26px;
  background-image: linear-gradient(90deg, rgba(250,246,238,.96) 0%, rgba(250,246,238,.86) 48%, rgba(250,246,238,.28) 78%), url('/static/letters-hero-editorial-v1.webp');
  background-position: center;
  background-size: cover;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 24px 55px rgba(76,53,44,.11);
}

.public-letters-ad > div {
  max-width: 520px;
  padding: 42px;
}

.public-letters-ad h2 {
  margin: 10px 0 4px;
  color: #825047;
  font-family: "Brush Script MT", "Segoe Script", "Lucida Handwriting", cursive;
  font-size: clamp(4.4rem, 9vw, 7rem);
  font-weight: 400;
  line-height: .9;
}

.public-letters-ad p {
  margin: 14px 0 25px;
  color: #57443d;
  font-family: Georgia, serif;
  font-size: 1.15rem;
  font-style: italic;
}

.public-letters-ad span:last-child {
  display: inline-block;
  border-radius: 999px;
  background: #80534a;
  color: #fff;
  padding: 11px 16px;
  font: 750 .76rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.public-join {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 38px;
  padding: 32px;
  border-radius: 22px;
  background: linear-gradient(135deg, #6f4941, #966c60);
  color: #fff;
}

.public-join h2 {
  margin: 6px 0 8px;
  color: #fff;
  font-size: clamp(1.55rem, 4vw, 2.3rem);
  font-weight: 500;
}

.public-join p {
  max-width: 620px;
  margin: 0;
  color: rgba(255,255,255,.82);
  line-height: 1.6;
}

.public-join .kicker {
  color: #f2d9cf;
}

.public-join > div:last-child {
  display: flex;
  gap: 9px;
  flex: 0 0 auto;
}

.public-join a {
  border-color: rgba(255,255,255,.45);
  background: transparent;
  color: #fff;
}

.public-join a.primary {
  border-color: #fffaf4;
  background: #fffaf4;
  color: #714b43;
}

.public-profile-note {
  margin-top: 18px;
  color: #8a766e;
  font-size: .74rem;
  text-align: center;
}

.profile-account-actions button,
.profile-item-actions button,
.profile-item-actions a {
  border: 1px solid #ceb9ae;
  border-radius: 999px;
  background: #fffaf4;
  color: #75564e;
  padding: 8px 12px;
  cursor: pointer;
  font: 750 .72rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-decoration: none;
}

.profile-account-actions button:last-child,
.profile-item-actions button:last-child {
  color: #9a433e;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 18px 0;
}

.profile-stats div {
  display: grid;
  gap: 2px;
  padding: 17px;
  border: 1px solid rgba(126, 91, 77, .16);
  border-radius: 16px;
  background: rgba(255, 252, 247, .72);
  text-align: center;
}

.profile-stats strong {
  color: #694940;
  font-size: 1.5rem;
}

.profile-stats span {
  color: #8a756d;
  font-size: .75rem;
}

.profile-library {
  overflow: hidden;
  border: 1px solid rgba(126, 91, 77, .2);
  border-radius: 22px;
  background: rgba(255, 252, 247, .9);
}

.profile-tabs {
  display: flex;
  gap: 7px;
  padding: 12px;
  border-bottom: 1px solid rgba(126, 91, 77, .15);
  background: #f2e4da;
}

.profile-tabs button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #765d54;
  padding: 9px 15px;
  cursor: pointer;
  font-weight: 750;
}

.profile-tabs button.active {
  background: #fffaf5;
  color: #68473f;
  box-shadow: 0 5px 14px rgba(91, 62, 52, .1);
}

.profile-list {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.profile-item {
  padding: 17px;
  border: 1px solid #e2d3c9;
  border-radius: 16px;
  background: #fffdfa;
}

.profile-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}

.profile-item h3 {
  margin: 5px 0 0;
  color: #67483f;
  font-size: 1.05rem;
}

.profile-category {
  color: #967064;
  font: 750 .66rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.profile-item time {
  color: #9b8981;
  font-size: .68rem;
  white-space: nowrap;
}

.profile-item > p {
  display: -webkit-box;
  overflow: hidden;
  margin: 12px 0;
  color: #625650;
  font-size: .86rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.profile-item-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.profile-empty {
  padding: 45px 20px;
  color: #8b7770;
  text-align: center;
}

.profile-status {
  min-height: 20px;
  margin: 0;
  padding: 0 18px 15px;
  color: #805d53;
  font-size: .76rem;
}

.profile-edit-dialog {
  width: min(680px, calc(100% - 28px));
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid #d8c6ba;
  border-radius: 22px;
  background: #fffaf5;
  padding: 0;
  box-shadow: 0 30px 90px rgba(57, 39, 34, .28);
}

.profile-share-dialog {
  width: min(560px, calc(100% - 28px));
  border: 1px solid #d8c6ba;
  border-radius: 22px;
  background: #fffaf5;
  padding: 23px;
  box-shadow: 0 30px 90px rgba(57, 39, 34, .28);
}

.profile-share-dialog::backdrop {
  background: rgba(49, 34, 30, .45);
  backdrop-filter: blur(4px);
}

.profile-share-dialog > p {
  color: #79665e;
  line-height: 1.55;
}

.profile-share-dialog label {
  display: grid;
  gap: 6px;
  color: #6e574f;
  font-weight: 700;
}

.profile-share-dialog input {
  width: 100%;
  border: 1px solid #d5c1b5;
  border-radius: 11px;
  background: #fff;
  padding: 11px;
  color: #5f504a;
}

.share-actions {
  display: flex;
  gap: 8px;
  margin-top: 15px;
  flex-wrap: wrap;
}

.share-actions button,
.share-actions a {
  border: 1px solid #cdb8ad;
  border-radius: 999px;
  background: #fffaf4;
  color: #75564e;
  padding: 9px 13px;
  cursor: pointer;
  font: 750 .73rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-decoration: none;
}

.share-actions button:first-child {
  border-color: #80534a;
  background: #80534a;
  color: #fff;
}

.profile-edit-dialog::backdrop {
  background: rgba(49, 34, 30, .45);
  backdrop-filter: blur(4px);
}

.profile-edit-dialog form {
  display: grid;
  gap: 14px;
  padding: 23px;
}

.profile-edit-dialog label {
  display: grid;
  gap: 6px;
  color: #6e574f;
  font-weight: 700;
}

.profile-edit-dialog input,
.profile-edit-dialog select,
.profile-edit-dialog textarea {
  width: 100%;
  border: 1px solid #d8c6ba;
  border-radius: 11px;
  background: #fff;
  padding: 10px 11px;
  font: inherit;
}

.profile-edit-dialog textarea {
  min-height: 250px;
  resize: vertical;
}

@media (max-width: 720px) {
  .category-choices {
    grid-template-columns: 1fr;
  }

  .writer-engagement {
    padding: 20px 16px;
  }

  .engagement-head,
  .writer-comment > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .comment-form,
  .comment-edit-form,
  .chat-compose {
    grid-template-columns: 1fr;
  }

  .comment-auth-prompt {
    align-items: flex-start;
    flex-direction: column;
  }

  .community-auth {
    grid-template-columns: 1fr;
    padding: 21px 16px;
  }

  .auth-passwords {
    grid-template-columns: 1fr;
  }

  .chat-room-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .chat-account {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }

  .chat-messages {
    min-height: 430px;
    padding: 16px;
  }

  .chat-message {
    max-width: 92%;
  }

  .profile-identity {
    overflow: hidden;
  }

  .profile-banner {
    height: 145px;
  }

  .profile-identity-row {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 0 18px 20px;
  }

  .profile-account-actions {
    width: 100%;
    margin-left: 0;
  }

  .public-profile-banner {
    height: 118px;
  }

  .public-profile-person {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 16px 16px;
  }

  .public-profile-avatar {
    width: 66px;
    height: 66px;
    margin-top: -27px;
    border-width: 3px;
    font-size: 1.75rem;
  }

  .public-profile-main {
    width: calc(100% - 20px);
    padding: 24px 0 42px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .public-profile-hero {
    border-radius: 18px;
  }

  .public-profile-person-copy {
    min-width: 0;
    flex: 1;
  }

  .public-profile-person h1 {
    margin-top: 3px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.62rem;
    line-height: 1.12;
  }

  .public-profile-person-copy p {
    margin-top: 7px;
    font-size: .72rem;
    line-height: 1.45;
  }

  .writer-id {
    margin-top: 6px;
    padding: 4px 8px;
    font-size: .62rem;
  }

  .public-profile-actions {
    width: 100%;
    margin-left: 0;
  }

  .public-profile-actions a {
    padding: 8px 11px;
    font-size: .69rem;
  }

  .public-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
    margin: 25px 2px 11px;
  }

  .public-section-heading h2 {
    font-size: 1.48rem;
    line-height: 1.18;
  }

  .public-section-heading > a {
    font-size: .72rem;
  }

  .public-writing-list {
    gap: 10px;
  }

  .public-writing-card {
    padding: 16px;
    border-radius: 14px;
  }

  .public-writing-card h2 {
    margin: 5px 0 9px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.08rem;
    line-height: 1.28;
  }

  .public-writing-card .public-writing-body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: .91rem;
    line-height: 1.62;
  }

  .public-writing-card.has-long-piece:not(.piece-expanded) .public-writing-body {
    position: relative;
    max-height: 9.72em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 72%, transparent);
    mask-image: linear-gradient(#000 72%, transparent);
  }

  .public-piece-toggle {
    display: inline-block;
    margin-top: 10px;
    border: 0;
    border-radius: 999px;
    background: #f0e2d8;
    color: #75564e;
    padding: 8px 11px;
    cursor: pointer;
    font: 750 .69rem/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .public-explore-grid {
    grid-template-columns: 1fr;
  }

  .public-explore {
    margin-top: 24px;
    padding: 19px 15px;
    border-radius: 17px;
  }

  .public-explore > h2 {
    margin-bottom: 14px;
    font-size: 1.42rem;
    line-height: 1.2;
  }

  .public-explore-grid {
    gap: 8px;
  }

  .public-explore-grid a {
    grid-template-columns: auto 1fr;
    min-height: 0;
    gap: 2px 10px;
    padding: 13px;
    border-radius: 13px;
  }

  .public-explore-grid span {
    grid-row: 1 / 3;
    align-self: center;
    font-size: 1.2rem;
  }

  .public-explore-grid strong {
    font-size: .9rem;
  }

  .public-explore-grid small {
    font-size: .72rem;
    line-height: 1.4;
  }

  .public-letters-ad {
    min-height: 285px;
    margin-top: 24px;
    border-radius: 18px;
    background-image: linear-gradient(rgba(250,246,238,.9),rgba(250,246,238,.7)), url('/static/letters-hero-editorial-v1.webp');
    background-position: 68% center;
  }

  .public-letters-ad > div {
    padding: 21px;
  }

  .public-letters-ad h2 {
    margin-top: 7px;
    font-size: 3.7rem;
    line-height: .88;
  }

  .public-letters-ad p {
    margin: 10px 0 17px;
    font-size: .98rem;
  }

  .public-letters-ad span:last-child {
    padding: 9px 12px;
    font-size: .69rem;
  }

  .public-join {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
    margin-top: 24px;
    padding: 20px 17px;
    border-radius: 17px;
  }

  .public-join h2 {
    font-size: 1.46rem;
    line-height: 1.2;
  }

  .public-join p {
    font-size: .82rem;
    line-height: 1.5;
  }

  .public-join > div:last-child {
    width: 100%;
    flex-wrap: wrap;
  }

  .public-join a {
    padding: 8px 11px;
    font-size: .69rem;
  }

  .profile-tabs {
    overflow-x: auto;
  }

  .profile-item-head {
    flex-direction: column;
  }
}

.writer-privacy-choice,
.profile-privacy-choice {
  display: flex !important;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 14px;
  border: 1px solid rgba(104, 83, 73, .18);
  border-radius: 12px;
  background: rgba(255, 255, 255, .38);
  cursor: pointer;
}
.writer-privacy-choice input,
.profile-privacy-choice input { width: 17px !important; height: 17px; margin-top: 2px; flex: 0 0 auto; accent-color: #765d52; }
.writer-privacy-choice span,
.profile-privacy-choice span { display: grid; gap: 3px; }
.writer-privacy-choice b,
.profile-privacy-choice b { color: #4c423e; font-size: .8rem; }
.writer-privacy-choice small,
.profile-privacy-choice small { color: #7d726d; font-size: .7rem; line-height: 1.4; }
.field-hint { color: #8a7d77; font-size: .65rem; font-weight: 500; }

.writer-notification-bell{position:relative;width:36px;height:36px;margin-left:auto;border:1px solid rgba(104,83,73,.18);border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.62);color:#594b45;font-size:1.25rem;cursor:pointer}
.writer-notification-bell>span{transform:rotate(45deg);line-height:1}
.writer-notification-bell b{position:absolute;right:-4px;top:-5px;min-width:18px;height:18px;padding:0 4px;border:2px solid #faf7f1;border-radius:10px;display:grid;place-items:center;background:#9b4f4a;color:#fff;font:800 9px/1 system-ui}
.writer-notification-bell b[hidden]{display:none}
.writer-notification-bell.has-unread{box-shadow:0 0 0 4px rgba(155,79,74,.08)}
.writer-notification-panel{position:fixed;z-index:1300;top:66px;right:max(16px,4vw);width:min(390px,calc(100vw - 24px));max-height:min(620px,calc(100vh - 86px));overflow:hidden;border:1px solid rgba(104,83,73,.18);border-radius:18px;background:#fffdf8;box-shadow:0 24px 70px rgba(70,50,42,.22)}
.writer-notification-panel[hidden]{display:none}
.notification-panel-head{display:flex;align-items:center;justify-content:space-between;padding:17px 18px;border-bottom:1px solid rgba(104,83,73,.12)}
.notification-panel-head small{color:#9b6c59;font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.notification-panel-head h2{margin:3px 0 0;color:#493f3a;font-size:1rem}
.notification-panel-head button{width:30px;height:30px;border:0;border-radius:50%;background:#f2ebe4;color:#655650;font-size:1.15rem;cursor:pointer}
.notification-list{max-height:520px;overflow-y:auto;padding:8px}
.notification-item{position:relative;display:grid;grid-template-columns:34px 1fr;gap:10px;padding:12px;border-radius:12px;color:inherit;text-decoration:none}
.notification-item:hover{background:#f7f0e9;color:inherit}
.notification-item.unread{background:#faf0eb}
.notification-item.unread::after{content:"";position:absolute;right:11px;top:13px;width:6px;height:6px;border-radius:50%;background:#a65750}
.notification-item i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#efe7df;color:#8d6252;font-style:normal}
.notification-item span{display:grid;gap:3px;padding-right:6px}
.notification-item b{color:#4d433e;font-size:.78rem}
.notification-item small{color:#766b66;font-size:.7rem;line-height:1.45}
.notification-item time{color:#a0928b;font-size:.6rem}
.notification-signin{display:block;margin:8px;padding:11px;border-radius:10px;background:#685249;color:#fff;text-align:center;text-decoration:none;font-size:.72rem;font-weight:800}
.notification-empty{padding:35px 20px;color:#81746e;text-align:center;font-size:.75rem;line-height:1.6}
.comment-anonymous-choice{display:inline-flex!important;align-items:center;gap:6px;color:#756963;font-size:.68rem;white-space:nowrap;cursor:pointer}
.comment-anonymous-choice input{width:15px!important;height:15px;accent-color:#765d52}
@media(max-width:780px){.writer-notification-bell{margin-left:auto;margin-right:8px}.writer-notification-panel{top:60px;right:12px}.notification-list{max-height:calc(100vh - 150px)}}

/* Public-profile writing list and focused reading modal */
.public-writing-card{padding:17px;border-color:#e2d3c9;border-radius:16px;background:#fffdfa}
.public-writing-card h2{margin:6px 0 0;font-size:1.05rem}
.public-writing-card .public-writing-body{display:-webkit-box;overflow:hidden;margin:12px 0;color:#625650;font-size:.86rem;line-height:1.55;white-space:pre-wrap;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.public-writing-actions{margin-top:2px}
.public-writing-actions button{border-color:#d9c8bd!important;background:#f8f0e9!important;color:#76564c!important}
.public-reading-dialog{width:min(720px,70vw);max-width:70vw;height:auto;max-height:70vh;margin:auto;padding:0;border:1px solid rgba(123,89,75,.22);border-radius:24px;background:#fffdf8;color:#4d423d;box-shadow:0 34px 100px rgba(64,43,35,.32);overflow:hidden}
.public-reading-dialog::backdrop{background:rgba(36,27,24,.64);backdrop-filter:blur(7px)}
.public-reading-shell{position:relative;max-height:70vh;overflow-y:auto;padding:clamp(28px,5vw,54px);scrollbar-width:none;background:radial-gradient(circle at 50% 0,rgba(190,148,116,.12),transparent 38%),linear-gradient(90deg,rgba(133,93,72,.025) 1px,transparent 1px),#fffdf8;background-size:auto,28px 28px,auto}
.public-reading-shell::-webkit-scrollbar{width:0;height:0}
.public-reading-close{position:sticky;z-index:2;float:right;top:0;width:34px;height:34px;margin:-12px -12px 0 0;border:1px solid rgba(116,83,69,.17);border-radius:50%;display:grid;place-items:center;background:rgba(255,253,248,.92);color:#70564c;font-size:1.25rem;cursor:pointer;backdrop-filter:blur(8px)}
.public-reading-ornament{margin:0 0 13px;color:#a87a67;text-align:center;font-size:1.35rem}
.public-reading-dialog .profile-category{text-align:center}
.public-reading-dialog h2{max-width:560px;margin:10px auto 18px;color:#5b433b;text-align:center;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.5rem,3vw,2.25rem);font-weight:500;line-height:1.2}
.public-reading-divider{display:flex;align-items:center;justify-content:center;gap:10px;max-width:240px;margin:0 auto 24px;color:#b08a77}
.public-reading-divider span{width:72px;height:1px;background:linear-gradient(90deg,transparent,#d5bcae)}
.public-reading-divider span:last-child{background:linear-gradient(90deg,#d5bcae,transparent)}
.public-reading-divider b{font-size:.65rem}
.public-reading-body{max-width:590px;margin:0 auto;color:#514743;font-family:Georgia,"Times New Roman",serif;font-size:clamp(.95rem,1.5vw,1.08rem);line-height:1.9;white-space:pre-wrap}
.public-reading-end{margin:28px 0 0;color:#aa8170;text-align:center;font-size:.8rem;letter-spacing:.12em}
@media(max-width:700px){.public-reading-dialog{width:70vw;max-width:70vw;border-radius:18px}.public-reading-shell{padding:24px 20px}.public-reading-dialog h2{font-size:1.35rem}.public-reading-body{font-size:.9rem;line-height:1.72}}

@media (max-width: 720px) {
  .writer-engagement {
    width: calc(100% - 20px);
    margin-top: 18px;
    padding: 15px;
    border-radius: 15px;
  }

  .engagement-head {
    gap: 10px;
    margin-bottom: 11px;
  }

  .engagement-head h3 {
    font-size: 1.12rem;
  }

  .reaction-row {
    width: 100%;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .reaction-row::-webkit-scrollbar {
    display: none;
  }

  .reaction-button {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 4px 8px;
    font-size: .65rem;
  }

  .comments-list {
    max-height: 260px;
    margin: 13px 0;
  }

  .writer-comment {
    padding: 10px 0;
  }

  .writer-comment p,
  .comments-empty,
  .profile-item > p,
  .public-writing-card .public-writing-body {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: .86rem;
    line-height: 1.58;
    letter-spacing: -.012em;
  }

  .comment-form input,
  .comment-edit-form textarea {
    padding: 9px 10px;
    font-size: .84rem;
  }

  .comment-auth-prompt {
    gap: 9px;
    padding: 10px 11px;
    font-size: .7rem;
  }

  .connect-main {
    width: calc(100% - 20px);
    padding: 28px 0 42px;
  }

  .connect-intro {
    margin-bottom: 17px;
  }

  .connect-intro h1 {
    margin: 6px 0;
    font-size: 2rem;
    line-height: 1.08;
  }

  .connect-intro p,
  .community-auth-copy p {
    font-size: .84rem;
    line-height: 1.5;
  }

  .community-auth {
    gap: 17px;
    margin-bottom: 18px;
    padding: 15px;
    border-radius: 16px;
  }

  .community-auth-copy h2 {
    margin: 5px 0;
    font-size: 1.35rem;
  }

  .auth-card {
    padding: 14px;
    border-radius: 13px;
  }

  .auth-tabs {
    margin-bottom: 12px;
  }

  .community-auth-form {
    gap: 9px;
  }

  .community-auth-form input {
    padding: 9px 10px;
  }

  .chat-room {
    border-radius: 17px;
  }

  .chat-room-head {
    gap: 9px;
    padding: 13px 14px;
  }

  .chat-messages {
    min-height: 280px;
    height: 42vh;
    padding: 12px;
  }

  .chat-message {
    margin-bottom: 8px;
    padding: 9px 11px;
  }

  .chat-message p {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: .82rem;
    line-height: 1.5;
  }

  .chat-compose {
    gap: 7px;
    padding: 11px;
  }

  .chat-locked {
    padding: 10px 12px;
  }

  .profile-main {
    width: calc(100% - 20px);
    min-height: 0;
    padding: 26px 0 43px;
  }

  .profile-auth-gate {
    margin: 35px auto;
    padding: 26px 18px;
    border-radius: 17px;
  }

  .profile-banner {
    height: 112px;
  }

  .profile-identity-row {
    gap: 12px;
    padding: 0 15px 16px;
  }

  .profile-avatar {
    flex-basis: 64px;
    height: 64px;
    margin-top: -25px;
    border-width: 3px;
    font-size: 1.7rem;
  }

  .profile-identity h1 {
    margin-top: 3px;
    font-size: 1.55rem;
    line-height: 1.12;
  }

  .profile-identity p {
    font-size: .75rem;
  }

  .profile-account-actions {
    gap: 6px;
    flex-wrap: wrap;
  }

  .profile-account-actions button,
  .profile-item-actions button,
  .profile-item-actions a {
    padding: 7px 9px;
    font-size: .66rem;
  }

  .profile-stats {
    gap: 7px;
    margin: 11px 0;
  }

  .profile-stats div {
    padding: 11px 7px;
    border-radius: 12px;
  }

  .profile-stats strong {
    font-size: 1.2rem;
  }

  .profile-library {
    border-radius: 15px;
  }

  .profile-tabs {
    gap: 4px;
    padding: 8px;
  }

  .profile-tabs button {
    padding: 7px 10px;
    font-size: .7rem;
    white-space: nowrap;
  }

  .profile-list {
    gap: 8px;
    padding: 11px;
  }

  .profile-item {
    padding: 12px;
    border-radius: 12px;
  }

  .profile-item-head {
    gap: 5px;
  }

  .profile-item h3 {
    font-size: .95rem;
    line-height: 1.3;
  }

  .profile-item > p {
    margin: 8px 0;
  }

  .profile-empty {
    padding: 27px 14px;
    font-size: .82rem;
  }

  .profile-edit-dialog,
  .profile-share-dialog {
    border-radius: 16px;
  }

  .profile-edit-dialog form,
  .profile-share-dialog {
    gap: 10px;
    padding: 15px;
  }

  .profile-edit-dialog textarea {
    min-height: 165px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
    line-height: 1.55;
  }

  .public-writing-card .public-writing-body {
    font-size: .86rem;
    line-height: 1.58;
  }
}

@media (max-width: 720px) {
  .writer-comment p,
  .comments-empty,
  .chat-message p,
  .profile-item > p,
  .public-writing-card .public-writing-body,
  .profile-edit-dialog textarea {
    color: #514a46;
    font-family: "American Typewriter", "Courier New", Courier, monospace;
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.56;
    letter-spacing: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  .public-writing-card h2,
  .profile-item h3 {
    color: #4c423e;
    font-family: "American Typewriter", "Courier New", Courier, monospace;
    font-weight: 600;
    letter-spacing: 0;
  }
}

@media (max-width: 720px) {
  .profile-name-block {
    min-width: 0;
    flex: 1 1 150px;
  }

  .profile-identity .profile-name-block h1 {
    margin: 2px 0 3px;
    font-size: 1.18rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
}