/* ==========================================================================
   Daftar — logo lockup

   Masthead:
     [door+pin]  दफ़tar
                 THE OFFICE
                 دفتر · दफ़्तर

   Topbar: mark + दफ़tar + THE OFFICE (no Urdu — collision-safe)
   ========================================================================== */

.brand {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-3), 1.5vw, var(--space-5));
  text-decoration: none;
  min-width: 0;
  color: inherit;
}

.brand__row {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-3), 1.5vw, var(--space-5));
  min-width: 0;
}

/* --- Mark: compact doorway + pin ----------------------------------------- */

.brand__mark {
  flex: none;
  width: clamp(40px, 3.2vw, 56px);
  height: auto;
  overflow: visible;
}

.brand__portal {
  fill: none;
  stroke: var(--ink);
  stroke-width: 5.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.brand__threshold {
  fill: none;
  stroke: var(--highlight);
  stroke-width: 4;
  stroke-linecap: round;
}

.brand__pin {
  fill: var(--accent);
  transform-origin: 50px 42px;
  transform-box: fill-box;
}

.brand__pin-hole {
  fill: var(--bg);
}

@media (prefers-reduced-motion: no-preference) {
  .brand__portal {
    stroke-dasharray: 280;
    stroke-dashoffset: 280;
    animation: brand-draw 900ms var(--ease-out) 80ms forwards;
  }
  .brand__threshold {
    opacity: 0;
    animation: brand-ink 360ms var(--ease-out) 720ms forwards;
  }
  .brand__pin {
    opacity: 0;
    animation: brand-pin-in 480ms var(--ease-out) 780ms forwards;
  }
  .brand:not(.brand--sm) .brand__pin {
    animation:
      brand-pin-in 480ms var(--ease-out) 780ms forwards,
      brand-breathe 2.8s var(--ease-in-out) 1.4s infinite;
  }
  .brand__daf {
    opacity: 0;
    transform: translateY(8px);
    animation: brand-rise 520ms var(--ease-out) 420ms forwards;
  }
  .brand__tar {
    opacity: 0;
    transform: translateY(8px);
    animation: brand-rise 520ms var(--ease-out) 520ms forwards;
  }
  .brand__en {
    opacity: 0;
    transform: translateY(6px);
    animation: brand-rise 520ms var(--ease-out) 640ms forwards;
  }
}

.brand:hover .brand__pin,
.brand:focus-visible .brand__pin {
  transform: translateY(-2px);
}

@keyframes brand-draw { to { stroke-dashoffset: 0; } }
@keyframes brand-ink { to { opacity: 1; } }
@keyframes brand-pin-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes brand-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes brand-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* --- Wordmark ------------------------------------------------------------ */

.brand__words {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand__latin {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 144;
  font-weight: 600;
  font-size: var(--logo);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--text);
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
}

.brand__daf {
  font-family: var(--font-hindi);
  font-size: 0.82em;
  font-weight: 400;
  letter-spacing: 0;
  margin-inline-end: -0.02em;
  color: var(--highlight);
  display: inline-block;
}

.brand__tar {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 144;
  display: inline-block;
}

.brand__tagline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: 0.28em;
}

.brand__tagline::before {
  content: "";
  width: clamp(18px, 2.8vw, 36px);
  height: 1.5px;
  background: var(--highlight);
  flex: none;
}

.brand__en {
  font-family: var(--font-body);
  font-size: clamp(0.7rem, 0.62rem + 0.35vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-block;
}

.brand__scripts {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: 0.2em;
  color: var(--text-muted);
}

.brand__urdu {
  font-family: var(--font-urdu);
  direction: rtl;
  font-size: clamp(0.85rem, 0.7rem + 0.55vw, 1.2rem);
  line-height: 2;
  padding-block: 0.05em;
  color: var(--text-muted);
}

.brand__dot { color: var(--ink-faint); font-size: 0.7em; }

.brand__hindi {
  font-family: var(--font-hindi);
  font-size: clamp(0.75rem, 0.65rem + 0.35vw, 0.98rem);
  line-height: 1.5;
  color: var(--text-faint);
}

/* --- Compact topbar ------------------------------------------------------ */

.brand--sm {
  gap: var(--space-3);
  align-items: center;
  flex: none;
}

.brand--sm .brand__mark { width: 28px; }

.brand--sm .brand__latin {
  font-size: 1.25rem;
  letter-spacing: -0.03em;
}

.brand--sm .brand__scripts { display: none; }

.brand--sm .brand__tagline {
  margin-top: 0.05em;
  gap: var(--space-2);
}

.brand--sm .brand__tagline::before {
  width: 12px;
  height: 1px;
}

.brand--sm .brand__en {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
}

@media (max-width: 40rem) {
  .brand--sm .brand__tagline { display: none; }
}

@media (min-width: 48rem) {
  .brand--sm { gap: var(--space-4); }
}