/* Compact calls to action use their own narrow parchment, with live ink text. */
.button.scroll-button{
  background:transparent url('./assets/contact-scroll/mini-parchment-scroll.png') center / 100% 150% no-repeat;
  border:0;
  color:#382310;
  min-height:64px;
  padding:18px 34px;
  gap:20px;
  line-height:1.4;
  text-align:center;
  text-shadow:0 1px 0 #fff4d966;
  transition:filter .18s ease;
}
.button.scroll-button:hover{background-color:transparent;color:#241506;filter:brightness(1.07)}
.button.scroll-button:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:5px}
.selection .button.scroll-button{min-height:64px}

/* A flexible parchment scroll with dark ink and sculpted gold curls. */
.scroll-panel{
  position:relative;
  color-scheme:light;
  color:#4b321c;
  background:#f3e3c0;
  background-clip:padding-box;
  border:solid transparent;
  border-width:clamp(78px,9vw,132px) clamp(52px,9vw,132px);
  border-image-source:url('./assets/contact-scroll/golden-parchment-scroll.png');
  border-image-slice:260 280 260 280 fill;
  border-image-repeat:stretch;
  isolation:isolate;
}
.scroll-panel h1,.scroll-panel h2{color:#382310}
.scroll-panel em{color:#6e400e}
.scroll-panel .eyebrow{color:#684515}
.scroll-panel .email-link{color:#6e400e}
.scroll-panel .email-link:hover{color:#382310}
.scroll-panel :focus-visible{outline:2px solid #674013;outline-offset:5px}
.scroll-panel ::selection{background:#674013;color:#fff4db}
.service.contact-scroll{display:block;padding:62px 0 38px;border-bottom:0;scroll-margin-top:18px}
.service.contact-scroll>.scroll-panel{max-width:1120px;margin-inline:auto}
.contact-invitation .scroll-content{text-align:center;max-width:660px;margin-inline:auto;padding:10px 20px 14px}
.contact-invitation .scroll-star{display:block;color:#80551b;font:38px/1 Georgia,serif;margin:0 0 20px;text-shadow:0 1px 0 #fff4d9}
.contact-invitation .eyebrow{color:#684515;margin:0 0 20px}
.service.contact-scroll h2{font-size:clamp(43px,5.5vw,74px);line-height:1.06;text-wrap:balance;margin:0 0 24px}
.service.contact-scroll .scroll-message{font-size:16px;line-height:1.8;color:#4b321c;max-width:440px;margin:0 auto 27px;text-wrap:balance}
.scroll-panel .button{background:linear-gradient(115deg,#f6d894,#dba84f 70%,#ebc77f);border-color:#805b2d;box-shadow:0 2px 12px #77501e26;color:#251705;min-height:50px;padding:13px 23px}
.scroll-panel .button:hover{background:#f2ce89;color:#251705;box-shadow:0 2px 16px #77501e33}
.contact-invitation .email-link{width:fit-content;max-width:100%;margin:13px auto 0;color:#6e400e;text-decoration:none;overflow-wrap:anywhere}
.contact-invitation .email-link:hover{text-decoration:underline}
.contact-scroll>.return-link{width:fit-content;margin:10px auto 0}
.scroll-contact-page.contact-layout{display:block;max-width:1340px;padding-block:35px 55px;min-height:0}
.scroll-letter .scroll-letter-content{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,65px);align-items:start;padding:18px 8px}
.scroll-letter .contact-intro h1{font-size:clamp(44px,4.9vw,68px);line-height:1.06}
.scroll-letter .contact-intro .eyebrow{font-size:10px;line-height:1.8;letter-spacing:.14em;max-width:230px;margin-bottom:24px}
.scroll-letter .contact-intro .lede{font-size:16px;color:#4b321c}
.scroll-letter .contact-intro .orbit-mark{font-size:68px;color:#80551b;opacity:.65;text-shadow:0 1px 0 #fff4d9}
.scroll-letter .form-panel{max-width:none;min-width:0}
.scroll-letter .form-note,.scroll-letter .field-hint,.scroll-letter .fine-print{color:#5d452c}
.scroll-letter .fine-print a{color:#6e400e}
.scroll-letter .fine-print a:hover{color:#382310}
.scroll-letter .field label{color:#382310}
.scroll-letter input,.scroll-letter textarea{border-color:#805b2d;background:#fcf4e1;box-shadow:inset 0 1px 5px #704f191a;border-radius:3px;color:#382310;caret-color:#382310}
.scroll-letter input:focus,.scroll-letter textarea:focus{border-color:#674013;outline:2px solid #674013;outline-offset:3px}
.scroll-letter input[aria-invalid=true],.scroll-letter textarea[aria-invalid=true]{border-color:#892619}
.scroll-letter .field-error{color:#892619}
.scroll-letter .notice{background:#fff4da;border-color:#805b2d}
.scroll-letter .notice p{color:#4b321c}
.scroll-letter .notice a{color:#6e400e}
.scroll-letter .notice a:hover{color:#382310}
.scroll-letter .success{border-color:#637039}
.scroll-letter .error-summary{background:#fff0dc;border-color:#892619;color:#892619}
.scroll-letter .error-summary p,.scroll-letter .error-summary a{color:#892619}
.scroll-letter .error-summary a:hover{color:#61190f}
@media(max-width:1000px){
  .scroll-contact-page.wrap{width:calc(100% - 32px)}
  .scroll-contact-page .scroll-panel{border-width:80px 65px}
  .scroll-letter .scroll-letter-content{gap:28px;padding-inline:0}
  .scroll-letter .contact-intro h1{font-size:46px}
}
@media(max-width:760px){
  .service.contact-scroll{padding-top:35px}
  .scroll-panel{border-width:64px 40px}
  .contact-invitation .scroll-content{padding:12px 0 15px}
  .contact-invitation .scroll-star{font-size:29px;margin-bottom:17px}
  .contact-invitation .eyebrow{font-size:9px;letter-spacing:.13em;margin-bottom:18px}
  .service.contact-scroll h2{font-size:clamp(35px,8.7vw,52px);margin-bottom:21px}
  .service.contact-scroll .scroll-message{font-size:14px;line-height:1.8;margin-bottom:23px}
  .contact-invitation .button{font-size:12px;gap:12px;padding:12px 14px;width:100%;justify-content:center}
  .contact-invitation .email-link{font-size:12px;padding-block:12px}
  .scroll-contact-page.contact-layout{padding-block:20px 35px;width:calc(100% - 16px)}
  .scroll-contact-page .scroll-panel{border-width:66px 33px}
  .scroll-letter .scroll-letter-content{grid-template-columns:1fr;gap:30px;padding:10px 3px}
  .scroll-letter .contact-intro .eyebrow{max-width:none;margin-bottom:20px}
  .scroll-letter .contact-intro h1{font-size:clamp(44px,10vw,64px)}
  .scroll-letter .contact-intro .orbit-mark{display:none}
  .scroll-letter .contact-intro .fine-print{margin-bottom:0}
  .scroll-letter .button{width:100%;padding-inline:15px;gap:15px}
  .scroll-letter .field label{font-size:13px}
  .scroll-letter .notice{padding:18px}
}
@media(max-width:360px){
  .scroll-panel{border-inline-width:31px}
  .contact-invitation .email-link{font-size:11px}
  .scroll-contact-page .scroll-panel{border-inline-width:26px}
}