/* Reused previous SSGD Contact, scoped to its semantic story state. */
@font-face { font-family: 'Playfair Display'; src: url('/fonts/playfair-display-regular.woff2') format('woff2'); font-weight: 400; font-display: block; }
.contact-view {
  position: absolute; inset: max(76px, 6vw) 0 max(88px, calc(env(safe-area-inset-bottom, 0px) + 72px));
  z-index: 3; display: grid; padding: 0 max(36px, 6vw);
  place-items: safe center;
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; color-scheme: dark;
}
.contact-view__content { width: min(560px, 88vw); max-width: 100%; color: #fff; }
.contact-view h2 {
  margin: 0 0 clamp(2rem, 5vh, 4rem);
  font-family: 'Playfair Display', Didot, 'Bodoni 72', serif;
  font-size: clamp(3rem, 6vw, 6.5rem); font-weight: 400; line-height: .9; letter-spacing: -.035em;
}
.contact-form { display: grid; gap: 1.5rem; }
.contact-form label {
  display: grid; gap: .35rem; color: rgba(255,255,255,.72);
  font-family: 'Playfair Display', Didot, 'Bodoni 72', serif;
  font-size: 1rem; letter-spacing: -.02em; text-transform: lowercase;
}
.contact-form input, .contact-form textarea {
  width: 100%; min-width: 0; padding: .35rem 0 .6rem;
  border: 0; border-bottom: 1px solid rgba(255,255,255,.42); border-radius: 0;
  color: #fff; background: transparent;
  font: 400 1.15rem/1.35 'Playfair Display', Didot, 'Bodoni 72', serif; resize: none;
}
.contact-form button, .contact-view__return {
  width: max-content; min-height: 44px; padding: 0; border: 0; color: #fff; background: transparent;
  font: 400 1.1rem/1 'Playfair Display', Didot, 'Bodoni 72', serif; letter-spacing: -.02em; cursor: pointer;
}
.contact-form button { margin-top: .25rem; color: #ff8a26; }
.contact-view__return { margin-top: 1rem; color: rgba(255,255,255,.62); }
.contact-status { max-width: 100%; color: rgba(255,255,255,.72); font: 14px/1.4 'Playfair Display', serif; }
.contact-status:empty { display: none; }
.contact-view :is(button,input,textarea):focus-visible { outline: 1px solid #ff8a26; outline-offset: 4px; }
.contact-view:focus { outline: none; }
/* A descendant pan-y cannot override the story shell's touch-action:none. */
html:has(body[data-scene='contact']), body[data-scene='contact'] { touch-action: pan-y; }
@media (orientation: portrait) and (max-width: 700px) {
  .contact-view { top: max(86px, calc(env(safe-area-inset-top, 0px) + 62px)); padding: 0 7vw; }
  .contact-view h2 { font-size: clamp(3.2rem,16vw,4.8rem); }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  .contact-view { top: max(70px, env(safe-area-inset-top, 0px)); bottom: max(80px, calc(env(safe-area-inset-bottom, 0px) + 64px)); display: block; padding: 0 max(22px, calc(env(safe-area-inset-right, 0px) + 16px)) 0 max(22px, calc(env(safe-area-inset-left, 0px) + 16px)); }
  .contact-view__content { width: min(720px,100%); margin: 0 auto; padding: 4px 0; }
  .contact-view h2 { margin-bottom: clamp(.35rem,2.5vh,.65rem); font-size: clamp(2.15rem,11vh,3.35rem); }
  .contact-form { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(.3rem,1.7vh,.55rem) clamp(1rem,4vw,2rem); }
  .contact-form label:last-of-type, .contact-form button { grid-column: 1 / -1; }
  .contact-form label { gap: .1rem; font-size: .82rem; }
  .contact-form input, .contact-form textarea { padding: .15rem 0 .3rem; font-size: 1rem; line-height: 1.15; }
  .contact-form textarea { min-height: 2.6rem; max-height: 3.2rem; }
  .contact-form button, .contact-view__return { margin-top: 0; font-size: 1rem; }
}