/* The word card, the welcome card, "What am I looking at?" and the short
 * version. Tokens come from brana.css. */

/* ---------- The word card: opens where the word was found ---------- */
#wordcard {
  position: fixed; z-index: 62; pointer-events: none;
  padding: 12px 16px 12px; background: color-mix(in srgb, var(--panel) 94%, transparent);
  border: 1.5px solid var(--word); border-left-width: 5px; box-shadow: 5px 5px 0 color-mix(in srgb, var(--word) 55%, transparent);
  opacity: 0; transform: translateY(8px) scale(.97); transition: opacity .35s ease, transform .35s cubic-bezier(.2, .9, .3, 1.2);
}
#wordcard.on { opacity: 1; transform: none }
.wc-top { display: flex; align-items: baseline; gap: 10px }
.wc-top b { font-size: 34px; line-height: 1; color: var(--word); font-weight: 400 }
.wc-latin { font-size: 11px; color: var(--ink-soft); letter-spacing: .1em }
.wc-mean { font-family: var(--serif); font-style: italic; font-size: 19px; margin: 4px 0 6px }
#wordcard p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.55 }
.wc-count { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-soft) }
.wordlist { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 12px; margin: 6px 0 0 }
.wordlist dt { color: var(--word); font-size: 18px; line-height: 1.2 }
.wordlist dd { margin: 0 }
.wordlist dd b { font-weight: 600 }

/* the label over a word the moment you're on it, with a ring that fills */
#wordhint {
  position: fixed; z-index: 61; pointer-events: none; translate: -50% -100%;
  display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; white-space: nowrap;
  background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1.5px solid var(--word);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--word) 45%, transparent);
  opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease;
}
#wordhint.on { opacity: 1; transform: none }
#wordhint::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 10px; height: 10px; background: inherit; border: inherit; border-top: 0; border-left: 0; rotate: 45deg; translate: -50% 0 }
#wordhint b { font-size: 20px; line-height: 1; color: var(--word); font-weight: 400 }
.wh-mean { font-family: var(--serif); font-style: italic; font-size: 15px }
.wh-ring { width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--word) calc(var(--p, 0) * 360deg), color-mix(in srgb, var(--word) 18%, transparent) 0);
  mask: radial-gradient(circle, transparent 5px, #000 5.5px); -webkit-mask: radial-gradient(circle, transparent 5px, #000 5.5px) }
#wordhint.found .wh-ring { mask: none; -webkit-mask: none; background: var(--word); display: grid; place-items: center }
#wordhint.found .wh-ring::before { content: "✓"; color: var(--panel); font-size: 11px; font-weight: 700 }

/* ---------- Welcome ---------- */
.welcome {
  position: fixed; left: 24px; top: 50%; z-index: 48;
  /* as wide as the free space beside the medallion allows */
  width: clamp(250px, calc((100vw - min(calc(100vh - 96px), 76vw, 780px)) / 2 - 40px), 340px);
  translate: 0 -50%; padding: 14px 18px 12px;
  background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1.5px solid var(--fg); box-shadow: 6px 6px 0 var(--rubric);
  opacity: 0; transform: translateY(-10px); transition: opacity .4s ease, transform .4s cubic-bezier(.2, .9, .3, 1.2);
}
.welcome.on { opacity: 1; transform: none }
.welcome > b { font-size: 30px; color: var(--rubric); font-weight: 400 }
.wl-hi { font-family: var(--serif); font-style: italic; font-size: 20px }
.welcome p { margin: 6px 0 10px; font-size: 12.5px }
.welcome small { display: block; font-size: 10.5px; color: var(--ink-soft); margin-top: 8px }
.wl-go { display: flex; flex-wrap: wrap; gap: 8px }
.wl-go button { border: 1.5px solid var(--fg); padding: 5px 10px; font-size: 12px; transition: background .15s, color .15s }
.wl-go button:first-child, .wl-go button:hover { background: var(--fg); color: var(--bg) }
.welcome .x { position: absolute; right: 8px; top: 8px; width: 22px; height: 22px; border: 1px solid var(--line) }

/* ---------- The short version ---------- */
.sv { max-width: 860px }
.sv-head { display: flex; gap: 16px; align-items: center; margin-bottom: 10px }
.sv-face { width: 84px; height: 84px; border-radius: 50%; border: 2px solid var(--fg); box-shadow: 4px 4px 0 var(--rubric); image-rendering: pixelated; flex: none; background: var(--disc) }
.sv-head h2 { margin: 0 }
.sv-head .lede-about { margin: 4px 0 0 }
.sv-facts { list-style: none; padding: 0; margin: 10px 0 4px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px }
.sv-facts li { border: 1px solid var(--line); padding: 8px 10px; font-size: 11px; line-height: 1.4 }
.sv-facts b { display: block; font-family: var(--serif); font-size: 26px; color: var(--rubric); line-height: 1 }
.sv h3 { font-family: var(--serif); font-size: 22px; margin: 18px 0 8px }
.sv-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px }
.sv-svc { border: 1px solid var(--line); padding: 10px 12px; background: color-mix(in srgb, var(--fg) 4%, transparent) }
.sv-svc span { font-size: 14px; color: var(--rubric) }
.sv-svc b { display: block; font-family: var(--serif); font-size: 18px; margin: 2px 0 }
.sv-svc p { margin: 0; font-size: 12px }
.sv-work { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px }
.sv-w { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--line); transition: box-shadow .2s, border-color .2s }
.sv-w:hover { border-color: var(--fg); box-shadow: 4px 4px 0 var(--rubric) }
.sv-w:hover .plate img { filter: none; mix-blend-mode: normal }
.sv-w b { font-family: var(--serif); font-size: 16px }
.sv-w span:not(.plate) { font-size: 11px; color: var(--ink-soft) }
.sv-time { border-left: 3px solid var(--ochre); padding: 4px 10px }
.sv-contact { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 }
.visit.ghost { background: transparent; color: var(--fg) }
.sv-foot { font-size: 12px; color: var(--ink-soft); font-style: italic }

