/* 11-02 later, the owner's "Compete with LUMA.com": Hype-made versions of what Luma has and Hype lacked.
   Page themes (a backdrop + a title font), printable name badges, Home's second door (a crypto event), online attendance.
   Patterns only: no Luma themes, art, fonts or wording. Loaded last; remove its <link> to drop all of it. */

/* Home: a quieter door under the crypto drop row */
.start-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; max-width: 640px; margin: -12px 0 24px; color: var(--ink2); font-size: 14px }
.start-alt .link { color: var(--ink); font-weight: 650 }

/* The drop page theme: a backdrop behind the top of the page only, fading out before the long text, from the drop's own colour (--th).
   Low alpha over --bg keeps the title and the going card far above AA in light and dark. */
.watch[class*=" th-"] { position: relative; isolation: isolate }
.watch[class*=" th-"]::before { content: ""; position: absolute; z-index: -1; inset: -16px 0 auto; height: min(640px, 90vh); pointer-events: none; border-radius: 0 0 32px 32px;
  -webkit-mask-image: linear-gradient(#000 35%, transparent); mask-image: linear-gradient(#000 35%, transparent) }
.watch.th-aurora::before { background: radial-gradient(55% 70% at 12% 18%, hsl(var(--th) 70% 55% / .30), transparent 62%), radial-gradient(45% 60% at 88% 8%, hsl(calc(var(--th) + 70) 70% 55% / .24), transparent 62%), radial-gradient(55% 55% at 50% 85%, hsl(calc(var(--th) - 60) 70% 55% / .18), transparent 66%) }
.watch.th-grid::before { background: linear-gradient(hsl(var(--th) 45% 50% / .20) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, hsl(var(--th) 45% 50% / .20) 1px, transparent 1px) 0 0 / 28px 28px }
.watch.th-dots::before { background: radial-gradient(hsl(var(--th) 50% 50% / .38) 1.6px, transparent 1.8px) 0 0 / 18px 18px }
.watch.th-rays::before { background: repeating-conic-gradient(from -90deg at 50% -10%, hsl(var(--th) 60% 55% / .20) 0deg 5deg, transparent 5deg 15deg) }
.watch.th-waves::before { background: repeating-radial-gradient(circle at 50% 115%, hsl(var(--th) 60% 55% / .22) 0 2px, transparent 2px 24px) }
.watch.th-confetti::before { background: radial-gradient(circle at 12% 18%, hsl(var(--th) 80% 58% / .55) 0 4px, transparent 4.5px), radial-gradient(circle at 62% 32%, hsl(calc(var(--th) + 90) 80% 58% / .5) 0 3px, transparent 3.5px), radial-gradient(circle at 36% 72%, hsl(calc(var(--th) + 180) 80% 58% / .5) 0 5px, transparent 5.5px), radial-gradient(circle at 86% 80%, hsl(calc(var(--th) + 270) 80% 58% / .5) 0 3.5px, transparent 4px); background-size: 150px 150px }
/* only the aurora moves, slowly, on the compositor (transform), and never under reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .watch.th-aurora::before { animation: hype-drift 16s ease-in-out infinite alternate }
}
/* a vertical drift only: a scale would push the backdrop past the page edge on phones (horizontal overflow) */
@keyframes hype-drift { to { transform: translate3d(0, -14px, 0) } }

/* the title font: system fonts only, nothing downloaded */
.watch.tf-serif .w-title { font-family: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-weight: 700; letter-spacing: -.01em }
.watch.tf-mono .w-title { font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; letter-spacing: -.02em }
.watch.tf-round .w-title { font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif; letter-spacing: -.02em }
.watch.tf-wide .w-title { font-family: "Arial Black", "Helvetica Neue", system-ui, sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.1 }

/* Create: the theme swatches (same size and ring as the cover looks; ink on a quiet tint, so the names read in both themes) */
.looks .look-r .art.th-sw { color: var(--ink); background-color: var(--bg2); box-shadow: inset 0 0 0 1px var(--line) }
.looks .look-r .art.th-sw .art-t { text-shadow: none; font-weight: 650 }
.looks .look-r input:checked + .art.th-sw { box-shadow: 0 0 0 3px var(--hype) }
.art.th-sw.th-aurora { background-image: radial-gradient(70% 90% at 15% 20%, hsl(var(--h) 70% 55% / .45), transparent 65%), radial-gradient(60% 80% at 90% 10%, hsl(calc(var(--h) + 70) 70% 55% / .35), transparent 65%) }
.art.th-sw.th-grid { background-image: linear-gradient(hsl(var(--h) 45% 50% / .35) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--h) 45% 50% / .35) 1px, transparent 1px); background-size: 14px 14px }
.art.th-sw.th-dots { background-image: radial-gradient(hsl(var(--h) 50% 50% / .55) 1.4px, transparent 1.6px); background-size: 10px 10px }
.art.th-sw.th-rays { background-image: repeating-conic-gradient(from -90deg at 50% -10%, hsl(var(--h) 60% 55% / .35) 0deg 5deg, transparent 5deg 15deg) }
.art.th-sw.th-waves { background-image: repeating-radial-gradient(circle at 50% 120%, hsl(var(--h) 60% 55% / .38) 0 2px, transparent 2px 12px) }
.art.th-sw.th-confetti { background-image: radial-gradient(circle at 20% 25%, hsl(var(--h) 80% 58% / .7) 0 3px, transparent 3.5px), radial-gradient(circle at 70% 40%, hsl(calc(var(--h) + 120) 80% 58% / .7) 0 2.5px, transparent 3px), radial-gradient(circle at 45% 75%, hsl(calc(var(--h) + 240) 80% 58% / .7) 0 3px, transparent 3.5px); background-size: 48px 48px }

/* the dashboard: online attendance under the Door box */
.online-joins:not(:empty) { margin-top: 16px }
.online-joins h3 { margin: 0 0 6px; font-size: 15px }

/* Name badges: one per person going; two to a sheet in print */
.badges-note { margin: 0 0 16px }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px }
.badge { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; min-width: 0; min-height: 216px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); color: var(--ink); break-inside: avoid; page-break-inside: avoid }
.bd-t { display: flex; justify-content: space-between; gap: 12px; min-width: 0; color: var(--ink2); font-size: 13px }
.bd-ev { font-weight: 650; overflow-wrap: anywhere }
.bd-when { white-space: nowrap }
.bd-name { display: grid; align-content: center; gap: 2px; min-width: 0 }
.bd-name b { font-size: 34px; line-height: 1.12; letter-spacing: -.02em; overflow-wrap: anywhere }
.bd-name span { color: var(--ink2); font-size: 14px; overflow-wrap: anywhere }
.bd-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px }
.bd-qr { width: 88px; height: 88px; padding: 4px; border-radius: 6px; background: #FFFFFF }
.bd-qr svg { display: block; width: 100%; height: 100% }
.bd-code { color: var(--ink2); font-size: 13px; font-variant-numeric: tabular-nums }
@media print {
  .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25in }
  .badge { min-height: 3in; border-color: #BDBDBD; background: #FFFFFF; color: #000000 }
  .bd-t, .bd-name span, .bd-code { color: #333333 }
  .watch[class*=" th-"]::before { display: none }
}