/* ============================================================
   DICTIONARY CARD
   Landing hero card and the dictionary-styled 404 on both sites.
   ============================================================ */

.dict-card {
  background: var(--sl-panel);
  border-radius: 8px;
  border: 0.5px solid var(--sl-hair);
  box-shadow:
    0 1px 2px rgba(10,14,28,0.04),
    0 20px 50px -12px rgba(10,14,28,0.12),
    0 40px 100px -30px rgba(0,123,255,0.10);
  padding: 32px;
  position: relative;
}
.dict-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 0.5px solid var(--sl-hair);
  margin-bottom: 24px;
  gap: 16px;
}
.dict-word {
  font-family: var(--sl-serif);
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 48px);
  letter-spacing: -1.4px;
  color: var(--sl-ink);
  line-height: 1;
}
.dict-phonetic {
  font-family: var(--sl-serif);
  font-weight: 400;
  font-size: 20px;
  color: var(--sl-mute-2);
  letter-spacing: 0.2px;
}
.dict-section { margin-bottom: 24px; }
.dict-section:last-child { margin-bottom: 0; }
.dict-label {
  font: 500 10px/1 var(--sl-sans);
  text-transform: uppercase; letter-spacing: 1.6px;
  color: var(--sl-mute-2);
  margin-bottom: 10px;
}
.dict-body {
  font: 400 14px/1.55 var(--sl-sans);
  color: var(--sl-ink-2);
}
.dict-body em { font-style: normal; color: var(--sl-ink); font-weight: 600; }

.dict-shade-row { display: flex; flex-wrap: wrap; gap: 6px; }
.dict-tag {
  background: var(--sl-bg-2);
  color: var(--sl-mute);
  padding: 5px 10px; border-radius: 3px;
  font: 500 11px/1 var(--sl-sans);
  letter-spacing: 0.2px;
  border: 0.5px solid var(--sl-hair);
}
.dict-tag.accent-blue  { background: rgba(0,123,255,0.08); color: var(--wm-primary); border-color: rgba(0,123,255,0.15); }
.dict-tag.accent-green { background: rgba(101,196,102,0.10); color: var(--wm-green-2); border-color: rgba(101,196,102,0.2); }

.dict-alts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.dict-alt {
  background: var(--sl-bg-2);
  border: 0.5px solid var(--sl-hair);
  border-radius: 4px;
  padding: 12px;
}
.dict-alt .alt-name {
  font: 500 13px/1.2 var(--sl-sans); color: var(--sl-ink);
  margin-bottom: 4px;
}
.dict-alt .alt-note {
  font: 400 11px/1.3 var(--sl-sans); color: var(--sl-mute-2);
}

/* small ransom mark inside dict card */
.dict-card .corner-mark {
  position: absolute; top: -22px; right: -22px;
  width: 64px; height: 64px;
  transform: rotate(8deg);
  filter: drop-shadow(0 8px 18px rgba(10,14,28,0.18));
  pointer-events: none;
}