@media (max-width: 760px) {
  .welcome { left: 12px; top: auto; bottom: 92px; translate: none }
  .sv-facts { grid-template-columns: repeat(2, 1fr) }
  .sv-services, .sv-work { grid-template-columns: 1fr 1fr }
  .sv-head { align-items: flex-start }
  .sv-face { width: 64px; height: 64px }
}

/* ---------- Quotes ---------- */
.sv-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.quote { position: relative; margin: 10px 0; padding: 12px 14px 10px; border-left: 4px solid var(--rubric); background: color-mix(in srgb, var(--fg) 5%, transparent) }
.sv-quotes .quote { margin: 0 }
.quote blockquote { margin: 0 0 6px; font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.35 }
.quote figcaption { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft) }
/* a sample can never pass for a real endorsement */
.quote.sample { border-left-style: dashed; opacity: .85; padding-top: 26px }
.sample-tag { position: absolute; top: 6px; right: 6px; font-size: 9px; letter-spacing: .2em; font-weight: 600; color: var(--parchment); background: var(--ink-soft); padding: 1px 6px }

/* ---------- Available now ---------- */
.avail-badge { display: inline-flex; align-items: center; gap: 2px; margin: 6px 0 10px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--green); border: 1px solid currentColor; padding: 2px 10px 2px 8px }
.avail-badge .dot { margin-right: 6px }
.avail { color: var(--green) }

/* ---------- Amharic interface ---------- */
.lang-am .corner .t { font-family: var(--geez); font-weight: 400 }
.lang-am .corner .a { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink-soft) }
/* Ge'ez has no italic; a slanted fallback looks wrong */
.lang-am .lede-about, .lang-am .sv-foot, .lang-am .wl-hi, .lang-am .jr-head p { font-style: normal }

@media (max-width: 760px) {
  .sv-quotes { grid-template-columns: 1fr }
}