/* Hallmark · shape: Photo-led invitation close · genre: editorial · theme: existing Eden brand · scope: contact/footer · v2.0.0 */
/* Hallmark · critique: a real space and original gold mark give the closing visual weight; direct phone, address and QR remain the only actions. Live desktop/mobile QA pending. */
/* Scoped to the homepage contact chapter. Other sections and the case route are unchanged. */
.studio.contact-closing { background: var(--color-paper-2); color: var(--color-ink); padding-block: var(--space-2xl) var(--space-xl); }
.contact-composition { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: var(--gap-columns); row-gap: var(--space-lg); align-items: start; }
.contact-intro { grid-column: 2; grid-row: 1; padding-top: var(--space-xs); }
.contact-closing h2 br { display: none; }
.contact-closing h2 { font-size: clamp(34px, 3.1vw, 46px); line-height: 1.35; }
.contact-intro > p { margin-top: var(--space-sm); font-size: 16px; line-height: 1.85; color: var(--color-muted); }
.contact-content { grid-column: 2; grid-row: 2; min-width: 0; }
.contact-closing .contact-row { padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.contact-closing .contact-row + .contact-row { margin-top: var(--space-md); }
.contact-closing .contact-row h3 { margin-bottom: var(--space-sm); font-size: 14px; line-height: 1.6; color: var(--color-muted); }
.contact-closing .phone { font-family: var(--font-body); font-size: clamp(32px, 3vw, 44px); font-weight: 400; line-height: 1.35; letter-spacing: normal; white-space: nowrap; text-decoration-color: var(--color-rule-2); text-underline-offset: 6px; }
.contact-closing .phone:hover { color: var(--color-accent); text-decoration-color: currentColor; }
.contact-phone-line { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); }
.contact-phone-note { margin-top: var(--space-xs); font-size: 13px; line-height: 1.6; color: var(--color-muted); }
.contact-closing .copy-link { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 0 var(--space-md); margin: 0; border: 1px solid var(--color-rule-2); background: var(--color-clear); color: var(--color-ink-2); font-size: 13px; line-height: 1.5; text-decoration: none; cursor: pointer; }
.contact-closing .copy-link:hover { border-color: var(--color-accent); background: var(--color-paper); color: var(--color-ink); }
.contact-row-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-xs); }
.contact-closing .contact-row-heading h3 { margin: 0; }
.contact-closing address { font-size: 18px; line-height: 1.8; font-style: normal; color: var(--color-ink); }
.contact-closing .address-note { margin-top: var(--space-xs); font-size: 13px; line-height: 1.7; color: var(--color-muted); }
.contact-closing .copy-status { color: var(--color-ink-2); font-size: 13px; line-height: 1.7; margin: 0; min-height: 0; }
.contact-closing .copy-status:not(:empty) { margin-top: var(--space-sm); }
.contact-closing .wechat-contact { display: grid; grid-template-columns: 176px minmax(0, 1fr); align-items: center; gap: var(--space-lg); max-width: none; margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); justify-self: stretch; }
.contact-closing .qr-button { width: 176px; max-width: 100%; border: 1px solid var(--color-rule); background: var(--color-paper); }
.contact-closing .qr-button img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.contact-closing .qr-button span { font-size: 13px; padding-inline: var(--space-xs); }
.contact-wechat-copy { min-width: 0; }
.contact-wechat-copy h3 { font-family: var(--font-body); font-size: 18px; line-height: 1.5; letter-spacing: normal; }
.contact-closing .wechat-contact p { font-size: 14px; line-height: 1.8; color: var(--color-muted); margin-top: var(--space-sm); max-width: none; }
.contact-closing .qr-save { margin-top: var(--space-xs); color: var(--color-ink-2); font-size: 13px; text-underline-offset: 4px; }
.contact-closing .qr-save:hover { color: var(--color-accent); }
.contact-place { grid-column: 1; grid-row: 1 / 3; display: grid; grid-template-rows: minmax(320px, 1fr) auto; align-self: stretch; min-width: 0; margin: 0; background: var(--color-field); }
.contact-space-image { display: block; position: relative; width: 100%; height: 100%; min-height: 0; border: 0; padding: 0; background: var(--color-paper-3); overflow: clip; cursor: zoom-in; }
.contact-space-image > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0% center; }
.contact-space-image > span { position: absolute; inset: auto auto var(--space-lg) var(--space-lg); max-width: calc(100% - 48px); padding: var(--space-xs) var(--space-sm); font-size: 12px; line-height: 1.5; color: var(--color-ink); background: var(--color-paper); }
.contact-space-image:hover { outline: 2px solid var(--color-gold); outline-offset: -2px; }
.contact-signature { display: flex; align-items: center; gap: var(--space-lg); padding: var(--space-lg) var(--space-xl); color: var(--color-paper); border-top: 2px solid var(--color-gold-muted); }
.contact-signature .company-logo { width: auto; height: 112px; flex: 0 0 auto; object-fit: contain; }
.contact-brand-name { font-family: var(--font-display); font-size: 26px; line-height: 1.5; }
.contact-brand-location { margin-top: var(--space-sm); font-size: 12px; color: var(--color-dark-muted); }
.contact-closing :focus-visible { outline-color: var(--color-focus); }
.contact-closing .contact-space-image:focus-visible { outline-color: var(--color-gold); outline-offset: -6px; }
.contact-closing #contact-phone:target .phone { text-decoration-color: var(--color-accent); }
.site-footer.contact-footer { background: var(--color-paper-2); color: var(--color-ink); }
.contact-footer .footer-layout { align-items: center; padding-block: var(--space-lg); border-top-color: var(--color-rule); gap: var(--space-lg); }
.contact-footer-end { display: flex; align-items: center; gap: var(--space-xl); }
.contact-footer .footer-layout span { color: var(--color-muted); }
.contact-footer :focus-visible { outline-color: var(--color-focus); }
@media (max-width: 70rem) {
  .contact-composition { column-gap: var(--space-xl); }
  .contact-closing .wechat-contact { grid-template-columns: 152px minmax(0, 1fr); gap: var(--space-md); }
  .contact-closing .qr-button { width: 152px; }
  .contact-signature { padding-inline: var(--space-lg); }
  .contact-brand-name { font-size: 23px; }
}
@media (max-width: 60rem) {
  .contact-composition { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .contact-intro, .contact-content, .contact-place { grid-column: 1; grid-row: auto; }
  .contact-intro { padding-top: 0; }
  .contact-intro > p br { display: none; }
  .contact-closing .wechat-contact { grid-template-columns: 176px minmax(0, 1fr); gap: var(--space-lg); }
  .contact-closing .qr-button { width: 176px; }
  .contact-place { grid-template-rows: 300px auto; margin-top: var(--space-md); }
  .contact-space-image > img { object-position: center 58%; }
  .contact-signature { padding-block: var(--space-lg); }
  .contact-signature .company-logo { height: 96px; }
}
@media (max-width: 44rem) {
  .studio.contact-closing { padding-block: var(--space-xl) var(--space-lg); }
  .contact-closing h2 { font-size: 34px; }
  .contact-closing .phone { font-size: 34px; }
  .contact-closing address { font-size: 16px; }
  .contact-closing .wechat-contact { grid-template-columns: 152px minmax(0, 1fr); gap: var(--space-md); }
  .contact-closing .qr-button { width: 152px; }
  .contact-wechat-copy h3 { font-size: 17px; }
  .contact-place { grid-template-rows: 240px auto; }
  .contact-space-image > span { left: var(--space-md); bottom: var(--space-md); }
  .contact-signature { gap: var(--space-lg); }
  .contact-signature .company-logo { height: 88px; }
  .contact-brand-name { font-size: 22px; }
  .contact-footer .footer-layout { flex-direction: column; align-items: stretch; gap: var(--space-xs); font-size: 12px; }
  .contact-footer-end { justify-content: space-between; gap: var(--space-lg); }
}
@media (max-width: 23rem) {
  .contact-closing h2 br { display: block; }
  .contact-closing .wechat-contact { grid-template-columns: 128px minmax(0, 1fr); }
  .contact-closing .qr-button { width: 128px; }
  .contact-closing .phone { font-size: 32px; }
  .contact-wechat-copy h3 { font-size: 16px; }
  .contact-closing .wechat-contact p { font-size: 13px; }
  .contact-signature { padding-inline: var(--space-md); gap: var(--space-md); }
}