/* Shared editorial and interface roles. Layout remains in app.css. */
html { font-size: 100%; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-sans-cn); font-size: var(--text-body); line-height: var(--leading-body); letter-spacing: var(--tracking-cn); }
button, input, select, textarea { font-family: var(--font-sans-cn); }
input, textarea, select { font-size: var(--text-body); line-height: var(--leading-ui); }
h1, h2, h3, h4 { font-family: var(--font-serif-display); font-weight: 400; line-height: var(--leading-heading); letter-spacing: var(--tracking-display); word-break: normal; overflow-wrap: anywhere; text-wrap: balance; }
p, li, dd, label, figcaption { word-break: normal; line-break: strict; overflow-wrap: anywhere; }
p { text-wrap: pretty; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
:is(.footer, .custom-close, .admin-sidebar) :is(a, button, input, summary):focus-visible { outline: var(--focus-ring-inverse); }
.hero h1 { line-height: 1.35; letter-spacing: var(--tracking-display); }
.hero h1 em { color: var(--color-muted); }
:is(.hero-desc, .section-intro, .statement p, .page-hero p, .editorial-copy p, .modal-copy p, .topic-subtitle, .product-subtitle, .topic-prologue p, .topic-essay-section p, .custom-lead-copy p, .custom-memory-copy p, .custom-promise p, .custom-for li span, .custom-how li>span, .yh-intro p, .yh-audience-grid p, .yh-art dd, .yh-section-head p, .yh-steps p, .yh-faq p, .yh-finale p) {
  font-family: var(--font-reading); font-size: var(--text-body); line-height: var(--leading-reading); letter-spacing: var(--tracking-cn); font-style: normal;
}
:is(.hero-desc, .section-intro, .page-hero p, .topic-subtitle, .product-subtitle, .topic-prologue p, .custom-lead-copy p) { color: var(--color-muted); }
:is(.hero-desc, .section-intro) { max-width: 28rem; }
.hero-desc { white-space: normal; }
.statement p { max-width: var(--measure-reading); }
.statement h2 { line-height: 1.65; letter-spacing: var(--tracking-display); max-width: 24em; }
.page-hero p { max-width: var(--measure-reading); }
.topic-prologue { grid-template-columns: minmax(7rem, 10rem) minmax(0, var(--measure-reading)); gap: clamp(1.5rem, 4vw, 3rem); }
.topic-essay { max-width: 52rem; margin-inline: auto; }
.topic-essay-section p { color: var(--color-reading); }
.topic-essay-section p.topic-essay-motto, .topic-prologue p.topic-essay-lede { font-size: var(--text-lead); line-height: var(--leading-reading); }
.topic-essay-section p.topic-essay-pull { font-family: var(--font-serif-display); font-size: var(--text-heading-small); line-height: 1.7; }
.topic-essay-section h2, .topic-essay-chapter h2 { letter-spacing: var(--tracking-display); word-break: normal; line-height: 1.5; }
.topic-studio-hero .topic-intro { padding: 1.5rem max(6%, 1.25rem); }
.topic-studio-hero .topic-intro h1 { letter-spacing: var(--tracking-display); text-indent: 0; word-break: normal; max-width: 22em; }
.topic-studio-hero .topic-subtitle { font-size: var(--text-body); font-family: var(--font-sans-cn); font-style: normal; letter-spacing: 0; line-height: 1.7; max-width: 40rem; color: var(--color-on-dark); }
.eyebrow, .section-kicker, .marquee, .topic-studio-kicker, .topic-prologue-label, .topic-image-count, .hero-index, .image-caption, .footer h4, .feature-card .overlay small {
  font-family: var(--font-latin), var(--font-sans-cn); font-size: var(--text-overline); font-weight: 500; line-height: 1.6; letter-spacing: var(--tracking-label-latin);
}
.eyebrow, .section-kicker, .topic-prologue-label { color: var(--color-muted); }
.hero-index, .image-caption, .feature-card .overlay small { color: var(--color-on-dark); opacity: 1; text-shadow: 0 1px 6px var(--color-ink); }
.feature-card .overlay strong { line-height: 1.45; letter-spacing: var(--tracking-display); }
.hero-index, .image-caption { z-index: 1; }
.nav a, .nav .nav-action, .text-button, .bag { font-size: var(--text-caption); letter-spacing: 0; }
.nav a, .nav .nav-action, .text-button { min-height: var(--control-height); display: inline-flex; align-items: center; }
.brand-cn { line-height: 1.4; letter-spacing: .1em; }
.cta-button, .primary-link.cta-button, .dark-button, .outline-link, .form-submit, .checkout-submit, .mini-button {
  font-family: var(--font-sans-cn); font-size: var(--text-ui); font-weight: 500; line-height: var(--leading-ui); letter-spacing: 0; white-space: normal; text-align: center;
}
.cta-button, .form-submit, .checkout-submit, .dark-button, .outline-link { min-height: var(--control-height); height: auto; padding-block: .75rem; }
.mini-button { min-height: 2.5rem; padding: .5rem .75rem; }
.filter, .ai-background-filters button { min-height: var(--control-height); font-size: var(--text-caption); letter-spacing: 0; }
.art-info { flex-wrap: wrap; align-items: baseline; }
.art-title { font-family: var(--font-serif-display); font-size: var(--text-lead); line-height: 1.5; letter-spacing: .02em; }
.art-sub, .art-price, .art-tag { font-family: var(--font-sans-cn); font-size: var(--text-caption); line-height: 1.6; letter-spacing: 0; }
.art-sub { color: var(--color-muted); }
.art-price, .product-price, .frame-price, .cart-total, .studio-quote, .essay-price { font-variant-numeric: lining-nums tabular-nums; }
.frame-field, .field, #overlay .field, .ai-framing-options .field { font-size: var(--text-caption); color: var(--color-muted); letter-spacing: 0; line-height: var(--leading-ui); }
.frame-field select, .frame-field input, .frame-field textarea, #overlay .field input, #overlay .field textarea, #overlay .field select, .ai-order-layout .field input, .ai-order-layout .field select, .ai-order-layout .field textarea, .ai-order-layout .ai-framing-options select, .ai-order-personal .field input {
  font-family: var(--font-sans-cn); font-size: var(--text-body); line-height: var(--leading-ui); min-height: var(--control-height); letter-spacing: 0; color: var(--color-ink);
}
.field small, #overlay .field small, .ai-order-personal .field small, .checkline, .notice, .dialog-subtitle, .studio-tip, .order-policy-note, .upload-authorization p, .upload-authorization small { font: 400 var(--text-caption)/var(--leading-body) var(--font-sans-cn); letter-spacing: 0; color: var(--color-muted); }
.checkline { gap: .625rem; }
.checkline input { flex: none; width: 1.125rem; height: 1.125rem; margin-top: .2rem; }
.upload-authorization button { font: 500 var(--text-caption)/var(--leading-ui) var(--font-sans-cn); min-height: var(--control-height); }
.error-text, .success-text { font-size: var(--text-caption); line-height: var(--leading-body); }
.error-text { color: var(--color-error-text); }
.success-text { color: var(--color-success-text); }
.policy-copy { max-width: var(--measure-reading); font: 400 var(--text-body)/var(--leading-reading) var(--font-reading); color: var(--color-ink); }
.policy-copy h3 { font-family: var(--font-serif-display); font-size: var(--text-heading-small); line-height: 1.5; margin-block: 1.75em .5em; }
.policy-copy p { margin-block: 0 var(--space-text); }
.ai-order-personal h2, .ai-gallery-heading h2, .ai-order-layout>.studio-book h2 { font: 400 var(--text-heading)/1.5 var(--font-serif-display); letter-spacing: var(--tracking-display); color: var(--color-accent-display); word-break: normal; }
.ai-column-intro, .ai-order-layout .dialog-subtitle { font: 400 var(--text-body)/var(--leading-body) var(--font-reading); color: var(--color-muted); }
.ai-order-personal .studio-choice, .ai-order-layout .studio-choice { font-family: var(--font-sans-cn); font-size: var(--text-ui); line-height: var(--leading-ui); }
.ai-order-layout { grid-template-columns: minmax(0,.9fr) minmax(0,1.2fr) minmax(0,1fr); }
.ai-order-personal, .ai-order-visual, .ai-order-layout>.studio-book { min-width: 0; }
.ai-order-personal { overflow: auto; }
.ai-background-filters { gap: .5rem 1rem; }
.ai-order-visual .studio-scene span { font-size: var(--text-caption)!important; line-height: 1.6!important; }
.ai-right-preview>small, #ai-preview-dimensions, .ai-order-layout #ai-scene-count, .ai-gallery-hint { font: 400 var(--text-caption)/1.6 var(--font-sans-cn); color: var(--color-muted); }
.ai-right-preview { height: 28rem; min-height: 28rem; max-height: none; padding-bottom: 7rem; }
.ai-right-preview #ai-preview-dimensions { bottom: 4.5rem; }
.ai-right-preview>small { bottom: 1rem; }
.essay-count, .essay-fact, .essay-hint, .essay-collect-sep { font-family: var(--font-sans-cn); font-size: var(--text-caption); line-height: 1.6; letter-spacing: 0; color: var(--color-muted); }
.essay-copy p { font-family: var(--font-reading); font-size: var(--text-caption); line-height: var(--leading-body); color: var(--color-muted); }
.essay-copy strong { font-family: var(--font-serif-display); font-size: var(--text-lead); line-height: 1.5; letter-spacing: .02em; }
.essay-meta { flex-wrap: wrap; row-gap: .75rem; }
.essay-actions { max-width: 100%; }
.essay-viewer { user-select: text; -webkit-user-select: text; }
.footer-intro, .footer-col a, .footer-col p, .footer-col button, .footer-bottom { font-family: var(--font-sans-cn); font-size: var(--text-caption); line-height: var(--leading-body); letter-spacing: 0; }
.footer-intro, .footer-col p, .footer-bottom, .footer h4 { color: var(--color-muted-on-dark); }
.footer-col a, .footer-col button { min-height: 2.25rem; padding-block: .25rem; }
.footer-col a, .footer-col button { color: var(--color-on-dark); }
.footer-bottom { flex-wrap: wrap; gap: .75rem 2rem; }
.toast { font-size: var(--text-caption); line-height: var(--leading-body); padding: .875rem 1.25rem; }
.demo-label { font-size: var(--text-overline); letter-spacing: .03em; }
.site-preview-note { padding: .75rem 8.2%; background: var(--original-preview-note-surface); border-bottom: 1px solid var(--original-preview-note-border); color: var(--color-muted); font: 400 var(--text-caption)/var(--leading-body) var(--font-sans-cn); }
.service-state, .service-state p { font-size: var(--text-body); line-height: var(--leading-body); }
@media (max-width: 1100px) {
  .site-header { padding-inline: 4%; gap: 1rem; }
  .brand { min-width: 0; }
  .nav { gap: 1.25rem; }
  .header-actions { gap: .75rem; }
  .ai-order-personal, .ai-order-layout>.studio-book { padding-inline: 1.25rem; }
}
@media (max-width: 960px) and (min-width: 781px) {
  .site-header .demo-label { display: none; }
  .brand-cn { font-size: var(--text-lead); letter-spacing: .04em; }
  .nav { gap: 1rem; }
}
@media (max-width: 900px) {
  .ai-order-layout { grid-template-columns: minmax(0,1fr); }
  .ai-order-personal { position: static; max-height: none; }
  .ai-order-personal, .ai-order-layout>.studio-book { padding: 3rem 6% 2rem; }
  .ai-order-visual { position: relative; height: auto; max-height: none; padding: 2rem 6%; }
  .ai-background-filters { position: static; }
}
@media (max-width: 780px) {
  .site-header { height: auto; min-height: 4.5rem; padding-block: .75rem; flex-wrap: wrap; }
  .main-nav { top: 100%; }
  .header-actions { margin-left: auto; }
  .header-actions .demo-label { display: none; }
  .brand-cn { font-size: var(--text-heading-small); letter-spacing: .06em; }
  .bag { font-size: var(--text-caption); min-height: var(--control-height); padding-inline: .75rem; }
  .hero h1 { font-size: clamp(2.25rem, 8.5vw, 3rem); }
  .hero-desc, .section-intro { max-width: 100%; }
  .hero-meta { margin-top: 2rem; }
  .section h2, .page-hero h1 { font-size: clamp(1.75rem, 7vw, 2.25rem); }
  .topic-intro h1 { font-size: clamp(1.75rem, 7vw, 2.625rem); letter-spacing: var(--tracking-display); }
  .topic-subtitle { font-size: var(--text-body); }
  .topic-prologue { grid-template-columns: minmax(0,1fr); gap: 1rem; }
  .topic-essay { padding-inline: 6%; }
  .topic-studio-hero .topic-intro h1 { font-size: clamp(1.75rem, 7vw, 2.25rem); }
  .topic-studio-hero .topic-subtitle { font-size: var(--text-caption); }
  .statement { padding-inline: 6%; }
  .statement h2 { font-size: var(--text-heading-medium); line-height: 1.7; }
  .section-head { gap: 1.25rem; }
  .marquee { flex-wrap: wrap; white-space: normal; gap: .75rem 1.5rem; }
  .ai-framing-options { grid-template-columns: minmax(0,1fr); }
  .ai-order-personal .studio-choices { grid-template-columns: minmax(0,1fr); }
  .ai-right-preview { max-width: 100%; }
  .essay-meta { display: grid; grid-template-columns: minmax(0,1fr); }
  .essay-actions { align-items: flex-start; text-align: left; }
  .essay-collect-row { flex-wrap: wrap; justify-content: flex-start; }
  .footer-top { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem 1.25rem; }
  .footer-col { min-width: 0; }
  .policy-copy { max-width: 100%; }
}
@media (max-width: 380px) {
  .site-header { gap: .5rem; }
  .brand { gap: .5rem; }
  .brand-cn { font-size: var(--text-lead); }
  .brand-mark { width: 1.75rem; height: 1.75rem; }
  .header-actions { gap: .375rem; }
  .bag { padding-inline: .5rem; }
  .bag span { margin-left: .25rem; }
  .menu-toggle { width: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms!important; transition-duration: .01ms!important; animation-iteration-count: 1!important; }
}

