/* Contact page - the "Contact" screen of the venue web design: copy and a
   tilted index card on the left, a green-headed ledger sheet on the right.
   Flutter source: lib/venue/contact/venue_contact_view.dart. */

.contact{background:
  radial-gradient(ellipse 40% 35% at 20% 30%,rgba(177,58,242,.18),transparent 70%),
  radial-gradient(ellipse 40% 35% at 85% 70%,rgba(0,191,212,.1),transparent 70%),
  var(--ink)}
.contact .cl-crumbs,.contact__inner{max-width:calc(1180px + 2 * var(--gutter))}
.contact__inner{padding-top:72px;padding-bottom:120px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:64px;align-items:start}

/* Intro + index card */
.contact__intro{display:flex;flex-direction:column;align-items:flex-start}
.contact__title{font:400 clamp(40px,4.4vw,56px)/1.08 var(--font-display);color:#fff}
.contact__lead{margin-top:20px;max-width:420px;font:400 16px/1.65 var(--font-body);color:rgba(255,255,255,.72)}
.contact__card{margin-top:38px;width:100%;max-width:400px;padding:24px 26px;border-radius:6px;transform:rotate(-2deg);
  display:flex;flex-direction:column;gap:14px;color:var(--paper-ink);
  background:linear-gradient(180deg,#FBF9F2,#EFEADC);box-shadow:0 2px 0 #D8D2C4,0 22px 40px rgba(0,0,0,.55)}
.contact__brand{display:flex;align-items:center;gap:8px;font:400 20px var(--font-display)}
.contact__brand img{height:22px;width:auto}
.contact__rule{height:1.5px;background:var(--paper-rule)}
.contact__row{display:flex;align-items:center;gap:10px;margin:0}
.contact__row svg,.contact__swatch{width:17px;height:17px;flex:none}
.contact__swatch{border-radius:4px;background:#0E8C7E}
.contact__mail{font:400 12.5px var(--font-mono);color:var(--paper-ink);overflow-wrap:anywhere}
.contact__mail:hover{color:#00A3B4}
.contact__org{font:600 14px var(--font-body)}

/* Ledger form */
.contact__form{display:flex;flex-direction:column;align-items:flex-start;gap:28px;min-width:0}
.ledger{width:100%;border-radius:4px;overflow:hidden;background:#F7F4EA;transform:rotate(.6deg);color:var(--paper-ink);
  box-shadow:0 2px 0 #D8D2C4,0 30px 60px rgba(0,0,0,.55)}
.ledger__head{height:46px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;background:#2F6B4F;box-shadow:inset 0 -2px 0 rgba(0,0,0,.2)}
.ledger__bar{width:110px;height:8px;border-radius:4px;background:rgba(255,255,255,.35)}
.ledger__serial{font:400 14px var(--font-mono);letter-spacing:2px;color:#E8F2EC}
.ledger__holes{height:8px;background:radial-gradient(circle at 4px 4px,#14121F 2.5px,transparent 3px) 0 0/12px 8px repeat-x}
.ledger__body{padding:22px 30px 30px;display:flex;flex-direction:column;gap:22px}
.ledger__field{display:flex;flex-direction:column;gap:6px}
.ledger__label{font:400 12px var(--font-mono);letter-spacing:2px;color:#2F6B4F}
.ledger__input{width:100%;min-width:0;border:0;border-radius:0;outline:0;background:transparent;border-bottom:1.5px solid #9DB8A8;
  padding:4px 2px 8px;font:400 21px var(--font-marker);color:var(--paper-ink);caret-color:var(--paper-ink)}
.ledger__input:focus-visible,.ledger__message:focus-visible{outline:2px solid #2F6B4F;outline-offset:4px;border-radius:2px}
.ledger__message{width:100%;min-height:173px;border:0;outline:0;resize:vertical;padding:0 2px;
  background:repeating-linear-gradient(180deg,transparent 0 33px,#9DB8A8 33px 34.5px);background-attachment:local;
  font:400 19px/34.5px var(--font-marker);color:var(--paper-ink);caret-color:var(--paper-ink)}
.ledger__foot{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ledger__error{font:600 13px var(--font-body);color:#C62828}
.ledger__count{margin-left:auto;flex:none;font:400 12px var(--font-mono);color:#7C8F83}

.contact__send{padding:20px 40px;border-radius:16px;font-size:18px;letter-spacing:1.08px;--k-glow:rgba(204,0,204,.3)}

@media (max-width:899px){
  .contact__inner{padding-top:48px;padding-bottom:96px}
  .ledger__body{padding:20px 22px 26px}
}