/* =====================================================================
   20 · COMPONENTS  —  pills, title block (Schriftfeld), highlight mark, cursor
   ===================================================================== */

/* Pills */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: var(--pill-h); padding: 3px var(--pill-px) 2px; border: 1.5px solid currentColor; border-radius: 999px;
  font-family: var(--display); font-weight: 700; font-size: var(--pill-fs); line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; user-select: none; -webkit-user-select: none;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.pill:active { transform: scale(0.97); }
.pill.is-current { background: var(--ink); color: var(--black); }
@media (hover: hover) and (pointer: fine) { .pill:hover { background: var(--ink); color: var(--black); border-color: var(--ink); } }

/* Title block, like the one in the corner of a technical drawing */
.tb { font-family: var(--mono); color: #fff; border: 1px solid rgba(255,255,255,.6); background: rgba(0,0,0,.45); }
.tb__row { display: grid; border-top: 1px solid rgba(255,255,255,.6); }
.tb__row:first-child { border-top: 0; }
.tb__row--3 { grid-template-columns: 1.1fr 1.5fr 1fr; }
.tb__cell { padding: 6px 9px 7px; border-left: 1px solid rgba(255,255,255,.6); min-width: 0; }
.tb__cell:first-child { border-left: 0; }
.tb__k { display: block; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.tb__v { display: block; font-size: 14px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.tb__v--long { font-family: var(--display); font-size: 14px; }

/* Hand-drawn highlight stroke under a word. Sits behind the text. */
.mark { position: relative; display: inline-block; padding: 0 .3em; isolation: isolate; }
.mark::before { content: ""; position: absolute; inset: auto -0.3em -0.12em -0.4em; height: .5em; background: var(--accent); border-radius: 45% 55% 50% 48% / 60% 40% 65% 38%; transform: rotate(-1.2deg); opacity: .85; z-index: -1; }

/* Custom cursor (mouse only) */
.cursor { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; display: none; }
@media (hover: hover) and (pointer: fine) { .js .cursor { display: block; } }
.cursor__dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; mix-blend-mode: difference; transition: transform 160ms var(--ease-out); }
.cursor__label { position: absolute; left: 14px; top: -14px; padding: 6px 10px 5px; border-radius: 999px; background: var(--blue); color: #fff; font-family: var(--display); font-weight: 700; font-size: 11px; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translateX(-4px); transition: opacity 140ms ease, transform 160ms var(--ease-out); }
.cursor.has-label .cursor__label { opacity: 1; transform: none; }
.cursor.has-label .cursor__dot { transform: scale(1.6); }

/* Copyright line (work, about, contact) */
.legal { margin: 0; font: 400 10.5px/1.4 var(--mono); letter-spacing: .05em; color: rgba(255,255,255,.55); }