/* Shared section banners: same title scale, content rows and minimum height. */
#history>.page-hero, #gallery>.page-hero, #custom>.page-hero, .admin-live-section>.page-hero {
  box-sizing: border-box;
  min-block-size: var(--page-hero-height);
  padding: var(--page-hero-padding-block) 8.2%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
#history>.page-hero h1, #gallery>.page-hero h1, #custom>.page-hero h1, .admin-live-section>.page-hero h1 {
  font: 400 clamp(2rem,3.4vw,3rem)/var(--leading-heading) var(--font-serif-display);
  letter-spacing: var(--tracking-display);
  margin: .75rem 0 1rem;
}
#history>.page-hero p, #gallery>.page-hero p, #custom>.page-hero p, .admin-live-section>.page-hero .live-area {
  font: 400 var(--text-body)/var(--leading-reading) var(--font-reading);
  letter-spacing: 0;
  color: var(--color-muted);
  max-width: var(--measure-reading);
  min-block-size: 3.7em;
  margin: 0;
}
#history>.page-hero .section-kicker, #gallery>.page-hero .section-kicker, #custom>.page-hero .section-kicker, .admin-live-section>.page-hero .section-kicker {
  font: 500 var(--text-overline)/1.6 var(--font-latin);
  letter-spacing: var(--tracking-label-latin);
  color: var(--color-muted);
  margin: 0;
}
.bag span { min-width: 1.5rem; width: auto; height: 1.5rem; padding-inline: .25rem; }
.topic-essay-closing p, .topic-essay-closing cite { font-style: normal; }
@media(max-width:780px) {
  #history>.page-hero, #gallery>.page-hero, #custom>.page-hero, .admin-live-section>.page-hero {
    min-block-size: var(--page-hero-height-mobile);
    padding: 2.5rem 6%;
  }
}