/* Tektura, who make Bandroom, in Tektura's own branding rather than Bandroom's: IBM Plex, ink and paper,
   capitals spaced out, and Tektura's corner rule (top right and bottom left rounded, never all four).
   Bandroom's design checks leave this file alone for that reason (tools/check.mjs). The two fonts load
   only on a page that shows one of these. */
@font-face { font-family: 'Tektura Plex'; src: url('../fonts/plex-sans-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Tektura Mono'; src: url('../fonts/plex-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }

.tk-credit, .tk-strip { --tk-ink: #12161b; --tk-ink-raised: #1e242c; --tk-paper: #f2f1ee; --tk-slate: #5c6470; --tk-on-ink-dim: #a7b0ba; --tk-signal: #c2410c; }
.tk-mark { width: 22px; height: 22px; flex: none; }

/* The credit: the mark, then MADE BY over TEKTURA, as on the sites Tektura builds. */
.tk-credit { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.tk-credit .tk-lock { display: grid; line-height: 1.15; }
.tk-credit .tk-lock span { font-family: 'Tektura Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.tk-credit .tk-lock b { font-family: 'Tektura Plex', system-ui, sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.tk-credit .tk-url { margin-left: 4px; font-family: 'Tektura Mono', ui-monospace, monospace; font-size: 12px; }
.tk-credit:hover .tk-lock b, .tk-credit:focus-visible .tk-lock b { text-decoration: underline; text-underline-offset: 3px; }

/* A little strip in Tektura's bar-and-chip shape: one line, and an ink chip with the mark over its end. */
.tk-strip { position: relative; display: flex; align-items: center; min-height: 48px; padding: 6px 136px 6px 18px; background: var(--tk-paper); color: var(--tk-slate); border-radius: 0 16px 0 16px; font-family: 'Tektura Mono', ui-monospace, monospace; letter-spacing: 0.12em; font-size: 11px; text-transform: uppercase; line-height: 1.35; text-decoration: none; }
.tk-strip .tk-chip { position: absolute; top: 0; right: 0; bottom: 0; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; background: var(--tk-ink); color: var(--tk-paper); border-radius: 0 16px 0 16px; font-family: 'Tektura Plex', system-ui, sans-serif; font-weight: 600; letter-spacing: 0.1em; font-size: 12px; transition: background-color 0.2s ease; }
.tk-strip .tk-chip .tk-mark { width: 16px; height: 16px; }
.tk-strip:hover .tk-chip, .tk-strip:focus-visible .tk-chip { background: var(--tk-signal); }

/* On a dark page the strip is Tektura's raised ink, and the chip keeps its ink. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tk-strip { background: var(--tk-ink-raised); color: var(--tk-on-ink-dim); }
}
:root[data-theme="dark"] .tk-strip { background: var(--tk-ink-raised); color: var(--tk-on-ink-dim); }

/* The website footer underlines its links on hover; the credit underlines only the name. */
.site-foot .tk-credit:hover { text-decoration: none; }