/* Form addition only: existing contact composition stays unchanged. */
.contact-form-section{max-width:680px;padding:32px 0 48px;border-top:1px solid var(--line)}
.contact-form-section h2{font:normal var(--row-title)/1.2 Georgia,serif;margin:0 0 18px}
#contact-status{color:var(--ink);line-height:1.6;max-width:58ch}
#contact-hint{font-size:14px;line-height:1.6;color:var(--muted)}
#contact-form fieldset{border:0;padding:0;margin:20px 0 0;min-width:0;display:grid;gap:10px}
#contact-form label{font-size:16px;margin-top:10px}
#contact-form input,#contact-form textarea{box-sizing:border-box;width:100%;min-height:44px;border:1px solid var(--brown);border-radius:0;background:var(--paper);color:var(--ink);padding:12px;font:16px/1.5 Arial,Helvetica,sans-serif}
#contact-form textarea{resize:vertical}
#contact-form button{justify-self:start;min-height:48px;padding:12px 22px;border:1px solid var(--ink);background:var(--olive);color:var(--ink);font:18px/1.3 Georgia,serif;cursor:pointer;margin-top:12px}
#contact-form fieldset:disabled input,#contact-form fieldset:disabled textarea{border-color:var(--line)}
#contact-form button:disabled,#contact-form fieldset:disabled button{cursor:not-allowed;background:var(--sand);color:var(--muted)}
#contact-form :focus-visible,#contact-status:focus-visible{outline:2px solid var(--rust);outline-offset:4px}
.contact-honeypot,.contact-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Kontakt: existing editorial composition, two gallery/story doors and the light-blue letter paper.
   The paper explains the unavailable state; no messaging channel is advertised. */
.contact{display:grid;grid-template-columns:1.3fr 1fr;gap:70px;align-items:center;padding:var(--page-top) 0 48px}
.contact-copy{min-width:0}
.contact h1{font-size:var(--title-inner)}
.contact-welcome{font:clamp(21px,1.8vw,25px)/1.5 Georgia,'Times New Roman',serif;color:var(--ink);max-width:32ch;text-wrap:pretty;margin-bottom:32px}
.contact-topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;border-top:1px solid var(--line);padding-top:22px;max-width:580px}
.contact-topic{display:flex;flex-direction:column;gap:8px;min-width:0}
.contact-topic .eyebrow{margin:0}
.contact-topic-title{position:relative;width:fit-content;margin:0;padding-bottom:9px;font:normal var(--row-title)/1.15 Georgia,serif;letter-spacing:-1px;color:var(--ink)}
.contact-topic-title::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;border-bottom:2px solid var(--rust);border-radius:0 0 48% 22%/0 0 6px 4px;transform:rotate(-1.5deg);transform-origin:left}
.contact-topic+.contact-topic .contact-topic-title::after{transform:rotate(1deg);border-radius:0 0 22% 48%/0 0 4px 6px}
.contact-topic-text{margin:4px 0 0;font-size:14px;line-height:1.6;color:var(--muted)}
a.contact-topic:hover .contact-topic-text{color:var(--muted)}
/* The letter paper. */
.contact-paper{transform:rotate(2deg);min-height:400px;max-width:430px;width:100%;justify-self:end;gap:10px}
.contact-stamp{position:absolute;top:22px;right:24px;display:grid;place-items:center;width:52px;height:60px;border:1.5px dashed var(--rust);border-radius:3px;transform:rotate(6deg);color:var(--rust)}
.contact-stamp svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.contact-paper .contact-hello{margin:22px 0 -4px;font:italic 30px/1.2 Georgia,serif;color:var(--ink);max-width:none}
.contact-lines{display:block;width:100%;max-width:320px;height:auto;fill:none;overflow:visible}
.contact-rule{fill:none;stroke:var(--brown);stroke-width:1;opacity:.45;stroke-linecap:round}
.contact-write{fill:none;stroke:var(--rust);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.contact-reach{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.contact-paper p.contact-soon,.contact-paper p.contact-also{margin:0;max-width:none}
.contact-soon{display:inline-block;width:fit-content;font:italic 20px/1.4 Georgia,serif;color:var(--ink);padding-bottom:6px;border-bottom:2px solid var(--rust);border-radius:0 0 48% 22%}
.contact-paper .contact-also{font:15px/1.5 Arial,Helvetica,sans-serif;color:var(--brown)}
.contact-insta,.contact-paper .contact-mail{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:italic 20px/1.3 Georgia,serif;color:var(--ink);-webkit-tap-highlight-color:transparent}
.contact-insta span,.contact-paper .contact-mail span{font-style:normal;font-size:16px;color:var(--rust)}
.contact-paper .contact-mail{position:relative;width:fit-content;font-size:clamp(20px,2vw,25px);overflow-wrap:anywhere;padding-bottom:6px}
.contact-paper .contact-mail::after{content:'';position:absolute;left:0;right:22px;bottom:4px;border-bottom:2px solid var(--rust);border-radius:0 0 48% 22%;transform:rotate(-1deg)}
.contact-insta:hover,.contact-insta:active,.contact-paper .contact-mail:hover,.contact-paper .contact-mail:active{color:var(--rust)}
.contact-paper .paper-bottom{margin-top:12px}
/* Motion: with a mouse the paper lifts a little and the scribble writes itself again. Off for reduced motion.
   (The scribble is drawn statically, so screenshots and slow devices always show it.) */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .contact-write{stroke-dasharray:1;stroke-dashoffset:0}
  .contact-paper:hover .contact-write{animation:contact-write 900ms ease-out}
  @keyframes contact-write{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  .contact-paper{transition:transform 220ms ease,box-shadow 220ms ease}
  .contact-paper:hover{transform:translateY(-3px) rotate(.8deg);box-shadow:10px 14px 0 var(--sand)}
  .contact-insta span,.contact-paper .contact-mail span{transition:transform 200ms ease}
  .contact-insta:hover span,.contact-paper .contact-mail:hover span{transform:translate(2px,-2px)}
}
@media(prefers-reduced-motion:reduce){.contact-paper{transition:none}}
@media(max-width:900px){.contact{gap:40px;grid-template-columns:1.1fr 1fr}.contact-topics{gap:0 28px}}
/* Phone: text and topics first, then the letter paper under them. */
@media(max-width:700px){
  .contact{grid-template-columns:1fr;gap:48px;padding-top:48px;padding-bottom:24px}
  .contact-welcome{font-size:21px}
  .contact-paper{justify-self:stretch;max-width:none;width:auto;margin:0 12px;min-height:0}
  .contact-paper .contact-hello{font-size:26px;margin-top:16px}
  .contact-stamp{top:18px;right:18px;width:44px;height:52px}
}
@media(max-width:600px){
  .contact-topics{grid-template-columns:1fr 1fr;gap:0 20px;padding-top:18px}
  /* With the e-mail filled in, the topics are longer links ("Poptat zakázku ↗"): one under the other. */
  .contact-topics:has(a.contact-topic){grid-template-columns:1fr;gap:26px}
  .contact-topic-title,.contact .hero-door-title{font-size:27px}
}
@media(max-width:380px){.contact-topic-title,.contact .hero-door-title{font-size:23px}.contact-topics{gap:0 14px}}