/* A personal typographic object, separate from the project’s live network. */
.signature-art { position:absolute; top:4px; right:var(--gutter); width:min(31%,470px); margin:0; z-index:1; }
.signature-svg { width:100%; display:block; overflow:visible; }
.signature-depth { transform-origin:50% 50%; transform:translate(var(--mark-x,0px),var(--mark-y,0px)); transition:transform 600ms var(--ease); }
.signature-layer { fill:none; stroke:var(--accent); stroke-width:.14; }
.layer-back { opacity:.18; }
.layer-middle { opacity:.35; }
.layer-near { opacity:.6; }
.signature-face { fill:var(--fg); }
.signature-corner { fill:var(--accent); }
.signature-art figcaption { display:flex; justify-content:flex-end; gap:18px; color:var(--muted); margin-top:-12px; padding-right:12%; font-size:13px; }
.signature-art figcaption span:last-child { color:var(--accent); }

/* Font-independent symbols share one line weight and scale with their context. */
.icon { display:inline-block; width:1em; height:1em; flex:none; vertical-align:-.15em; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.contact-link { display:inline-flex; align-items:center; gap:18px; }
.contact-link span { display:inline-flex; padding:0; font-size:20px; }
.round-arrow .icon { width:28px; height:28px; }
.small-round-arrow .icon { width:22px; height:22px; }
.contact-big-arrow { display:flex; }
.contact-big-arrow .icon { width:clamp(100px,15vw,260px); height:clamp(100px,15vw,260px); stroke-width:1; }
.social-links a,.footer a { display:inline-flex; align-items:center; gap:8px; }
.dialog-close .icon { width:22px; height:22px; }
.sync-asterisk .icon { width:1em; height:1em; stroke-width:2; }
.hero-baseline { font-size:13px; }
.hero-baseline>span { display:inline-flex; align-items:center; gap:14px; }
.hero-baseline>span:last-child span { display:inline-flex; margin-left:0; }
.route-caption { display:flex; flex-wrap:wrap; gap:12px 24px; font-size:13px; }
.route-pair { display:inline-flex; align-items:center; gap:8px; }

@media(prefers-reduced-motion:no-preference) {
  .signature-art { animation:signature-enter 900ms 100ms var(--ease) both; }
  @keyframes signature-enter { from { opacity:0; transform:translate(20px,-10px); } to { opacity:1; transform:none; } }
}
@media(max-width:1050px) {
  .signature-art { width:30%; top:12px; }
  .signature-art figcaption { font-size:12px; gap:12px; }
}
@media(max-width:760px) {
  .signature-art { position:relative; inset:auto; order:2; width:230px; max-width:70%; align-self:flex-end; margin:14px -10px 4px 0; }
  .signature-art figcaption { font-size:12px; margin-top:-10px; padding-right:12%; }
  .hero-bottom { margin-top:14px; }
  .contact-link { gap:5px; }
  .contact-link span { padding:0; font-size:18px; }
  .contact-big-arrow .icon { width:58px; height:58px; }
  .hero-baseline { font-size:12px; }
  .route-caption { font-size:12px; gap:8px 18px; }
}
@media(prefers-reduced-motion:reduce) { .signature-depth { transform:none; } }
@media print { .signature-art { display:none; } }