/* v37: shared presentation for the public experience pages. */
.experience-page {
  --experience-accent: #d9bf76;
  --experience-rgb: 217, 191, 118;
  --experience-muted: #bbb4a4;
}
.experience-page[data-experience="face"] { --experience-accent: #aac8d7; --experience-rgb: 170, 200, 215; }
.experience-page[data-experience="directions"] { --experience-accent: #a1c9b3; --experience-rgb: 161, 201, 179; }
.experience-page[data-experience="naming"] { --experience-accent: #d9b5a6; --experience-rgb: 217, 181, 166; }
.experience-page[data-experience="dates"] { --experience-accent: #ddc28d; --experience-rgb: 221, 194, 141; }
.experience-page[data-experience="compatibility"] { --experience-accent: #d4abb6; --experience-rgb: 212, 171, 182; }
.experience-page[data-experience="tarot"] { --experience-accent: #c6b2df; --experience-rgb: 198, 178, 223; }
.experience-page[data-experience="blessing"] { --experience-accent: #e2b77b; --experience-rgb: 226, 183, 123; }
.experience-page:not(.ritual-v37) .page-hero {
  padding: 2.25rem 0 1.75rem;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--experience-rgb), .08), transparent 75%);
  border-bottom: 1px solid rgba(var(--experience-rgb), .13);
}
.experience-page .experience-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.15rem;
  max-width: 760px;
  text-align: left;
}
.experience-page .experience-mark {
  width: 76px; height: 76px; flex: 0 0 76px;
  display: grid; place-items: center; color: var(--experience-accent);
  border: 1px solid rgba(var(--experience-rgb), .25);
  border-radius: 50%; background: rgba(var(--experience-rgb), .035);
}
.experience-mark svg { width: 52px; height: 52px; fill: none; stroke: currentColor; stroke-width: 1.25; }
.experience-page .experience-kicker { margin: 0 0 .4rem; color: var(--experience-accent); letter-spacing: .15em; font-size: .7rem; }
.experience-page .experience-heading h1 { margin: 0 0 .45rem; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.3; }
.experience-page .experience-heading p:not(.experience-kicker) { margin: 0; max-width: 34rem; color: var(--experience-muted); font-size: .94rem; line-height: 1.6; }
.experience-page main .form-panel { border-top-color: rgba(var(--experience-rgb), .45); }
.experience-page main .form-panel input:not([type="radio"]):not([type="checkbox"]),
.experience-page main .form-panel select, .experience-page main .form-panel textarea { font-size: 16px; min-height: 46px; }
.experience-page main .form-hint { color: var(--experience-muted); font-size: .84rem; line-height: 1.65; }
.experience-page main .form-group > label { color: #d9d1bf; }
.experience-page main .btn:not(.btn-sm) { min-height: 46px; }
.experience-page .xj-profile-banner {
  display: block; padding: 0 0 .8rem; margin: 0 0 1rem;
  border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  background: transparent; font-size: .84rem; line-height: 1.65;
  color: var(--experience-muted);
}
.experience-page .xj-profile-banner a { display: inline-block; padding-block: .4rem; min-height: 36px; }
.experience-page .xj-profile-banner .profile-session-only { display: flex; width: fit-content; min-height: 44px; margin: .3rem 0 0; }
.experience-page .bazi-panel { margin-top: 1.3rem; }
.experience-page .bazi-name-reminder { margin: .45rem 0 .15rem; color: var(--cream-muted); font-size: .84rem; line-height: 1.6; }
.experience-page .bazi-name-field .bazi-name-feedback:empty { min-height: 0; margin: 0; }
.experience-page .bazi-name-field .bazi-name-feedback { margin-top: .25rem; }
.experience-page .bazi-submit-help p { font-size: .84rem; }
.experience-page .bz-geo-info { font-size: .83rem; line-height: 1.6; }
.experience-page .xj-form-details { border: 0; margin: .25rem 0 0; }
.experience-page .xj-form-details > summary {
  min-height: 44px; padding: .65rem 0; color: var(--experience-accent);
  cursor: pointer; font-size: .83rem; line-height: 1.5; list-style-position: inside;
}
.experience-page .xj-form-details > summary::marker { font-size: .7rem; }
.experience-page .xj-form-details > summary:focus-visible,
.experience-page .experience-footer a:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; border-radius: 3px; }
.experience-page .xj-form-details > p { padding: 0 0 .65rem; margin: 0; font-size: .84rem; line-height: 1.7; color: var(--experience-muted); }
.experience-page #bz-method-details { margin-top: 1rem; border-top: 1px solid var(--border); }
.experience-page #bz-method-details > summary { text-align: center; }
.experience-page #bz-method-details > p { padding-inline: .35rem; }
.experience-footer { margin-top: 3rem; padding: 2rem 0 1.25rem; border-top: 1px solid var(--border); background: rgba(0,0,0,.15); text-align: left; }
.experience-footer .experience-footer-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 2rem; align-items: start; }
.experience-footer .experience-footer-brand { color: var(--gold-light); font-family: var(--font-serif); font-size: 1.12rem; margin: 0 0 .4rem; }
.experience-footer p { color: #b1aa9b; font-size: .84rem; line-height: 1.7; max-width: 22rem; margin: 0; }
.experience-footer nav { display: flex; flex-direction: column; align-items: flex-start; }
.experience-footer nav strong { color: #d9d1bf; font-size: .8rem; font-weight: 500; padding: .3rem 0; }
.experience-footer a { display: inline-flex; align-items: center; min-height: 44px; color: #bbb4a4; font-size: .84rem; }
.experience-footer a:hover { color: var(--gold-light); }
.experience-footer .experience-footer-bottom { display: flex; gap: .5rem 1rem; justify-content: space-between; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--border); margin-top: 1.25rem; padding-top: .6rem; color: #a7a092; font-size: .78rem; }
.experience-page :is(input,select,textarea,button,a,summary) { -webkit-tap-highlight-color: rgba(var(--experience-rgb), .15); }
/* Full English labels need more room than the compact Chinese navigation. */
.experience-page .header-inner > .logo { flex-shrink: 0; }
.experience-page .header-tools { min-width: 0; flex-shrink: 1; }
.experience-page .header-tools .nav-auth-btn { min-width: 44px; flex-shrink: 1; }
.experience-page .header-tools .xj-weather-chip { flex-shrink: 0; }
@media (min-width: 1400px) {
  .experience-page .en-header .header-inner { max-width: 1480px; width: calc(100% - 40px); }
  .experience-page .en-header .logo, .experience-page .en-nav a { white-space: nowrap; flex-shrink: 0; }
}
@media (max-width: 1399px) {
  .experience-page .en-header .nav-toggle { display: inline-flex; }
  .experience-page .en-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(10, 8, 6, .97); border-bottom: 1px solid var(--border);
    flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    padding: .55rem .7rem .85rem; gap: .1rem;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    max-height: min(75vh, calc(100dvh - 4.5rem)); overflow-y: auto;
    -webkit-overflow-scrolling: touch; z-index: 95; white-space: normal;
  }
  .experience-page .en-nav.open { display: flex; }
  .experience-page .en-nav a { display: flex; align-items: center; min-height: 44px; padding: .65rem .8rem; font-size: .95rem; white-space: normal; }
  .experience-page .en-nav .lang { margin-left: 0; align-self: flex-start; margin-top: .35rem; }
}
@media (max-width: 359px) {
  .experience-page .header-inner { gap: .4rem; }
  .experience-page .header-tools { gap: .25rem; }
  .experience-page .en-header .logo { font-size: 1rem; gap: .4rem; }
  .experience-page .en-header .logo-mark { width: 30px; height: 30px; flex-shrink: 0; }
  .experience-page .en-header .header-tools .nav-auth-btn { max-width: 84px; }
  .experience-page .en-header .xj-weather-chip { padding-inline: .35rem; gap: 0; }
  .experience-page .en-header .xj-weather-chip .xj-w-icon { display: none; }
}
@media (max-width: 600px) {
  .experience-page:not(.ritual-v37) .page-hero { padding: 1.4rem 0 1.1rem; }
  .experience-page .experience-heading { gap: .8rem; justify-content: flex-start; }
  .experience-page .experience-mark { width: 54px; height: 54px; flex-basis: 54px; }
  .experience-mark svg { width: 39px; height: 39px; }
  .experience-page .experience-kicker { font-size: .63rem; letter-spacing: .1em; margin-bottom: .25rem; }
  .experience-page .experience-heading h1 { font-size: 1.5rem; letter-spacing: .025em; }
  .experience-page .experience-heading p:not(.experience-kicker) { font-size: .86rem; }
  .experience-page .bazi-panel { margin-top: 1rem; padding: 1rem; }
  .experience-page .bazi-panel .form-group { margin-bottom: 1rem; }
  .experience-page .bazi-panel .form-row { gap: .7rem; }
  .experience-page .geo-select-head { margin-bottom: .6rem; }
  .experience-footer { margin-top: 2rem; padding-top: 1.6rem; }
  .experience-footer .experience-footer-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .experience-footer .experience-footer-intro { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .experience-page { scroll-behavior: auto; }
}