/* One red tag. Every size is a share of the tag's own width (cqi), so it prints and previews the same.
   The sideways RED TAG uses cqw: in sideways text, cqi would measure the wrong side. */
.rt { container-type: inline-size; color: #1b2a41; }
.rt .in { display: grid; grid-template-columns: 15cqi 1fr; height: 100%; min-height: 64cqi; background: #fff; border: .7cqi solid #1b2a41; }
.rt .strip { background: #d63a2f; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 4cqi; }
.rt .strip::before { content: ""; position: absolute; top: 5cqi; left: 50%; translate: -50% 0; width: 6cqi; aspect-ratio: 1; border-radius: 50%; background: #fff; border: .6cqi solid #1b2a41; }
.rt .strip b { writing-mode: vertical-rl; rotate: 180deg; color: #fff; font: 800 8.5cqw/1 "Barlow Semi Condensed", sans-serif; letter-spacing: .06em; }
.rt .f { padding: 3cqi 4cqi 3.2cqi; display: flex; flex-direction: column; justify-content: space-between; gap: 2cqi; }
.rt .row { display: flex; gap: 4cqi; }
.rt .ln { flex: 1; display: flex; gap: 1.6cqi; align-items: flex-end; min-width: 0; }
.rt .ln > span, .rt .ck > span:first-child { font: 700 3.3cqi/1 "Barlow Semi Condensed", sans-serif; text-transform: uppercase; letter-spacing: .03em; color: #52607a; white-space: nowrap; }
.rt .ln i { flex: 1; min-width: 0; border-bottom: .35cqi solid #1b2a41; min-height: 6cqi; font: 600 6cqi/1 "Caveat", cursive; font-style: normal; color: #1d4ed8; white-space: nowrap; overflow: hidden; padding-left: .5cqi; }
.rt .ck { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6cqi 3cqi; padding-left: 17cqi; }
.rt .ck > span:first-child { width: 17cqi; margin-left: -17cqi; margin-right: -3cqi; }
.rt .bx { display: inline-flex; align-items: center; gap: 1.2cqi; font: 600 3.7cqi/1 "Source Sans 3", sans-serif; }
.rt .bx::before { content: ""; width: 3.6cqi; height: 3.6cqi; border: .35cqi solid #1b2a41; flex: none; }
.rt .bx.on::before { content: "✓"; color: #1d4ed8; font: 700 5cqi/3.4cqi "Caveat", cursive; text-align: center; }
.rt .ln i.w { font-size: 5.4cqi; }
.rt .rt-logo { flex: none; height: 6.5cqi; max-width: 24cqi; object-fit: contain; align-self: flex-end; }

/* The red tag designer's tag (redtag.js), also on the Posters page. It fills its box: sizes use the tag's
   own width and height (cqw, cqh), and redtag.js sets the type sizes (--lf, --vf, --tk, --tf) from the number of rows. */
.rtg { container-type: size; width: 100%; aspect-ratio: var(--ar); }
/* .in, not .rtg, holds the layout: container units (cqw, cqh) measure the nearest container above the element. */
.rtg .in { height: 100%; display: grid; grid-template-columns: 14cqw minmax(0, 1fr); background: #fff; color: #1b2a41; border: .6cqmin solid #1b2a41; overflow: hidden; font-family: "Source Sans 3", sans-serif; box-sizing: border-box; }
.rtg.tall .in { grid-template-columns: minmax(0, 1fr); grid-template-rows: 17cqh minmax(0, 1fr); }
.rtg .strip { background: var(--c); color: var(--ci); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 4cqh; overflow: hidden; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.rtg .strip::before { content: ""; position: absolute; top: 5cqh; left: 50%; translate: -50% 0; width: 6.5cqmin; aspect-ratio: 1; border-radius: 50%; background: #fff; border: .5cqmin solid #1b2a41; }
.rtg .strip b { writing-mode: vertical-rl; rotate: 180deg; font: 800 var(--tf)/1 "Barlow Semi Condensed", sans-serif; letter-spacing: .06em; white-space: nowrap; }
.rtg.tall .strip { flex-direction: row; justify-content: center; padding: 0 0 0 9cqw; }
.rtg.tall .strip::before { top: 50%; left: 7cqw; translate: 0 -50%; }
.rtg.tall .strip b { writing-mode: horizontal-tb; rotate: none; }
.rtg .f { display: grid; padding: 3cqh 4cqw 3.4cqh; min-width: 0; min-height: 0; }
.rtg .top { display: flex; justify-content: space-between; align-items: flex-start; min-height: 0; }
.rtg .top img { height: 80%; max-width: 30cqw; object-fit: contain; object-position: left top; }
.rtg .no { color: #1b2a41; font: 700 var(--lf)/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .02em; }
.rtg .row { display: flex; gap: 4cqw; align-items: flex-end; min-height: 0; padding-bottom: .4cqh; }
.rtg .ln { flex: 1; display: flex; gap: 1.4cqw; align-items: flex-end; min-width: 0; }
.rtg .ln > span, .rtg .ck > span:first-child { font: 700 var(--lf)/1 "Barlow Semi Condensed", sans-serif; text-transform: uppercase; letter-spacing: .03em; color: #52607a; white-space: nowrap; }
.rtg .ln i { flex: 1; min-width: 0; border-bottom: .3cqmin solid #1b2a41; font: 700 var(--vf)/1.15 "Source Sans 3", sans-serif; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: .6cqw; }
.rtg .ck { display: grid; grid-template-columns: var(--lw) auto 1fr; align-content: center; align-items: center; gap: 0 3cqw; min-height: 0; row-gap: calc(var(--tk) * .5); }
.rtg .ck > span:first-child { align-self: center; }
.rtg .bx { color: #1b2a41; display: flex; align-items: center; gap: calc(var(--tk) * .45); font: 600 var(--tk)/1 "Source Sans 3", sans-serif; white-space: nowrap; overflow: hidden; min-width: 0; }
.rtg .bx::before { content: ""; width: 1em; height: 1em; border: .3cqmin solid #1b2a41; flex: none; box-sizing: border-box; display: grid; place-items: center; }
.rtg .bx.on::before { content: "✓"; font-weight: 800; line-height: 1; }