/* <ticket-stub-footer> — styles. Pair with components/ticket-stub-footer.js.
   Scoped to the element and .tsf- classes. Theme via the custom properties
   below; defaults come from the Pramaan design tokens. */

ticket-stub-footer {
  --tsf-bg: var(--color-parchment, #f6f3f1);
  --tsf-ink: var(--color-off-black, #242424);
  --tsf-muted: var(--color-smoke, #797776);
  --tsf-body: var(--color-graphite, #4e4d4d);
  --tsf-accent: var(--color-coral, #ff9473);       /* decorative: packets, caret, active marker */
  --tsf-ticket: var(--color-periwinkle-mist, #cfdaf5);
  --tsf-deep: var(--color-periwinkle-mist, #cfdaf5); /* the stub: same surface, told apart by hatch + perforation */
  --tsf-aink: var(--color-off-black, #242424);      /* text + wordmark on the ticket */
  --tsf-cta: var(--color-lake-blue, #2b59d1);       /* the one primary action */
  --tsf-serif: var(--font-serif, Georgia, serif);
  --tsf-serif-weight: 400;
  --tsf-mono: var(--font-mono, ui-monospace, monospace);
  --tsf-line: var(--color-ash, #cecac8);
  --tsf-dot-ink: var(--tsf-aink);                   /* wordmark-style="dots": the dots at rest */
  --tsf-dot-warm: var(--tsf-accent);                /* ...and as the pointer pushes them */

  display: block;
  position: relative;
  container-type: inline-size;
  background: var(--tsf-bg);
  color: var(--tsf-ink);
  font-family: var(--tsf-mono);
  overflow: clip;
  isolation: isolate;
  border-top: 1px solid var(--tsf-line);
  -webkit-font-smoothing: antialiased;
}
ticket-stub-footer *,
ticket-stub-footer *::before,
ticket-stub-footer *::after { box-sizing: border-box; }
:where(ticket-stub-footer) a { color: inherit; text-decoration: none; }
:where(ticket-stub-footer) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
:where(ticket-stub-footer) :focus-visible { outline: 1px solid var(--tsf-ink); outline-offset: 3px; }

/* Before upgrade: plain readable content. */
ticket-stub-footer:not(:defined) { display: flex; flex-direction: column; gap: 16px; padding: 40px var(--gutter, 40px); }
ticket-stub-footer:not(:defined) nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }

.tsf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.tsf-grid {
  --rail: clamp(16px, 2.5cqw, 36px);
  --nav: clamp(140px, 14cqw, 200px);
  --line: var(--tsf-line);
  --oline: color-mix(in srgb, var(--tsf-aink) 18%, transparent);
  --pad: clamp(12px, 2.25cqw, 30px);
  position: relative;
  display: grid;
  grid-template-columns: var(--rail) var(--nav) var(--rail) minmax(0, 1fr) var(--rail) minmax(0, 1fr) var(--rail);
  grid-template-rows: clamp(32px, 5cqw, 72px) auto var(--rail) auto clamp(14px, 1.7cqw, 24px) auto;
}
.tsf-vl { grid-row: 1 / -1; justify-self: start; width: 0; border-left: 1px solid var(--line); pointer-events: none; }
.tsf-hl { grid-column: 1 / -1; align-self: start; height: 0; border-top: 1px solid var(--line); pointer-events: none; }

/* Section index */
.tsf-nav { grid-column: 2; grid-row: 2; position: relative; }
.tsf-nav ol { list-style: none; margin: 0; padding: 0; position: relative; }
.tsf-nav li { border-bottom: 1px solid var(--line); }
.tsf-nav-item {
  position: relative; display: flex; align-items: center; gap: clamp(8px, 1cqw, 14px);
  width: 100%; height: clamp(26px, 2.5cqw, 34px); padding: 0 6px;
  font-size: var(--text-caption, 12px); letter-spacing: -0.033em; text-transform: uppercase;
  color: var(--tsf-body);
  transition: color .25s, background-color .25s, padding .35s cubic-bezier(.2, .8, .2, 1);
}
.tsf-nav-item span:first-child { color: var(--tsf-muted); font-variant-numeric: tabular-nums; transition: color .25s; }
.tsf-nav-item:hover { background: color-mix(in srgb, var(--tsf-ink) 4%, transparent); padding-left: 12px; color: var(--tsf-ink); }
.tsf-nav-item:hover span:first-child,
.tsf-nav-item[aria-current] span:first-child { color: var(--tsf-ink); }
.tsf-nav-item[aria-current] { color: var(--tsf-ink); padding-left: 12px; }
.tsf-nav-bar {
  position: absolute; left: -1px; top: 0; width: 2px; height: clamp(26px, 2.5cqw, 34px);
  background: var(--tsf-ink);
  transform: translateY(calc(var(--i, 0) * (100% + 1px)));
  transition: transform .45s cubic-bezier(.7, 0, .2, 1);
  pointer-events: none;
}

/* Hero */
.tsf-hero { grid-column: 4; grid-row: 2; display: flex; flex-direction: column; min-width: 0; padding-bottom: clamp(20px, 2.4cqw, 30px); }
.tsf-hero > :not(.tsf-eyebrow) { margin-left: var(--pad); margin-right: var(--pad); }
.tsf-eyebrow {
  display: flex; align-items: center; gap: 12px; padding-left: 6px;
  height: clamp(26px, 2.5cqw, 34px);
  border-bottom: 1px solid color-mix(in srgb, var(--tsf-ink) 40%, transparent);
  font-size: var(--text-body-sm, 14px); letter-spacing: -0.02em; white-space: nowrap;
}
.tsf-eyebrow svg { flex: none; width: 12px; height: 12px; }
.tsf-type { min-width: 0; overflow: hidden; }
.tsf-caret { display: inline-block; width: .55em; height: 1.05em; margin-left: 2px; vertical-align: -.18em; background: var(--tsf-accent); animation: tsf-blink 1s steps(1) infinite; }
.tsf-dots {
  flex: 1; min-width: 24px; height: 10px; opacity: .55;
  background-image: radial-gradient(circle, var(--dot, var(--tsf-ink)) .85px, transparent 1.25px);
  background-size: 6px 5px;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 35%, rgba(0, 0, 0, .25) 50%, #000 65%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 35%, rgba(0, 0, 0, .25) 50%, #000 65%, #000 100%);
  -webkit-mask-size: 200% 100%; mask-size: 200% 100%;
  animation: tsf-march 3.6s linear infinite;
}
.tsf-h {
  margin: clamp(28px, 4.6cqw, 64px) 0 0;
  font-family: var(--tsf-serif); font-weight: 400;
  font-size: clamp(36px, 4.2cqw, 64px); line-height: 1.12; letter-spacing: -0.02em;
}
.tsf-h > span { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.tsf-h > span > span { display: block; transform: translateY(0); transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.tsf[data-seen="0"] .tsf-h > span > span { transform: translateY(110%); }
.tsf-p { margin: clamp(16px, 2.1cqw, 28px) 0 0; max-width: 34em; font-size: var(--text-body, 16px); line-height: 1.35; letter-spacing: -0.025em; color: var(--tsf-body); }
.tsf-cta {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  align-self: flex-start;
  margin-top: clamp(28px, 5cqw, 72px); height: 48px; padding: 16px 32px;
  border-radius: var(--radius-buttons, 100px);
  background: var(--tsf-cta); color: #fff;
  font-size: var(--text-body-sm, 14px); letter-spacing: -0.02em; text-transform: uppercase; line-height: 1;
  overflow: hidden; isolation: isolate; transition: transform .2s;
}
.tsf-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tsf-ink);
  transform: scaleX(0); transform-origin: left; transition: transform .55s cubic-bezier(.7, 0, .2, 1);
}
.tsf-cta:hover::before,
.tsf-cta:focus-visible::before { transform: scaleX(1); }
.tsf-cta:active { transform: translateY(1px); }
.tsf-cta svg { width: 14px; height: 14px; opacity: 0; margin-right: -24px; transform: translateX(-10px); transition: opacity .3s, transform .45s cubic-bezier(.2, .8, .2, 1), margin .45s cubic-bezier(.2, .8, .2, 1); }
.tsf-cta:hover svg,
.tsf-cta:focus-visible svg { opacity: 1; margin-right: 0; transform: none; }

/* Side: globe + links */
.tsf-side { grid-column: 6; grid-row: 2; display: flex; flex-direction: column; min-width: 0; }
.tsf-orbit { position: relative; height: clamp(92px, 11.4cqw, 160px); border-bottom: 1px solid var(--line); cursor: grab; touch-action: pan-y; overflow: hidden; color: var(--tsf-ink); }
.tsf-orbit:active { cursor: grabbing; }
.tsf-orbit::before,
.tsf-orbit::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 14%;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--tsf-ink) 40%, transparent) .7px, transparent 1.1px);
  background-size: 4px 4px; pointer-events: none;
}
.tsf-orbit::before { left: 0; -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); }
.tsf-orbit::after { right: 0; -webkit-mask-image: linear-gradient(270deg, #000, transparent); mask-image: linear-gradient(270deg, #000, transparent); }
.tsf-orbit svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.tsf-packet { fill: var(--tsf-accent); }
.tsf-links { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 24px; padding: clamp(22px, 2.6cqw, 36px) clamp(12px, 2.3cqw, 32px) clamp(20px, 2.4cqw, 30px); }
.tsf-links h3 { margin: 0 0 clamp(14px, 1.8cqw, 24px); font-family: var(--tsf-serif); font-weight: 400; font-size: var(--text-subheading, 24px); letter-spacing: -0.02em; }
.tsf-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tsf-link {
  position: relative; display: inline-flex; align-items: center;
  font-size: var(--text-body-sm, 14px); line-height: 1.45; letter-spacing: -0.02em; color: var(--tsf-body);
  transition: color .25s, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.tsf-link::before { content: ""; position: absolute; left: -12px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--tsf-ink); transform: scale(0); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.tsf-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s cubic-bezier(.7, 0, .2, 1); }
.tsf-link:hover,
.tsf-link:focus-visible { color: var(--tsf-ink); transform: translateX(12px); }
.tsf-link:hover::before,
.tsf-link:focus-visible::before { transform: scale(1); }
.tsf-link:hover::after,
.tsf-link:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* Ticket */
.tsf-ticket { grid-column: 2 / 7; grid-row: 4; position: relative; z-index: 1; display: grid; grid-template-columns: var(--nav) minmax(0, 1fr); color: var(--tsf-aink); }
.tsf-stub,
.tsf-main {
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.tsf-stub {
  position: relative; display: flex; align-items: center; justify-content: center;
  background-color: var(--tsf-deep);
  background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--tsf-aink) 14%, transparent) 0 1px, transparent 1px 5px);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .3s; transform-origin: 100% 100%;
}
.tsf-stub::after { content: ""; position: absolute; right: 0; top: 14px; bottom: 14px; width: 1px; background-image: linear-gradient(to bottom, color-mix(in srgb, var(--tsf-aink) 45%, transparent) 50%, transparent 50%); background-size: 1px 7px; }
.tsf-stub:hover { transform: rotate(-1.4deg) translateY(-2px); filter: brightness(1.04); }
.tsf-stub:active { transform: rotate(-3deg) translateY(3px); }
.tsf-stub svg { width: clamp(30px, 4.2cqw, 54px); height: clamp(30px, 4.2cqw, 54px); }
.tsf-pop { animation: tsf-pop .6s cubic-bezier(.3, 1.5, .4, 1); }
.tsf-stub-tip { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 11px; letter-spacing: -0.02em; text-transform: uppercase; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.tsf-stub:hover .tsf-stub-tip,
.tsf-stub:focus-visible .tsf-stub-tip { opacity: .7; transform: none; }
.tsf-main { position: relative; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr) var(--rail) minmax(0, 1fr); background: var(--tsf-ticket); min-width: 0; }
.tsf-stats { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: clamp(18px, 2.4cqw, 32px) 0 clamp(18px, 2.3cqw, 30px) clamp(12px, 2.3cqw, 28px); }
.tsf-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tsf-stat-v { display: flex; align-items: center; gap: 10px; font-family: var(--tsf-serif); font-size: clamp(24px, 2.4cqw, 34px); line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tsf-stat-c { font-size: var(--text-caption, 12px); letter-spacing: -0.033em; text-transform: uppercase; color: color-mix(in srgb, var(--tsf-aink) 65%, transparent); }
.tsf-pulse { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--color-mint, #a7fccd); box-shadow: inset 0 0 0 1px var(--tsf-aink); }
.tsf-pulse::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid var(--tsf-aink); animation: tsf-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; }
.tsf-gutcell { grid-column: 3; border-left: 1px solid var(--oline); border-right: 1px solid var(--oline); }
.tsf-blurb { grid-column: 4; position: relative; margin: 0; padding: clamp(18px, 2.4cqw, 32px) clamp(12px, 2.3cqw, 28px) clamp(18px, 2.3cqw, 30px); font-size: clamp(12px, 1.06cqw, 14px); line-height: 1.48; letter-spacing: -0.02em; text-align: justify; hyphens: none; }
.tsf-word { grid-column: 2 / -1; position: relative; border-top: 1px solid var(--oline); cursor: crosshair; touch-action: pan-y; }
.tsf-word canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.tsf-odo { display: inline-flex; }
.tsf-odo-d { display: inline-block; height: 1.1em; overflow: hidden; }
.tsf-odo-s { display: flex; flex-direction: column; transition: transform .9s cubic-bezier(.2, .9, .25, 1); }
.tsf-odo-s span { display: block; height: 1.1em; line-height: 1.1em; }
.tsf-bump { animation: tsf-bump .5s cubic-bezier(.2, .8, .2, 1); }

/* Footer row */
.tsf-foot {
  grid-column: 1 / -1; grid-row: 6; display: grid;
  grid-template-columns: var(--rail) var(--nav) var(--rail) minmax(0, 1fr) var(--rail) minmax(0, 1fr) var(--rail);
  align-items: center; min-height: clamp(52px, 6cqw, 76px);
  font-size: var(--text-caption, 12px); letter-spacing: -0.033em; text-transform: uppercase;
}
.tsf-copy { grid-column: 2 / 4; color: var(--tsf-body); white-space: nowrap; }
.tsf-foot .tsf-dots { --dot: var(--tsf-muted); }
.tsf-foot-l { grid-column: 4; display: flex; padding-right: 45%; }
.tsf-foot-r { grid-column: 6; display: flex; align-items: center; gap: clamp(14px, 2.6cqw, 32px); white-space: nowrap; }
.tsf-foot-r a { color: var(--tsf-body); transition: color .2s; }
.tsf-foot-r a:hover { color: var(--tsf-ink); }
.tsf-top { grid-column: 7; justify-self: center; width: 16px; height: 16px; display: grid; place-items: center; color: var(--tsf-ink); transition: transform .6s cubic-bezier(.3, 1.5, .4, 1); }
.tsf-top svg { width: 16px; height: 16px; }
.tsf-top:hover { transform: translateY(-3px) scale(1.2); }

@keyframes tsf-blink { 50% { opacity: 0; } }
@keyframes tsf-march { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: -200% 0; mask-position: -200% 0; } }
@keyframes tsf-ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes tsf-bump { 0% { transform: translateY(0); } 35% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
@keyframes tsf-pop { 0% { transform: scale(1); } 40% { transform: scale(.82); } 100% { transform: scale(1); } }

/* Narrow: one column, index scrolls sideways, ticket stacks */
@container (max-width: 860px) {
  .tsf-grid { grid-template-columns: var(--rail) minmax(0, 1fr) var(--rail); grid-template-rows: none; padding-top: 20px; }
  .tsf-vl, .tsf-hl { display: none; }
  .tsf-nav, .tsf-hero, .tsf-side, .tsf-ticket { grid-column: 2; grid-row: auto; }
  .tsf-nav { overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .tsf-nav ol { display: flex; }
  .tsf-nav li { border-bottom: 0; border-right: 1px solid var(--line); flex: none; }
  .tsf-nav-item { padding: 0 12px; white-space: nowrap; }
  .tsf-nav-item:hover, .tsf-nav-item[aria-current] { padding-left: 12px; }
  .tsf-nav-bar { display: none; }
  .tsf-nav-item[aria-current] { box-shadow: inset 0 -2px var(--tsf-ink); }
  .tsf-hero { padding-top: 28px; padding-bottom: 36px; }
  .tsf-side { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 24px; }
  .tsf-links { padding-left: 14px; }
  .tsf-ticket { grid-template-columns: clamp(44px, 12cqw, 72px) minmax(0, 1fr); }
  .tsf-stub-tip { display: none; }
  .tsf-main { grid-template-columns: minmax(0, 1fr); }
  .tsf-stats, .tsf-blurb, .tsf-word { grid-column: 1; }
  .tsf-stats { padding-left: 16px; padding-right: 16px; }
  .tsf-gutcell { display: none; }
  .tsf-blurb { border-top: 1px solid var(--oline); padding-left: 16px; padding-right: 16px; }
  .tsf-foot { grid-column: 1 / -1; grid-row: auto; display: flex; flex-wrap: wrap; gap: 12px 20px; padding: 20px var(--rail); }
  .tsf-foot-l { display: none; }
  .tsf-foot-r { flex: 1; flex-wrap: wrap; gap: 12px 20px; }
  .tsf-foot-r .tsf-dots { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tsf-dots, .tsf-caret, .tsf-pulse::after, .tsf-bump, .tsf-pop { animation: none; }
  .tsf-h > span > span, .tsf-odo-s, .tsf-stub, .tsf-cta::before, .tsf-nav-bar, .tsf-link, .tsf-top { transition: none; }
}

/* Optional art band (data-slot="art"): full-width, ink panel above the grid. */
.tsf-art { position: relative; background: var(--tsf-aink); color: var(--tsf-bg); border-bottom: 1px solid var(--tsf-line); }
.tsf-art > * { margin: 0; }
.tsf-art figcaption { display: flex; justify-content: space-between; gap: 16px; padding: 12px clamp(16px, 2.5cqw, 36px); border-top: 1px solid color-mix(in srgb, var(--tsf-bg) 22%, transparent); font-size: var(--text-caption, 12px); letter-spacing: -0.033em; text-transform: uppercase; color: color-mix(in srgb, var(--tsf-bg) 70%, transparent); line-height: 1.3; }
@container (max-width: 700px) { .tsf-art ascii-art { aspect-ratio: 4 / 3 !important; } }

/* Background mode: the art runs behind the whole footer, which flips to the ink palette.
   The ticket turns transparent so the picture shows through it (its ink turns light). */
ticket-stub-footer[data-art="background"] {
  --tsf-bg: var(--color-off-black, #242424);
  --tsf-ink: var(--color-parchment, #f6f3f1);
  --tsf-body: #e6e2de;
  --tsf-muted: #d9d5d1;
  --tsf-line: rgba(246, 243, 241, .22);
  --tsf-ticket: transparent;
  --tsf-deep: transparent;
  --tsf-aink: var(--color-parchment, #f6f3f1);
}
ticket-stub-footer[data-art="background"] .tsf-grid { z-index: 1; }
.tsf-art--bg { position: absolute; inset: 0; z-index: 0; background: none; border: 0; pointer-events: none; }
.tsf-art--bg ascii-art { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
ticket-stub-footer[data-art="background"] .tsf-stat-c { color: var(--tsf-muted); }

/* Optional hanging badge (data-slot="badge", e.g. a <lanyard-badge> + its CTA).
   Wide: its own cell over the side column's right edge, spanning the top band
   and the content row, so the strap comes down from the footer's top edge in
   front of the globe and the card hangs beside the link columns. The stage is
   wider than the cell (and overflows the clipped right edge) so a dragged strap
   is not cut; only the card and the CTA take the pointer. */
.tsf-badge {
  --tsf-badge-stage: 480px;
  grid-column: 6 / 8; grid-row: 1 / 3;
  justify-self: end; align-self: start;
  position: relative; z-index: 2;
  width: 300px;
  display: flex; flex-direction: column; align-items: center;
  padding-bottom: clamp(20px, 2.4cqw, 30px);
  pointer-events: none;
}
.tsf-badge lanyard-badge { --lyd-height: var(--tsf-badge-stage); flex: none; width: 560px; margin: 0 -130px; overflow: visible; pointer-events: none; }
.tsf-badge .lyd-card,
.tsf-badge > a,
.tsf-badge > button { pointer-events: auto; }
.tsf-badge > a,
.tsf-badge > button { margin-top: 4px; }
/* Link columns keep to the left of the badge: two snug columns, or one. */
@container (min-width: 1100px) {
  ticket-stub-footer[data-badge] .tsf-links { grid-template-columns: repeat(var(--cols, 2), max-content); column-gap: clamp(24px, 2.4cqw, 36px); }
}
@container (min-width: 1100px) and (max-width: 1419.98px) {
  ticket-stub-footer[data-badge] .tsf-links { grid-template-columns: max-content; }
}
/* Mid widths: no room beside the links, so the badge gets a band of its own
   between the content row and the ticket, hung from that row's hairline. */
@container (min-width: 860.02px) and (max-width: 1099.98px) {
  ticket-stub-footer[data-badge] .tsf-grid { grid-template-rows: clamp(32px, 5cqw, 72px) auto auto auto clamp(14px, 1.7cqw, 24px) auto; }
  .tsf-badge { --tsf-badge-stage: 440px; grid-column: 4 / 7; grid-row: 3; justify-self: stretch; width: auto; padding-bottom: var(--rail); }
  .tsf-badge lanyard-badge { width: 100%; margin: 0; }
}
/* Stacked: right after the headline block, hung from a hairline. */
@container (max-width: 860px) {
  .tsf-badge { --tsf-badge-stage: 420px; grid-column: 2; grid-row: auto; justify-self: stretch; width: auto; border-top: 1px solid var(--line); padding-bottom: 32px; }
  .tsf-badge lanyard-badge { width: 100%; margin: 0; }
}

/* ticket-surface="plain": no coloured ticket. The ticket row keeps its layout, hairlines, stub hatch and text,
   but sits directly on the footer surface (the page parchment), like the simple.html footer. */
ticket-stub-footer[ticket-surface="plain"] { --tsf-ticket: transparent; --tsf-deep: transparent; }