/*
 * Woonwoon v3 runtime system
 *
 * This sheet is intentionally not loaded on P00/P01. Intro, hub, and their
 * liquid navigation keep their approved motion and rendering contract.
 * Every other public screen uses the same 430px mobile source at every
 * viewport; a restrained ambient field occupies the desktop remainder.
 */

html:has(body.public-v3-page) {
  color: #f0e8d8;
  background:
    radial-gradient(560px 760px at 18% 18%, rgba(52, 66, 95, 0.075), transparent 74%),
    radial-gradient(500px 700px at 82% 78%, rgba(112, 83, 48, 0.045), transparent 78%),
    #02040a;
}

body.public-v3-page {
  --paper: #03070f;
  --paper-deep: #02050c;
  --surface: #121823;
  --surface-soft: #18202f;
  --band: #0a101b;
  --ink: #f0e8d8;
  --ink-soft: #b7b2aa;
  --ink-faint: #8f8b84;
  --brand: #c7a268;
  --brand-deep: #d7c29e;
  --brand-soft: rgba(199, 162, 104, 0.12);
  --brass: #c7a268;
  --brass-light: #c7a268;
  --brass-ink: #d7c29e;
  --brass-soft: rgba(199, 162, 104, 0.12);
  --line: rgba(91, 81, 64, 0.78);
  --line-strong: #625947;
  --field-well: #121823;
  --danger: #d7ad68;
  width: min(100%, 430px);
  min-height: 100dvh;
  margin-inline: auto;
  color: var(--ink);
  background:
    radial-gradient(260px 320px at 86% 7%, rgba(54, 67, 94, 0.14), transparent 74%),
    radial-gradient(260px 320px at 4% 72%, rgba(112, 83, 48, 0.05), transparent 78%),
    linear-gradient(180deg, #03070f 0%, #040813 58%, #02050c 100%);
  background-attachment: fixed;
  box-shadow: var(--shadow-column);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
}

body.public-v3-page::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  width: min(100%, 430px);
  margin-inline: auto;
  pointer-events: none;
  opacity: 0.11;
  background-image: repeating-radial-gradient(circle at 31% 19%, rgba(255,255,255,.2) 0 .45px, transparent .7px 4px);
  mix-blend-mode: soft-light;
}

.public-v3-page .public-ambient-media {
  display: none;
}

.public-v3-page #main-content {
  min-height: calc(100dvh - 64px);
  padding-bottom: calc(var(--bottom-bar-height) + 56px + env(safe-area-inset-bottom, 0px));
}

.public-v3-share-page #main-content {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

.public-v3-page .page-shell,
.public-v3-page .narrow-shell,
.public-v3-page .page-shell--narrow,
.public-v3-page .page-shell--reading,
.public-v3-page .page-shell--reading-document {
  width: min(calc(100% - 60px), 370px);
  max-width: 370px;
  margin-inline: auto;
}

/* Header: one quiet mark and one 44px hit target. */
.public-v3-page .site-header {
  position: relative;
  z-index: 90;
  height: 64px;
  color: var(--ink);
  border: 0;
  background: transparent;
}

.public-v3-page .site-header__inner {
  width: 100%;
  max-width: none;
  min-height: 64px;
  padding: 0 20px;
}

.public-v3-page .wordmark__mark {
  display: block;
  width: 76px;
  height: 30px;
  object-fit: contain;
}

.public-v3-page .site-drawer {
  justify-self: end;
}

.public-v3-page .site-drawer__toggle {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 0;
  color: var(--brass-light);
  background: transparent;
}

.public-v3-page .site-drawer__bars {
  width: 24px;
  height: 24px;
}

.public-v3-page .site-drawer__bars i,
.public-v3-page .site-drawer__bars i:last-child {
  left: 0;
  width: 24px;
  height: 1px;
  border-radius: 0;
  background: var(--brass-light);
}

.public-v3-page .site-drawer__panel {
  width: min(100vw, 430px);
  max-width: 430px;
  padding: 86px 30px 34px;
  color: var(--ink);
  border-left: 1px solid rgba(199, 162, 104, 0.22);
  border-radius: 32px 0 0 32px;
  background:
    radial-gradient(260px 320px at 82% 8%, rgba(54,67,94,.18), transparent 74%),
    linear-gradient(180deg, rgba(8,14,25,.995), rgba(3,7,15,.995));
  box-shadow: -24px 0 64px rgba(0,0,0,.52);
}

.public-v3-page .site-drawer__profile,
.public-v3-page .site-drawer__link,
.public-v3-page .site-drawer__signout {
  color: var(--ink);
  border-color: var(--line);
  border-radius: 3px;
  background: transparent;
}

.public-v3-page .site-drawer__profile small,
.public-v3-page .site-drawer__link small {
  color: var(--ink-faint);
}

/* Screen rhythm: 30px rails, 84px content start in the 1120px reference. */
.public-v3-page .section-pad,
.public-v3-page .section-space {
  padding-block: 20px 0;
}

.public-v3-page .section-pad + .section-pad,
.public-v3-page .section-pad + .section-muted,
.public-v3-page .section-muted + .section-pad {
  padding-top: 34px;
}

.public-v3-page .section-muted {
  color: inherit;
  border: 0;
  background: transparent;
}

