/* saifdev.amanaric.org (claude, 2026-10-28)
   Sits on top of the amanaric.org site.css. Only the pieces that are Saif's own:
   a type wordmark in place of the Amanaric logo, and the hero contact card. */

.wordmark { display: inline-block; font-family: var(--display); font-size: 27px; line-height: 1; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.wordmark i { font-style: normal; color: var(--accent); }

/* hero contact card, built on the changelog panel's bar */
.card-id { overflow: hidden; }
.id-rows { margin: 0; padding: 6px 18px; }
.id-rows > div { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line);
  animation: rise-in .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 300ms); }
.id-rows > div:last-child { border-bottom: 0; }
.id-rows dt { font: 12px/1.6 var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; }
.id-rows dd { margin: 0; display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; color: var(--ink); }
.id-rows dd a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.id-rows dd a:hover { text-decoration-color: var(--accent); }
.id-rows dd .faint { font: 12px var(--mono); }
[data-uae-time] { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.copy { margin-left: auto; flex-shrink: 0; height: 26px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--surface-2);
  color: var(--ink-2); font: 12px var(--mono); cursor: pointer; transition: color .2s, border-color .2s; }
.copy:hover { color: var(--ink); border-color: var(--accent); }
.copy.done { color: var(--ok); border-color: var(--ok); }
.id-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px 18px; border-top: 1px solid var(--line); background: var(--bg-2); }

.foot-txt { display: block; margin-bottom: 10px; font-size: 14px; color: var(--ink-2); }
.foot-bot .link { color: var(--ink-2); }
section[id] { scroll-margin-top: 70px; }

@media (max-width: 480px) {
  .id-rows > div { grid-template-columns: 1fr; gap: 4px; }
  .cta { padding: 52px 22px; }
  .cta .btn-lg { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .id-rows > div { animation: none !important; } }