/* Generated typographic title cards (shared by the site and the admin preview). */
/* ---------------------------------------------------------------- generated title cards */
.tcard {
  --tc-bg: #1F5F6B; --tc-fg: #fff;
  position: relative; display: grid; grid-template-rows: auto 1fr auto; aspect-ratio: 16 / 10; overflow: hidden;
  background-color: var(--tc-bg); color: var(--tc-fg); border-radius: 8px; padding: 7% 7.5% 6%;
  container-type: inline-size; isolation: isolate;
}
.tcard::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .9; }
.tcard--spot::before { background: radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--tc-fg) 22%, transparent), transparent 60%); }
.tcard--stripes::before { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--tc-fg) 9%, transparent) 0 2px, transparent 2px 13px); }
.tcard--lines::before { background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--tc-fg) 8%, transparent) 0 1px, transparent 1px 6px); }
.tcard--frame::before { inset: 5%; border: 2px solid color-mix(in srgb, var(--tc-fg) 45%, transparent); border-radius: 4px; box-shadow: 0 0 0 4px var(--tc-bg), 0 0 0 5px color-mix(in srgb, var(--tc-fg) 25%, transparent); }
.tcard--split::before { background: linear-gradient(100deg, transparent 0 62%, color-mix(in srgb, #000 22%, transparent) 62% 100%); }
.tcard--dots::before { background: radial-gradient(circle, color-mix(in srgb, var(--tc-fg) 16%, transparent) 1.2px, transparent 1.6px) 0 0 / 11px 11px; -webkit-mask: linear-gradient(160deg, #000, transparent 70%); mask: linear-gradient(160deg, #000, transparent 70%); }
.tcard-kicker { font: 600 max(.56rem, 4.3cqi)/1.2 "Unbounded", "Arial Black", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
/* size comes from --tc-fs (set per card so the longest word fits) */
.tcard-title { align-self: center; font: 800 var(--tc-fs, 9cqi)/1.02 "Unbounded", "Arial Black", system-ui, sans-serif; text-transform: uppercase; letter-spacing: -.01em; overflow-wrap: break-word; hyphens: manual; }
.tcard-foot { display: flex; justify-content: space-between; align-items: end; font: 500 max(.55rem, 4cqi)/1.2 "Hanken Grotesk", system-ui, sans-serif; letter-spacing: .04em; opacity: .92; }
.tcard-foot span { border-top: 1px solid color-mix(in srgb, var(--tc-fg) 50%, transparent); padding-top: .35em; }
.tcard--img { padding: 0; display: block; margin: 0; background: #16244A; }
.tcard--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcard-credit { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px; font-size: .72rem; background: rgba(11,21,48,.82); color: #C9D1E3; }