.public-v3-page .page-intro,
.public-v3-page .account-heading,
.public-v3-page .checkout-heading,
.public-v3-page .chat-entry__copy,
.public-v3-page .feature-entry__copy {
  display: block;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

/* The legacy public sheet assumed a desktop canvas and added decorative inset
   borders to these blocks. v3 is a single 370px reading rail, so composed
   screens must collapse before any screen-specific rules are applied. */
.public-v3-page :is(.auth-shell, .feature-entry__grid, .chat-entry__grid, .chat-entry__grid--product) {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.public-v3-page :is(.entry-card, .compatibility-direct-form)::before {
  content: none;
}

.public-v3-page .entry-card {
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
}

.public-v3-page .entry-card__header {
  align-items: start;
}

.public-v3-page .eyebrow,
.public-v3-page .preview-label {
  color: var(--brass-light);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0;
  text-transform: none;
}

.public-v3-page h1,
.public-v3-page .page-intro h1,
.public-v3-page .account-heading h1,
.public-v3-page .checkout-heading h1 {
  margin: 8px 0 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 650;
  line-height: 32px;
  letter-spacing: -0.25px;
}

.public-v3-page h2 {
  color: #e8dfd0;
  font-size: 16px;
  font-weight: 650;
  line-height: 23px;
  letter-spacing: -0.1px;
}

.public-v3-page h3 {
  color: #e8dfd0;
  font-size: 14px;
  font-weight: 650;
  line-height: 21px;
}

.public-v3-page .page-intro__lead,
.public-v3-page .account-heading p,
.public-v3-page .checkout-heading p,
.public-v3-page .auth-intro > p,
.public-v3-page .feature-entry__copy > p,
.public-v3-page .chat-entry__copy > p {
  max-width: 100%;
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  line-height: 19px;
}

.public-v3-page .account-heading,
.public-v3-page .account-heading > div {
  min-width: 0;
  max-width: 100%;
}

.public-v3-page .account-heading h1 {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: keep-all;
}

/* Flat components: hairlines and hierarchy instead of generic cards. */
.public-v3-page :is(
  .chooser-card, .price-card, .principle-card, .entry-card, .fortune-card,
  .profile-record, .chart-detail-panel, .chart-wide-card, .dashboard-panel,
  .account-menu-grid article, .account-detail-panel, .account-recharge,
  .inquiry-compose, .inquiry-history, .inquiry-message, .payment-refund-card,
  .refund-detail-card, .closure-status-card, .danger-zone, .notice-box,
  .catalog-empty, .catalog-note, .contact-primary, .contact-hours,
  .company-story, .company-values article, .company-details,
  .compatibility-person-card, .compatibility-relation-panel,
  .compatibility-score-card, .chat-thread-panel, .chat-workspace,
  .checkout-card, .checkout-assurance, .signed-out-gate, .empty-state
) {
  color: inherit;
  border-color: var(--line);
  border-radius: 3px;
  background: transparent;
  box-shadow: none;
}

.public-v3-page :is(
  .chooser-card, .price-card, .principle-card, .fortune-card,
  .account-menu-grid article, .payment-refund-card, .dashboard-panel
) {
  padding: 16px 0;
  border-width: 0 0 1px;
}

.public-v3-page :is(
  .entry-card, .chart-detail-panel, .chart-wide-card, .account-detail-panel,
  .account-recharge, .inquiry-compose, .inquiry-history, .refund-detail-card,
  .closure-status-card, .danger-zone, .checkout-card, .checkout-assurance,
  .signed-out-gate, .empty-state
) {
  padding: 16px 0;
  border-width: 1px 0;
}

.public-v3-page :is(
  .chooser-grid, .pricing-grid, .principle-grid, .fortune-grid,
  .account-menu-grid, .account-detail-grid, .dashboard-grid,
  .point-pack-grid, .contact-grid, .company-values,
  .compatibility-person-grid, .checkout-grid
) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.public-v3-page :is(.section-heading, .panel-heading, .entry-card__header) {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
}

.public-v3-page :is(.section-heading, .panel-heading) > p {
  color: var(--ink-faint);
  font-size: 12px;
  line-height: 18px;
}

/* Forms */
.public-v3-page :is(.field, .field-group) {
  margin-top: 13px;
}

.public-v3-page fieldset.field {
  min-width: 0;
  margin-inline: 0;
  padding: 0;
  border: 0;
}

.public-v3-page fieldset.field > legend {
  margin: 0 0 6px;
  padding: 0;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

.public-v3-page :is(.field, .field-group) > label,
.public-v3-page :is(.auth-form, .entry-form, .closure-form, .refund-request-form, .inquiry-reply-form) label {
  display: block;
  margin: 0 0 6px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

.public-v3-page :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  color: var(--ink);
  border: 1px solid #5b5140;
  border-radius: 3px;
  outline: 0;
  background: #121823;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
  /* iOS enlarges the viewport when a focused text control is below 16px. */
  font: 500 16px/22px var(--font-sans);
  color-scheme: dark;
}

.public-v3-page textarea {
  min-height: 112px;
  padding-block: 12px;
  resize: vertical;
}

.public-v3-page :is(input, select, textarea)::placeholder {
  color: #8f8b84;
  opacity: 1;
}

.public-v3-page :is(input, select, textarea):focus-visible {
  border-color: var(--brass-light);
  box-shadow: 0 0 0 2px rgba(199,162,104,.17);
}

.public-v3-page :is(input, select, textarea)[aria-invalid="true"] {
  border-color: #d7ad68;
}

.public-v3-page input[type="checkbox"],
.public-v3-page input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #c7a268;
}

/* Choices are solid wells, not labels floating over the page background. */
.public-v3-page .segmented-control {
  gap: 0;
  overflow: hidden;
  border: 1px solid #5b5140;
  border-radius: 3px;
  background: #121823;
}

.public-v3-page .segmented-control span {
  min-height: 48px;
  color: var(--ink-soft);
  border: 0;
  border-radius: 0;
  background: #121823;
  box-shadow: none;
}

.public-v3-page .segmented-control label + label span {
  box-shadow: inset 1px 0 0 #5b5140;
}

.public-v3-page .segmented-control input:checked + span {
  color: #ead7b3;
  background: #2a2929;
  box-shadow: inset 0 -2px 0 var(--brass-light);
}

.public-v3-page .segmented-control label + label input:checked + span {
  box-shadow: inset 1px 0 0 #5b5140, inset 0 -2px 0 var(--brass-light);
}

.public-v3-page :is(.field-row, .field-row--identity) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.public-v3-page .form-hint,
.public-v3-page .form-footnote {
  color: var(--ink-faint);
  font-size: 11px;
  line-height: 17px;
}

.public-v3-page .field small,
.public-v3-page .check-field small,
.public-v3-page .preview-note {
  color: var(--ink-faint);
  font-size: 11px;
  line-height: 17px;
}

.public-v3-page .check-field {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin-top: 14px !important;
}

.public-v3-page .check-field strong,
.public-v3-page .check-field small {
  display: block;
}

.public-v3-page .time-unknown-note {
  display: none;
  margin: 8px 0 0 28px;
  padding-left: 10px;
  color: #c7b08a;
  border-left: 2px solid #d7ad68;
  font-size: 11px;
  line-height: 17px;
}

.public-v3-page .check-field:has(input[name$="[time_unknown]"]:checked) + .time-unknown-note {
  display: block;
}

.public-v3-page .form-errors,
.public-v3-page .flash {
  margin: 12px 0;
  padding: 11px 0 11px 14px;
  color: #c7b08a;
  border: 0;
  border-left: 2px solid #d7ad68;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Actions */
.public-v3-page .button,
.public-v3-page button.button,
.public-v3-page input.button {
  min-height: 44px;
  padding: 0 14px;
  color: #e8dfd0;
  border: 1px solid #625947;
  border-radius: 3px;
  background: #18202f;
  box-shadow: none;
  font: 650 13px/20px var(--font-sans);
  transform: none;
}

.public-v3-page .button--large,
.public-v3-page .button--full,
.public-v3-page input[type="submit"].button {
  min-height: 52px;
}

.public-v3-page .button--primary,
.public-v3-page .button--primary:hover:not(:disabled) {
  color: #25292f;
  border-color: rgba(255,255,255,.36);
  background: #f3f1ed;
}

.public-v3-page .button--quiet,
.public-v3-page .button--quiet:hover:not(:disabled) {
  color: #e8dfd0;
  border-color: #625947;
  background: #18202f;
}

.public-v3-page .button:hover:not(:disabled) {
  filter: brightness(1.05);
}

.public-v3-page .button:focus-visible,
.public-v3-page a:focus-visible,
.public-v3-page button:focus-visible {
  outline: 2px solid var(--brass-light);
  outline-offset: 3px;
}

.public-v3-page .button:disabled,
.public-v3-page .button[aria-disabled="true"] {
  color: #6f6c67;
  border-color: #343944;
  background: #121823;
}

.public-v3-page .text-link,
.public-v3-page a:not(.button):not(.bottom-bar__link):not(.wordmark):not(.site-drawer__link):not(.site-drawer__profile):not(.reading-question-index__link):not(.reading-key-points__link):not(.reading-toc__section-link) {
  color: #d7c29e;
  text-underline-offset: 3px;
}

.public-v3-page .status-pill {
  min-height: 24px;
  padding: 2px 8px;
  color: #d7c29e;
  border: 1px solid #625947;
  border-radius: 3px;
  background: transparent;
  box-shadow: none;
  font-size: 11px;
  font-weight: 650;
}

/* Lists and facts */
.public-v3-page :is(.account-record-list, .profile-record-list, .payment-refund-list, .chat-thread-list) {
  border-top: 1px solid var(--line);
}

.public-v3-page .reading-list__new {
  margin-top: 16px;
}

.public-v3-page :is(.account-record, .profile-record) {
  min-height: 54px;
  padding: 12px 0;
  color: inherit;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.public-v3-page .profile-record {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
}

.public-v3-page .profile-record__actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.public-v3-page .profile-record__actions > :is(a, form),
.public-v3-page .profile-record__actions .button {
  min-width: 0;
  width: 100%;
}

.public-v3-page .profile-record__actions > form:last-child {
  grid-column: 1 / -1;
}

.public-v3-page .dashboard-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0 0 18px;
  border: 1px solid var(--line);
  border-width: 1px 0;
}

.public-v3-page .dashboard-summary article {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 12px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.public-v3-page .dashboard-summary article:last-child {
  border-bottom: 0;
}

.public-v3-page .dashboard-summary :is(span, small) {
  color: var(--ink-faint);
  font-size: 11px;
  line-height: 17px;
}

.public-v3-page .dashboard-summary strong {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  color: #e8dfd0;
  font-size: 18px;
  line-height: 24px;
}

.public-v3-page .reading-list {
  overflow: visible;
  border: 1px solid var(--line);
  border-width: 1px 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.public-v3-page .reading-list__item {
  min-height: 64px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.public-v3-page .reading-list__item:last-child {
  border-bottom: 0;
}

.public-v3-page .reading-list__item:hover {
  background: transparent;
}

.public-v3-page .reading-list__icon {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
}

.public-v3-page .reward-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-width: 1px 0;
}

.public-v3-page .reward-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 12px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.public-v3-page .reward-card:last-child {
  border-bottom: 0;
}

.public-v3-page .reward-card__label,
.public-v3-page .reward-card__note {
  color: var(--ink-faint);
  font-size: 11px;
  line-height: 17px;
}

.public-v3-page .reward-card__value {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  color: #e8dfd0;
  font-size: 18px;
  line-height: 24px;
}

.public-v3-page .reward-guide {
  padding: 16px 0;
  border: 1px solid var(--line);
  border-width: 0 0 1px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.public-v3-page .reward-guide .button-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.public-v3-page .reward-guide .button-row > :first-child {
  grid-column: 1 / -1;
}

.public-v3-page .reward-guide .button-row .button {
  min-width: 0;
  width: 100%;
}

.public-v3-page .account-session-row {
  margin-top: 18px;
  padding: 16px 0;
  border: 1px solid var(--line);
  border-width: 1px 0;
  border-radius: 0;
  background: transparent;
}

.public-v3-page .account-panel-empty {
  min-height: 116px;
  padding: 18px 0;
}

.public-v3-page .policy-footnote {
  margin-top: 18px;
  padding: 14px 0 14px 14px;
  color: var(--ink-soft);
  border: 0;
  border-left: 2px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
}

.public-v3-page .form-local-state {
  margin: 0 0 12px;
  padding: 10px 12px;
  color: #d9c9ad;
  border-left: 2px solid var(--brass-light);
  background: rgba(198,164,106,.07);
  font-size: 12px;
  line-height: 18px;
}

.public-v3-page .form-local-state--error {
  color: #e2b8ad;
  border-left-color: #9d625a;
  background: rgba(157,98,90,.08);
}

.public-v3-page .inline-confirm {
  width: 100%;
}

.public-v3-page .inline-confirm > summary {
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 8px 12px;
  color: #d7c29e;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 650;
}

.public-v3-page .inline-confirm > summary::-webkit-details-marker {
  display: none;
}

.public-v3-page .inline-confirm > div {
  margin-top: 8px;
  padding: 12px;
  border-left: 2px solid var(--line-strong);
}

.public-v3-page .inline-confirm p {
  margin: 0 0 10px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 18px;
}

.public-v3-page .share-manage-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.public-v3-page .share-manage-actions > *,
.public-v3-page .share-manage-actions .button {
  min-width: 0;
  width: 100%;
}

.public-v3-page .payment-refund-card {
  border-radius: 0;
}

.public-v3-page .account-wallet-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 15px 0;
  border: 1px solid var(--line);
  border-width: 1px 0;
}

.public-v3-page .account-wallet-summary strong,
.public-v3-page .account-wallet-summary small {
  display: block;
}

.public-v3-page .account-wallet-summary small {
  margin-top: 3px;
  color: var(--ink-faint);
  font-size: 11px;
}

.public-v3-page .account-wallet-summary > span {
  color: var(--brand-deep);
  font-weight: 650;
}

.public-v3-page .account-wallet-summary .button {
  grid-column: 1 / -1;
}

.public-v3-page .account-menu-list {
  margin-top: 0;
  border-bottom: 1px solid var(--line);
}

.public-v3-page .account-menu-list > a {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: inherit !important;
  border-bottom: 1px solid rgba(91,81,64,.72);
  text-decoration: none;
}

.public-v3-page .account-menu-list > a:last-child {
  border-bottom: 0;
}

.public-v3-page .account-menu-list strong,
.public-v3-page .account-menu-list small {
  display: block;
}

.public-v3-page .account-menu-list strong {
  color: #e8dfd0;
  font-size: 13px;
}

.public-v3-page .account-menu-list small {
  margin-top: 3px;
  color: var(--ink-faint);
  font-size: 11px;
}

.public-v3-page :is(.account-record__icon, .profile-record__mark) {
  color: var(--brass-light);
  border-color: var(--line-strong);
  background: transparent;
}

.public-v3-page .fact-list {
  border-top: 1px solid var(--line);
}

.public-v3-page .fact-list > div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.public-v3-page .fact-list dt {
  color: var(--ink-faint);
}

.public-v3-page .fact-list dd {
  color: #e8dfd0;
}

.public-v3-page .fact-strip {
  margin: 18px 0;
  padding: 13px 0 13px 14px;
  border-left: 2px solid var(--brass-light);
}

.public-v3-page .fact-strip h2 {
  margin: 0 0 4px;
  font-size: 13px;
}

.public-v3-page .fact-strip p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 18px;
}

/* Long documents and reading paper are the only intentionally light surfaces. */
.public-v3-page :is(.legal-document, .editorial-document, .reading-sheet, .reading-document, .reading-paper, .public-sheet) {
  color: #282521;
  border: 1px solid #ddd0b4;
  border-radius: 2px;
  background:
    repeating-radial-gradient(circle at 19% 23%, rgba(50,46,41,.028) 0 .42px, transparent .62px 4px),
    linear-gradient(180deg, #f3f1ed, #eee9df);
  box-shadow: none;
}

.public-v3-page :is(.legal-document, .editorial-document) {
  padding: 24px 18px;
}

.public-v3-page :is(.legal-document, .editorial-document, .reading-sheet, .reading-document, .reading-paper, .public-sheet) :is(h1,h2,h3) {
  color: #282521;
  font-family: var(--font-display);
}

.public-v3-page :is(.legal-document, .editorial-document, .reading-sheet, .reading-document, .reading-paper, .public-sheet) p,
.public-v3-page :is(.legal-document, .editorial-document, .reading-sheet, .reading-document, .reading-paper, .public-sheet) li,
.public-v3-page :is(.legal-document, .editorial-document, .reading-sheet, .reading-document, .reading-paper, .public-sheet) dd {
  color: #514b42;
}

.public-v3-page .reading-paper {
  margin-top: 18px;
  padding: 20px 18px;
}

/* A reading is the one light, paper-like surface in the product. The previous
   4px repeating dot field produced visible vertical moire on phones and made
   the sheet look screened rather than fibrous. Keep the texture broad and
   quiet, and restore the paper-local ink after the public heading/link rules. */
.public-v3-page .reading-world .reading-document {
  width: calc(100% + 60px);
  max-width: none;
  margin-inline: -30px;
  padding-inline: 30px;
  color: var(--ink);
  background:
    linear-gradient(rgba(244, 238, 224, .92), rgba(241, 234, 219, .94)),
    url("/assets/woonwoon/saju-result-paper-07308154.webp") center / cover fixed;
}

.public-v3-page .reading-world .reading-document :is(h1, h2, h3) {
  color: var(--ink);
}

.public-v3-page .reading-world .reading-document .reading-toc__title {
  color: var(--ink-soft);
}

.public-v3-page .reading-world .reading-document .reading-toc a:hover .reading-toc__title {
  color: var(--accent);
}

.public-v3-page .reading-paper::after,
.public-v3-page .public-sheet::after {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  margin: 18px 0 0 auto;
  border: 1px solid rgba(139,73,66,.62);
  border-radius: var(--radius-seal-sm);
  opacity: .52;
}

.public-v3-page .reading-world {
  margin-inline: calc((370px - min(100%, 370px)) / -2);
  color: var(--ink);
  background: transparent;
}

.public-v3-page :is(.natal-grid, .pillar-grid, .basis-grid) {
  border-color: var(--line);
  background: transparent;
}

.public-v3-page :is(.gan-ji, .natal-grid__cell strong, .pillar-grid strong) {
  font-family: var(--font-display);
}

/* Product and conversation workspaces stay inside the mobile rail. */
.public-v3-page .chat-product-shell {
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.public-v3-page .chat-thread-panel {
  padding: 14px 0;
  border: 1px solid var(--line);
  border-width: 1px 0;
  background: transparent;
}

.public-v3-page .chat-workspace {
  min-width: 0;
  margin-top: 18px;
  border: 1px solid var(--line);
  background: #0b111d;
}

.public-v3-page .chat-workspace__header {
  min-height: 58px;
  padding: 12px 14px;
}

.public-v3-page .chat-messages {
  min-height: 260px;
  max-height: none;
  padding: 18px 14px;
}

.public-v3-page .chat-workspace > .form-local-state {
  margin: 0 14px 10px;
}

.public-v3-page .chat-form-error {
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}

.public-v3-page .chat-workspace__empty--large {
  min-height: 300px;
  padding: 44px 20px 112px;
}

.public-v3-page .chat-composer--active {
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 8px;
  margin: 0 14px 82px;
  padding: 14px 0;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--line);
  background: transparent;
}

.public-v3-page .chat-composer--active textarea {
  min-width: 0;
  min-height: 92px;
  padding: 12px 14px;
}

.public-v3-page .compatibility-direct-form {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.public-v3-page :is(.compatibility-manual-entry, .saved-profile-request--primary) {
  margin-top: 18px;
  padding: 14px 0;
  border: 1px solid var(--line);
  border-width: 1px 0;
}

.public-v3-page .compatibility-manual-entry > summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #e8dfd0;
  cursor: pointer;
  list-style: none;
}

.public-v3-page .compatibility-manual-entry > summary::-webkit-details-marker {
  display: none;
}

.public-v3-page .compatibility-manual-entry > summary small {
  display: block;
  margin-top: 3px;
  color: var(--ink-faint);
  font-size: 11px;
}

.public-v3-page .saved-profile-request--primary > div > p:not(.eyebrow) {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 12px;
}

.public-v3-page .compatibility-person-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.public-v3-page .fortune-grid {
  grid-template-columns: minmax(0, 1fr);
}

.public-v3-page .fortune-tabs {
  margin-top: 18px;
}

.public-v3-page .fortune-tabs__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.public-v3-page .fortune-tabs__list button {
  min-height: 44px;
  padding: 0 4px;
  color: var(--ink-faint);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  font: 600 12px/18px var(--font-sans);
}

.public-v3-page .fortune-tabs__list button[aria-selected="true"] {
  color: var(--brand-deep);
  border-bottom-color: var(--brass-light);
}

.public-v3-page .fortune-tabs .fortune-card {
  animation: v3-period-reveal 180ms ease-out both;
}

/* Free results are the first useful answer, not a promotional card. They use
   the same ruled-paper hierarchy as the paid document and keep every number
   attached to the calculation it came from. */
.public-v3-page .free-reading-result {
  width: 100%;
  margin-top: 24px;
  padding: 24px 0 18px;
  border-block: 1px solid var(--line-strong);
  scroll-margin-top: 24px;
}

.public-v3-page .free-reading-result__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}

.public-v3-page .free-reading-result__header h2,
.public-v3-page .free-reading-result__header h3 {
  margin: 5px 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.45;
  word-break: keep-all;
}

.public-v3-page .free-reading-result__score {
  display: flex;
  align-items: baseline;
  color: var(--brass-light);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.public-v3-page .free-reading-result__score strong {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 500;
  line-height: 1;
}

.public-v3-page .free-reading-result__score span {
  margin-left: 3px;
  color: var(--ink-faint);
  font-size: 12px;
}

.public-v3-page .free-reading-result__summary {
  margin: 18px 0 0;
  color: var(--brand-deep);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.75;
}

.public-v3-page .free-reading-result__lens {
  margin: 12px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.7;
}

.public-v3-page .free-reading-result__lens strong {
  color: var(--ink);
}

.public-v3-page .free-reading-metrics {
  display: grid;
  gap: 0;
  margin-top: 22px;
  border-top: 1px solid var(--line);
}

.public-v3-page .free-reading-metric {
  display: grid;
  gap: 8px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.public-v3-page .free-reading-metric__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.public-v3-page .free-reading-metric__head strong {
  color: var(--ink);
  font-size: 13px;
}

.public-v3-page .free-reading-metric__head span {
  color: var(--brass-light);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.public-v3-page .free-reading-metric p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.7;
}

.public-v3-page .free-reading-result__bridge {
  display: grid;
  gap: 18px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line-strong);
}

.public-v3-page .free-reading-result__bridge h3 {
  margin: 4px 0 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  word-break: keep-all;
}

.public-v3-page .free-reading-result__bridge > div > p:last-child {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.75;
}

.public-v3-page .free-reading-unlock {
  display: grid;
  gap: 10px;
}

.public-v3-page .free-reading-unlock .catalog-cost {
  margin: 0;
}

.public-v3-page .free-yearly-months {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 22px;
  background: var(--line);
  border-block: 1px solid var(--line);
}

.public-v3-page .free-yearly-month {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 10px 7px;
  background: var(--paper);
  text-align: center;
}

.public-v3-page .free-yearly-month > span,
.public-v3-page .free-yearly-month > small {
  color: var(--ink-faint);
  font-size: 10px;
}

.public-v3-page .free-yearly-month > strong {
  color: var(--brand-deep);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.public-v3-page .free-yearly-month .fact-meter {
  height: 3px;
}

.public-v3-page .free-yearly-contrast {
  display: grid;
  gap: 0;
  margin-top: 16px;
  border-top: 1px solid var(--line);
}

.public-v3-page .free-yearly-contrast p {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  margin: 0;
  padding: 11px 0;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}

.public-v3-page .free-yearly-contrast strong {
  color: var(--ink);
}

.public-v3-page .free-yearly-contrast span {
  color: var(--brass-light);
}

/* The source design used four narrow mockup columns. In Woonwoon the report
   outline reads as one editorial index at every viewport. */
.public-v3-page .compatibility-preview {
  grid-template-columns: minmax(0, 1fr);
}

.public-v3-page .compatibility-preview__heading {
  padding: 25px 0 27px;
  border-right: 0;
  border-bottom: 1px solid var(--line);
}

.public-v3-page .compatibility-preview__list,
.public-v3-page .compatibility-preview__list--report {
  grid-template-columns: minmax(0, 1fr);
}

/* Paid yearly results keep the same ruled editorial language as the rest of
   the reading. Each month is a full-width chapter trigger, not a thin card
   pushed to one side of the page. */
.public-v3-page .period-score-intro,
.public-v3-page .month-flow-heading {
  display: grid;
  gap: 5px;
  margin-top: 22px;
}

.public-v3-page .period-score-intro > p:last-child,
.public-v3-page .month-flow-heading > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.7;
}

.public-v3-page .month-flow-heading h3 {
  margin: 4px 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}

.public-v3-page .yearly-month-highlights {
  margin-top: 28px;
  padding-block: 24px;
  border-block: 1px solid var(--line-strong);
}

.public-v3-page .yearly-month-highlights header {
  display: grid;
  gap: 5px;
}

.public-v3-page .yearly-month-highlights h3,
.public-v3-page .yearly-month-highlights header > p:last-child {
  margin: 0;
}

.public-v3-page .yearly-month-highlights h3 {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.5;
}

.public-v3-page .yearly-month-highlights header > p:last-child {
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.7;
}

.public-v3-page .yearly-month-highlights ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.public-v3-page .yearly-month-highlights li {
  display: grid;
  gap: 5px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
}

.public-v3-page .yearly-month-highlights li span {
  color: var(--ink-faint);
  font-size: 11px;
}

.public-v3-page .yearly-month-highlights li strong {
  color: var(--brand-deep);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
}

.public-v3-page .yearly-month-highlights li p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.7;
}

.public-v3-page .month-detail-list {
  display: grid;
  margin-top: 14px;
  border-top: 1px solid var(--line-strong);
}

.public-v3-page .month-detail {
  border-bottom: 1px solid var(--line);
}

.public-v3-page .month-detail > summary {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto 16px;
  gap: 8px 12px;
  align-items: center;
  min-height: 66px;
  padding: 10px 0;
  cursor: pointer;
  list-style: none;
}

.public-v3-page .month-detail > summary::-webkit-details-marker {
  display: none;
}

.public-v3-page .month-detail > summary::after {
  content: "+";
  grid-column: 4;
  grid-row: 1;
  align-self: end;
  margin-left: 4px;
  color: var(--brass-light);
  font-size: 16px;
  line-height: 1;
}

.public-v3-page .period-timing--yearly .month-detail > summary {
  grid-template-columns: 48px minmax(0, 1fr) 16px;
}

.public-v3-page .period-timing--yearly .month-detail > summary::after {
  grid-column: 3;
  align-self: center;
}

.public-v3-page .month-detail__focus {
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.public-v3-page .month-detail[open] > summary::after {
  content: "−";
}

.public-v3-page .month-detail__month,
.public-v3-page .month-detail__pillar,
.public-v3-page .month-detail__score {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.public-v3-page .month-detail__month {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.public-v3-page .month-detail__month strong {
  color: var(--ink);
  font-size: 13px;
}

.public-v3-page .month-detail__month small,
.public-v3-page .month-detail__pillar small,
.public-v3-page .month-detail__score small {
  color: var(--ink-faint);
  font-size: 10px;
}

.public-v3-page .month-detail__pillar .sexagenary {
  font-size: 18px;
}

.public-v3-page .month-detail__score {
  justify-self: end;
  color: var(--brass-light);
  font-variant-numeric: tabular-nums;
}

.public-v3-page .month-detail__score strong {
  font-size: 16px;
}

.public-v3-page .month-detail__meter {
  grid-column: 2 / -1;
  width: 100%;
  height: 4px;
}

.public-v3-page .month-detail__body {
  display: grid;
  gap: 18px;
  padding: 4px 0 22px;
}

.public-v3-page .month-detail__scores {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-block: 1px solid var(--line);
}

.public-v3-page .month-detail__scores > div {
  min-width: 0;
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 10px 3px;
  border-left: 1px solid var(--line);
}

.public-v3-page .month-detail__scores > div:first-child {
  border-left: 0;
}

.public-v3-page .month-detail__scores span {
  color: var(--ink-faint);
  font-size: 9px;
}

.public-v3-page .month-detail__scores strong {
  color: var(--brand-deep);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.public-v3-page .month-detail__reading > strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
}

.public-v3-page .month-detail__reading ul {
  display: grid;
  gap: 7px;
  margin: 9px 0 0;
  padding-left: 18px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.7;
}

.public-v3-page .month-detail__basis.chart-detail-panel {
  margin: 0;
}

.public-v3-page .score-weight__basis {
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 11px;
}

.public-v3-page .score-weight__basis summary {
  min-height: 32px;
  display: flex;
  align-items: center;
  color: var(--brass-light);
  cursor: pointer;
}

.public-v3-page .compatibility-preview__list li {
  min-height: 0;
  gap: 6px;
  padding: 17px 0;
}

.public-v3-page .yearly-report-outline {
  display: grid;
  gap: 0;
  margin: 18px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.public-v3-page .yearly-report-outline li {
  display: grid;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.public-v3-page .yearly-report-outline strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
}

.public-v3-page .yearly-report-outline span {
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.65;
}

.public-v3-page .report-question-index {
  margin-top: 30px;
}

.public-v3-page .free-reading-result__bridge .report-question-index {
  margin-top: 0;
}

.public-v3-page .report-question-index h3 {
  margin: 5px 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  word-break: keep-all;
}

.public-v3-page .reading-question-index {
  margin: 26px 0 4px;
}

.public-v3-page .reading-question-index__link,
.public-v3-page .month-detail__narrative-link a {
  color: var(--ink);
  text-decoration: none;
  text-underline-offset: 3px;
}

.public-v3-page .reading-question-index__link:hover,
.public-v3-page .month-detail__narrative-link a:hover {
  color: var(--brass-light);
  text-decoration: underline;
}

.public-v3-page .month-detail__narrative-link {
  margin: 0;
  font-family: var(--font-display);
  font-size: 13px;
}

.public-v3-page .core-report-index {
  margin-top: 34px;
  padding-block: 26px 8px;
  border-top: 1px solid var(--line-strong);
}

.public-v3-page .core-report-index h2 {
  max-width: 720px;
  margin: 6px 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 500;
  line-height: 1.45;
  word-break: keep-all;
}

.public-v3-page .reading-world .reading-document .reading-toc__title small {
  flex: 0 0 auto;
  color: var(--brass-ink);
  font: 600 0.68rem/1.5 var(--font-sans);
  letter-spacing: 0.02em;
}

.public-v3-page .reading-world .reading-document .reading-toc__title > span {
  min-width: 0;
}

.public-v3-page .reading-prose--structured {
  display: grid;
  gap: clamp(26px, 4vw, 38px);
}

.public-v3-page .reading-prose__block h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 500;
  line-height: 1.55;
  word-break: keep-all;
}

.public-v3-page .reading-prose__block > p:first-of-type {
  margin-top: 0;
}

.public-v3-page .reading-prose__block > p:last-child {
  margin-bottom: 0;
}

/* Paid-result reading flow. The natal chart comes first, followed by the
   chaptered answer and then optional structure and timing detail. */
.public-v3-page .reading-world .reading-opening {
  margin: 0 0 24px;
  padding: 0 0 26px;
  border-bottom: 1px solid var(--line);
}

.public-v3-page .reading-world .reading-opening .eyebrow {
  margin-bottom: 10px;
  color: var(--accent);
  font: 700 11px/1.5 var(--font-sans);
  letter-spacing: .04em;
}

.public-v3-page .reading-world .reading-opening > p:last-child {
  max-width: 31em;
  margin: 0;
  padding-left: 16px;
  border-left: 2px solid var(--accent);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(20px, calc(var(--col) * .052), 27px);
  line-height: 1.72;
  letter-spacing: -.018em;
  word-break: keep-all;
}

.public-v3-page .reading-world .reading-progress-meter {
  position: fixed;
  z-index: 40;
  top: 0;
  left: 50%;
  width: min(100vw, var(--app-width, 430px));
  height: 3px;
  overflow: hidden;
  transform: translateX(-50%);
  background: rgba(224, 211, 184, .45);
  pointer-events: none;
}

.public-v3-page .reading-world .reading-progress-meter > span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--brass-light);
  transition: transform 120ms linear;
}

.public-v3-page .reading-world .reading-key-points {
  margin: 0 0 30px;
  padding: 0 0 26px;
  border-bottom: 1px solid var(--line-strong);
}

.public-v3-page .reading-world .reading-key-points > .eyebrow {
  margin: 0 0 12px;
  color: var(--brass-ink);
  font: 700 11px/1.5 var(--font-sans);
  letter-spacing: .04em;
}

.public-v3-page .reading-world .reading-key-points ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.public-v3-page .reading-world .reading-key-points a {
  min-height: 100%;
  display: flex;
  align-items: center;
  padding: 12px 11px;
  color: var(--ink);
  border: 1px solid var(--line);
  background: rgba(255, 252, 244, .48);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
  word-break: keep-all;
}

.public-v3-page .reading-world .reading-question-index {
  margin: 0 0 34px;
}

.public-v3-page .reading-world .reading-question-index .yearly-report-outline {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
  margin-top: 10px;
}

.public-v3-page .reading-world .reading-question-index .yearly-report-outline li {
  min-width: 0;
  padding: 10px 0;
}

.public-v3-page .reading-world .reading-question-index__link {
  display: block;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: -.01em;
  opacity: 1;
}

.public-v3-page .reading-world .reading-document .reading-toc {
  display: block;
  margin: 0;
  padding: 0 0 34px;
  border-bottom: 1px solid var(--line-strong);
}

.public-v3-page .reading-world .reading-toc__header {
  display: grid;
  gap: 5px;
  margin-bottom: 14px;
}

.public-v3-page .reading-world .reading-toc__header p {
  margin: 0;
  color: var(--ink-faint);
  font-size: 12px;
  line-height: 1.65;
}

.public-v3-page .reading-world .reading-toc__header .eyebrow {
  color: var(--brass-ink);
  font: 700 11px/1.5 var(--font-sans);
  letter-spacing: .04em;
}

.public-v3-page .reading-world .reading-document .reading-chapter-index {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.public-v3-page .reading-world .reading-chapter-index__item {
  min-width: 0;
  border-top: 1px solid var(--line);
}

.public-v3-page .reading-world .reading-document .reading-chapter-index__link {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 3px 10px;
  align-items: start;
  padding: 16px 0 11px;
  color: var(--ink);
  font-family: var(--font-sans);
}

.public-v3-page .reading-world .reading-chapter-index__link > span {
  grid-row: 1 / span 2;
  padding-top: 2px;
  color: var(--accent);
  font: 700 11px/1.5 var(--font-sans);
}

.public-v3-page .reading-world .reading-chapter-index__link > strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
}

.public-v3-page .reading-world .reading-chapter-index__link > small {
  grid-column: 2;
  color: var(--ink-faint);
  font-size: 11px;
  line-height: 1.65;
}

.public-v3-page .reading-world .reading-chapter-index__item > ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0 0 8px 42px;
  list-style: none;
}

.public-v3-page .reading-world .reading-chapter-index__item > ol > li {
  min-width: 0;
  border-top: 0;
}

.public-v3-page .reading-world .reading-chapter-index__item > ol a {
  padding: 7px 0;
  font-size: 13px;
}

.public-v3-page .reading-world .reading-sections {
  display: block;
}

.public-v3-page .reading-world .reading-chapter {
  scroll-margin-top: 72px;
}

.public-v3-page .reading-world .reading-chapter__header {
  margin: 54px 0 0;
  padding: 25px 20px 24px;
  border: 0;
  border-left: 3px solid var(--brass-light);
  background: linear-gradient(120deg, #071c2a, #0d2b3e);
}

.public-v3-page .reading-world .reading-chapter__header > span {
  display: block;
  margin-bottom: 7px;
  color: #d7b77a;
  font: 700 11px/1.5 var(--font-sans);
  letter-spacing: .04em;
}

.public-v3-page .reading-world .reading-chapter__header h2 {
  margin: 0;
  color: #fff8e9;
  font-size: clamp(25px, calc(var(--col) * .065), 34px);
  font-family: "Gapyeong Hanseokbong", var(--font-display);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.025em;
}

.public-v3-page .reading-world .reading-chapter__header p {
  max-width: 42em;
  margin: 9px 0 0;
  color: #d6dce0;
  font-size: 13px;
  line-height: 1.75;
}

.public-v3-page .reading-world .reading-document .reading-section {
  display: block;
  padding: 40px 0 44px;
  border-top: 1px solid var(--line);
  box-shadow: none;
}

.public-v3-page .reading-world .reading-document .reading-section--accordion {
  padding: 0;
  scroll-margin-top: 72px;
}

.public-v3-page .reading-world .reading-section--accordion > summary {
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  align-items: center;
  margin: 0;
  padding: 27px 0;
  list-style: none;
  cursor: pointer;
}

.public-v3-page .reading-world .reading-section--accordion > summary::-webkit-details-marker {
  display: none;
}

.public-v3-page .reading-world .reading-section__toggle::before,
.public-v3-page .reading-world .reading-section__toggle::after {
  content: "";
  display: block;
  width: 12px;
  height: 1px;
  background: var(--accent);
  transition: transform .18s ease;
}

.public-v3-page .reading-world .reading-section__toggle::after {
  transform: translateY(-1px) rotate(90deg);
}

.public-v3-page .reading-world .reading-section--accordion[open] .reading-section__toggle::after {
  transform: translateY(-1px) rotate(0);
}

.public-v3-page .reading-world .reading-section--accordion > .reading-section__content {
  padding: 0 0 44px 44px;
}

.public-v3-page .reading-world .reading-next-section {
  width: 100%;
  max-width: 42em;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px 14px;
  align-items: center;
  margin-top: 30px;
  padding: 16px 0;
  color: var(--ink);
  border: 0;
  border-block: 1px solid var(--line-strong);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.public-v3-page .reading-world .reading-next-section span {
  color: var(--brass-ink);
  font: 700 11px/1.5 var(--font-sans);
  white-space: nowrap;
}

.public-v3-page .reading-world .reading-next-section strong {
  color: var(--brand-deep);
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.55;
  word-break: keep-all;
}

.public-v3-page .reading-world .reading-next-section::after {
  content: "↓";
  grid-column: 2;
  color: var(--accent);
  font-size: 14px;
}

.public-v3-page .reading-world .reading-chapter__header + .reading-section {
  border-top: 0;
}

.public-v3-page .reading-world .reading-section__heading {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-bottom: 20px;
}

.public-v3-page .reading-world .reading-section__heading .reading-section__number {
  padding-top: 4px;
  color: var(--accent);
  font: 500 14px/1.5 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.public-v3-page .reading-world .reading-section__heading .reading-section__layer {
  margin: 0 0 5px;
  color: var(--brass-ink);
  font: 700 10px/1.5 var(--font-sans);
  letter-spacing: .04em;
}

.public-v3-page .reading-world .reading-document .reading-section__heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(22px, calc(var(--col) * .058), 30px);
  line-height: 1.45;
  word-break: keep-all;
}

.public-v3-page .reading-world .reading-document .reading-prose {
  max-width: 42em;
  font-size: clamp(16.3px, calc(var(--col) * .041), 18px);
  line-height: 1.92;
}

.public-v3-page .reading-world .reading-document .reading-section aside {
  max-width: 42em;
  margin-top: 28px;
  padding: 18px 0 22px;
}

.public-v3-page .reading-world .reading-document .reading-section aside p:last-child {
  margin-bottom: 0;
}

.public-v3-page .reading-world .reading-section__evidence {
  max-width: 42em;
  margin-top: 18px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 11px;
}

.public-v3-page .reading-world .reading-section__evidence > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  color: var(--brass-ink);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.public-v3-page .reading-world .reading-section__evidence > summary::-webkit-details-marker {
  display: none;
}

.public-v3-page .reading-world .reading-section__evidence > summary::after {
  content: "+";
  font-size: 15px;
  font-weight: 400;
}

.public-v3-page .reading-world .reading-section__evidence[open] > summary::after {
  content: "−";
}

.public-v3-page .reading-world .reading-section__evidence > div {
  display: grid;
  gap: 8px;
  padding: 12px 0 3px;
}

.public-v3-page .reading-world .reading-section__evidence p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.75;
}

.public-v3-page .reading-world .reading-section__evidence a {
  justify-self: start;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.public-v3-page .reading-world .reading-evidence-library {
  margin-top: 52px;
  padding-top: 34px;
  border-top: 1px solid var(--night-line);
}

.public-v3-page .reading-world .reading-closing-note {
  margin: 54px 0 0;
  padding: 24px 0;
  color: var(--ink-soft);
  border-block: 1px solid var(--line-strong);
  font-size: 13px;
  line-height: 1.8;
  text-align: center;
}

.public-v3-page .reading-world .reading-mumu-link {
  position: fixed;
  z-index: 35;
  right: max(14px, calc((100vw - min(100vw, var(--app-width, 430px))) / 2 + 14px));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: 60px;
  height: 60px;
  display: grid;
  place-content: center;
  gap: 1px;
  color: #fff8e9;
  border: 1px solid rgba(215, 183, 122, .72);
  border-radius: 50%;
  background: #071c2a;
  box-shadow: 0 8px 24px rgba(5, 16, 25, .24);
  text-align: center;
}

.public-v3-page .reading-page .reading-mumu-link {
  bottom: calc(108px + env(safe-area-inset-bottom, 0px));
}

.public-v3-page .reading-world .reading-mumu-link span {
  color: #d7b77a;
  font-family: var(--font-display);
  font-size: 14px;
}

.public-v3-page .reading-world .reading-mumu-link strong {
  color: inherit;
  font-size: 9px;
  font-weight: 600;
}

.public-v3-page .reading-world .reading-natal__elements {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.public-v3-page .reading-world .reading-natal__element {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 5px;
  align-items: center;
  color: var(--element-ink, var(--ink-soft));
  font-size: 11px;
}

.public-v3-page .reading-world .reading-natal__element[data-emphasis="dominant"] {
  font-weight: 800;
}

.public-v3-page .reading-world .reading-natal__element-bar {
  height: 4px;
  overflow: hidden;
  background: rgba(82, 73, 61, .12);
}

.public-v3-page .reading-world .reading-natal__element-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: currentColor;
}

.public-v3-page .reading-world .reading-natal__element-fill--1 { width: 25%; }
.public-v3-page .reading-world .reading-natal__element-fill--2 { width: 50%; }
.public-v3-page .reading-world .reading-natal__element-fill--3 { width: 75%; }
.public-v3-page .reading-world .reading-natal__element-fill--4 { width: 100%; }

.public-v3-page .reading-world .reading-evidence-library > .section-heading {
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
}

.public-v3-page .reading-world .reading-evidence-library > .section-heading h2 {
  margin: 3px 0 0;
  color: var(--night-ink);
  font-size: 27px;
  line-height: 1.4;
}

.public-v3-page .reading-world .reading-evidence-library > .section-heading > p {
  max-width: 46em;
  margin: 0;
  color: var(--night-ink-soft);
  font-size: 13px;
  line-height: 1.75;
}

@media (prefers-reduced-motion: no-preference) {
  .public-v3-page .reading-world .reading-opening {
    animation: reading-summary-arrives 520ms ease-out both;
  }
}

@media (min-width: 768px) {
  body.public-v3-page.public-page--readings-show,
  body.public-v3-page.public-v3-share-page,
  body.public-v3-page.public-page--compatibility-readings-show,
  body.public-v3-page.public-page--fortunes-index,
  body.public-v3-page.public-page--readings-show::before,
  body.public-v3-page.public-v3-share-page::before,
  body.public-v3-page.public-page--compatibility-readings-show::before,
  body.public-v3-page.public-page--fortunes-index::before {
    --app-width: 960px;
    width: min(100%, 960px);
    max-width: 960px;
  }

  .public-v3-page.public-page--readings-show .page-shell--reading-document,
  .public-v3-page.public-page--compatibility-readings-show .page-shell,
  .public-v3-page.public-page--fortunes-index .page-shell,
  .public-v3-share-page .page-shell--shared-result {
    width: min(calc(100% - 80px), 880px);
    max-width: 880px;
  }

  .public-v3-share-page .share-site-header__inner {
    width: min(calc(100% - 80px), 880px);
    max-width: 880px;
  }

  .public-v3-page .yearly-report-outline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-v3-page .yearly-report-outline li:nth-child(odd) {
    padding-right: 18px;
  }

  .public-v3-page .yearly-report-outline li:nth-child(even) {
    padding-left: 18px;
    border-left: 1px solid var(--line);
  }

  .public-v3-page .reading-world .reading-document .reading-chapter-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 28px;
  }

  .public-v3-page .reading-world .reading-question-index .yearly-report-outline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .public-v3-page .reading-world .reading-question-index .yearly-report-outline li {
    padding-inline: 0;
    border-left: 0;
  }

  .public-v3-page .reading-world .reading-chapter__header {
    padding: 30px 28px 29px;
  }

  .public-v3-page .reading-world .reading-document .reading-section {
    padding-block: 48px 52px;
  }

  .public-v3-page .reading-world .reading-document .reading-section--accordion {
    padding-block: 0;
  }

  .public-v3-page .reading-world .reading-section__heading {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
  }

  .public-v3-page .reading-world .reading-section--accordion > summary {
    grid-template-columns: 44px minmax(0, 1fr) 20px;
  }
}

@media (max-width: 767px) {
  /* The public system sheet loads after application.css, so its generic flex
     heading used to win again on result screens. At phone width that left the
     title and explanation in two cramped columns. Reading panels are editorial
     pages: stack only their headings while leaving compact form/card headings
     elsewhere untouched. */
  .public-v3-page .reading-world .section-heading {
    display: grid;
    align-items: start;
    gap: 9px;
  }

  .public-v3-page .reading-world .section-heading > p {
    max-width: none;
    margin: 0;
  }

  .public-v3-page .yearly-month-highlights ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .public-v3-page .reading-world .reading-section--accordion > .reading-section__content {
    padding-left: 0;
  }

  .public-v3-page .reading-world .reading-key-points ol {
    grid-template-columns: minmax(0, 1fr);
  }

  .public-v3-page .reading-world .reading-key-points a {
    padding: 10px 0;
    border-width: 1px 0 0;
    background: transparent;
  }

  .public-v3-page .reading-world .reading-document .reading-toc__section-link {
    align-items: start;
  }

  .public-v3-page .reading-world .reading-document .reading-toc__title {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    align-items: start;
  }

  .public-v3-page .reading-world .reading-document .reading-toc__title > span {
    display: block;
    width: 100%;
    line-height: 1.55;
  }

  .public-v3-page .reading-world .reading-document .reading-toc__title::after {
    display: none;
  }

  .public-v3-page .reading-world .reading-natal__elements {
    gap: 7px;
  }

  .public-v3-page .reading-world .reading-natal__element {
    grid-template-columns: 1fr auto;
  }

  .public-v3-page .reading-world .reading-natal__element-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .public-v3-page .reading-world .period-pillars > li:only-child {
    min-width: 0;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: max-content max-content minmax(0, 1fr);
    justify-content: stretch;
    justify-items: start;
    gap: 6px 12px;
  }

  .public-v3-page .reading-world .period-pillars > li:only-child :is(em, .period-pillar__relations) {
    min-width: 0;
    max-width: 100%;
    grid-column: 1 / -1;
    text-align: left;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 360px) {
  .public-v3-page .reading-world .reading-question-index .yearly-report-outline {
    grid-template-columns: minmax(0, 1fr);
  }
}

.public-v3-page .compatibility-preview__list li + li {
  border-top: 1px solid var(--line);
  border-left: 0;
}

@keyframes v3-period-reveal {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Analyze had a page-specific legacy mobile inversion. Keep the approved v3
   reading order: context first, then the form, both on the 30px rail. */
.public-v3-page.public-page--pages-analyze .feature-entry__grid {
  width: min(calc(100% - 60px), 370px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.public-v3-page.public-page--pages-analyze .feature-entry__copy {
  order: 0;
  padding-top: 0;
  color: var(--ink);
}

.public-v3-page.public-page--pages-analyze .entry-card {
  order: 0;
  padding: 0;
  color: var(--ink);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.public-v3-page .auth-shell.page-shell {
  width: min(calc(100% - 60px), 370px);
  max-width: 370px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-inline: auto;
}

body.public-v3-page .auth-signup__consent {
  width: 100%;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

body.public-v3-page .auth-signup__checkbox-hit {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}

body.public-v3-page .auth-signup__checkbox-hit input {
  position: static;
  width: 18px;
  height: 18px;
  opacity: 1;
}

body.public-v3-page .auth-signup__consent-copy {
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 19px;
}

/* Social signup has one field; keep its content together at every viewport. */
.public-v3-page .auth-signup--social {
  min-height: 0;
  align-content: start;
  padding-block: 36px 48px;
}

.public-v3-page .auth-signup--social .auth-signup__intro h1 {
  margin-top: 16px;
  font-size: 30px;
  line-height: 1.4;
  letter-spacing: -0.6px;
}

.public-v3-page .auth-signup--social .auth-signup__lede {
  margin-top: 16px;
  font-weight: 400;
  line-height: 1.7;
}

.public-v3-page .auth-signup--social .auth-signup__form {
  margin-top: 36px;
}

.public-v3-page .auth-signup--social .field-group > label {
  margin-bottom: 0;
  color: var(--ink);
  font-size: 14px;
}

.public-v3-page .auth-signup--social .auth-signup__form small {
  margin-top: 2px;
  color: var(--ink-faint);
}

body.public-v3-page .auth-signup--social .auth-signup__consent {
  margin: 28px 0 0;
  padding: 14px 12px 14px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.public-v3-page .auth-signup--social .auth-signup__consent.is-error {
  border-color: #e39187;
}

.public-v3-page .auth-signup--social .auth-signup__consent-copy {
  display: grid;
  gap: 6px;
  padding: 0;
  font-size: 13px;
  line-height: 20px;
}

.public-v3-page .auth-signup__consent-title {
  color: var(--brand);
  font-size: 13px;
  font-weight: 600;
}

.public-v3-page .auth-signup__feedback {
  margin: 12px 0 0;
  color: #e39187;
  font-size: 13px;
  line-height: 1.6;
}

body.public-v3-page .auth-signup--social input.auth-signup__submit {
  margin-top: 24px;
  color: #25292f;
  border-color: rgba(255, 255, 255, 0.36);
  background: #f3f1ed;
  font-size: 15px;
}

body.public-v3-page .auth-signup--social input.auth-signup__submit:hover {
  background: #fffdf8;
}

.public-v3-page .auth-signup--social .auth-signup__links {
  text-align: center;
}

.public-v3-page .auth-signup--social .auth-signup__links a {
  color: var(--ink-soft);
  font-size: 13px;
}

.public-page--external-registrations-new .site-footer {
  display: none;
}

.public-v3-page .auth-context {
  display: grid;
  grid-template-columns: 2px minmax(0, 1fr);
  gap: 12px;
  margin-top: 18px;
  color: #9eb3d0;
}

.public-v3-page .auth-context > span {
  min-height: 40px;
  background: currentColor;
}

.public-v3-page .auth-context p {
  align-self: center;
  margin: 0;
  font-size: 13px;
  line-height: 19px;
}

.public-v3-page .account-access-form {
  display: grid;
  gap: 20px;
  margin-top: 24px;
}

.public-v3-page :is(.auth-return-link, .auth-security) {
  display: block;
  margin-top: 20px;
  font-size: 13px;
  line-height: 19px;
}

.public-v3-page .auth-security {
  color: var(--ink-faint);
}

.public-v3-page :is(.company-story, .contact-primary, .contact-hours, .disclaimer-lead, .disclaimer-grid > article) {
  color: var(--ink);
  border-color: var(--line);
  border-radius: 3px;
  background: transparent;
  box-shadow: none;
}

.public-v3-page :is(.company-story, .contact-primary, .contact-hours, .disclaimer-lead, .disclaimer-grid > article) :is(h2,h3) {
  color: #e8dfd0;
  font-family: var(--font-sans);
}

.public-v3-page :is(.company-story, .contact-primary, .contact-hours, .disclaimer-lead, .disclaimer-grid > article) p {
  color: var(--ink-soft);
}

.public-v3-page :is(.contact-primary, .contact-hours, .disclaimer-grid > article) {
  padding: 16px 0;
  border-width: 0 0 1px;
}

.public-v3-page .contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.public-v3-page .disclaimer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

body.public-v3-page .section-pad:has(> .document-shell) :is(.contact-primary, .contact-hours, .disclaimer-grid article) {
  padding: 16px 0;
  color: var(--ink);
  border-color: var(--line);
  border-radius: 0;
  background: transparent;
}

body.public-v3-page .section-pad:has(> .document-shell) :is(.contact-primary, .contact-hours, .disclaimer-grid article) :is(h2,p) {
  color: inherit;
}

body.public-v3-page .section-pad:has(> .document-shell) :is(.contact-primary, .contact-hours, .disclaimer-grid article) p {
  color: var(--ink-soft);
}

body.public-v3-page .section-pad:has(> .document-shell) :is(.contact-primary__icon, .contact-hours > span) {
  margin-bottom: 12px;
  color: var(--brass-light);
  background: transparent;
}

/* Chat composer: the send action reads as a small ink seal, not a generic disk. */
.public-v3-page .chat-composer,
.public-v3-page .chat-form,
.public-v3-page .inquiry-reply-form {
  position: relative;
  margin-top: 16px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
}

.public-v3-page :is(.chat-composer, .chat-form) textarea {
  padding-right: 62px;
}

.public-v3-page :is(.chat-composer, .chat-form) input[type="submit"],
.public-v3-page :is(.chat-composer, .chat-form) button[type="submit"] {
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  color: #f0e8d8;
  border: 1px solid rgba(199,162,104,.72);
  border-radius: var(--radius-seal);
  background: #111927;
}

/* Footer remains in flow after the designed mobile viewport. */
.public-v3-page .site-footer,
.public-v3-page .share-site-footer {
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
  background: transparent;
}

.public-v3-page .site-footer__grid,
.public-v3-page .site-footer__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

/* Shared-result layout has its own header but uses the same column. */
.public-v3-share-page .share-site-header {
  color: var(--ink);
  border-bottom: 0;
  background: transparent;
}

.public-v3-share-page .share-site-header__inner {
  width: calc(100% - 40px);
  max-width: 390px;
  min-height: 64px;
}

.public-v3-share-page .share-site-header__label {
  color: var(--brass-light);
  font-size: 12px;
}

.public-v3-page .share-manage-card {
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-width: 1px 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.public-v3-page .share-issued-link,
.public-v3-page .share-token-unavailable,
.public-v3-page .share-manage-meta,
.public-v3-page .share-manage-actions {
  width: 100%;
  min-width: 0;
}

.public-v3-page .share-issued-link input {
  min-width: 0;
  font-size: 16px;
}

.public-v3-page .share-copy-status {
  min-height: 17px;
  color: var(--brand-deep);
  font-size: 11px;
}

.public-v3-share-page .page-shell--shared-result {
  width: min(calc(100% - 60px), 370px);
  max-width: 370px;
}

@media (min-width: 768px) {
  .public-v3-share-page .page-shell--shared-result,
  .public-v3-share-page .share-site-header__inner {
    width: min(calc(100% - 80px), 880px);
    max-width: 880px;
  }
}

.public-v3-share-page .shared-result--unavailable {
  min-height: calc(100dvh - 180px);
  display: grid;
  align-items: center;
}

.public-v3-share-page .shared-result-unavailable {
  width: 100%;
  padding: 24px 0;
  text-align: left;
}

.public-v3-share-page .shared-result-unavailable__reasons {
  margin: 18px 0;
  padding: 14px 0 14px 20px;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-width: 1px 0;
  font-size: 12px;
  line-height: 19px;
}

.public-v3-share-page .shared-result-unavailable__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 389px) {
  .public-v3-page .page-shell,
  .public-v3-page .narrow-shell,
  .public-v3-page .page-shell--narrow,
  .public-v3-page .page-shell--reading,
  .public-v3-page .page-shell--reading-document {
    width: calc(100% - 40px);
  }

  .public-v3-page :is(.field-row, .field-row--identity) {
    grid-template-columns: minmax(0, 1fr);
  }

  .public-v3-page .reading-world .reading-document {
    width: calc(100% + 40px);
    margin-inline: -20px;
    padding-inline: 24px;
  }
}

@media (min-width: 431px) {
  body.public-v3-page {
    min-height: 100vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-v3-page *,
  .public-v3-page *::before,
  .public-v3-page *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}
.reading-toc__years {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  padding: 0.65rem 0 0.8rem 2.6rem;
}

.reading-toc__years a {
  color: var(--ink, #27231f);
  font-weight: 650;
  text-underline-offset: 0.2em;
}