/* the1nteger.tv: the 1NT.tv hub look (#nthub on 1nt.tv). No build step.

   Classes for pages (all guarded with :not(.r2g6 *) so nothing here reaches into the Road to GTA 6 snippet,
   which uses .hero/.kicker/.chip/.wrap of its own):
     .page                 centred container, max 1080 px, 16 px gutters on phones (28 px from 640 px)
     main.page--challenge  same container with no padding, so a full-bleed embed (the .r2g6 snippet) sits edge to edge
     .hero                 page intro block: big h1, muted lead paragraph, .actions row of buttons
     .card                 glass card (--card fill, thin --line border, 22 px radius, backdrop blur);
                           set --c on it (e.g. style="--c:var(--c2)") to tint its hover glow
     .grid                 responsive card grid, auto-fill columns min 260 px
     .btn                  pill button/link; .btn--primary (white, the hub's CTA), .btn--ghost (outline); .btn--sm smaller
     .kicker               small uppercase label above a heading
     .muted                muted text colour
     .chip                 small rounded tag / link pill
     .actions              wrapping row of buttons
     .notice               the notice banner / next stream strip js/challenges.js puts first in <main> (from /admin/)
     .section              vertical rhythm between blocks; .section > h2 is the section title
     .bg + .blob.b1/.b2/.b3  the slow drifting blurred colour blobs (fixed, behind everything; header partial adds them)
   Header/footer: .site-header, .site-nav, .brand, .site-footer (from partials/, copied in by tools/sync.js). */

/* DM Sans, variable 100–1000 (SIL Open Font License, see /fonts/OFL.txt). Self-hosted. */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url(/fonts/dm-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url(/fonts/dm-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #07060b;
  --ink: #f2f0f7;
  --muted: #a49fb3;
  --line: rgba(255, 255, 255, .10);
  --card: rgba(20, 17, 30, .62);
  --c1: #e8e8ee;   /* The 1nteger */
  --c2: #ff4a4a;   /* Way of the Pigeon */
  --c3: #8b5cf6;   /* Collektory */
  --faint: #6f6a7e;
  --font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gut: 16px;
  --r: 22px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
@media (min-width: 640px) { :root { --gut: 28px } }

/* Base (never inside .r2g6) */
*:not(.r2g6 *), *:not(.r2g6 *)::before, *:not(.r2g6 *)::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; background: var(--bg) }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden }
:where(img, svg, video, iframe):not(.r2g6 *) { display: block; max-width: 100% }
:where(img):not(.r2g6 *) { height: auto }
:where(a):not(.r2g6 *) { color: inherit }
:where(h1, h2, h3):not(.r2g6 *) { margin: 0; color: var(--ink); font-family: inherit; font-weight: 800; letter-spacing: -.02em; line-height: 1.08 }
:where(h1):not(.r2g6 *) { font-size: clamp(34px, 6vw, 58px); letter-spacing: -.03em; line-height: 1.02 }
:where(h2):not(.r2g6 *) { font-size: clamp(24px, 3.4vw, 34px) }
:where(h3):not(.r2g6 *) { font-size: 21px; font-weight: 750; letter-spacing: -.01em; line-height: 1.15 }
:where(p):not(.r2g6 *) { margin: 0 }
:focus-visible:not(.r2g6 *) { outline: 3px solid var(--c3); outline-offset: 3px; border-radius: 8px }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 10px; font-weight: 700; text-decoration: none }
.skip:focus { top: 12px }

/* Background blobs (from the hub: blur 90px, opacity .30, 26s alternate drift) */
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden }
.blob { position: absolute; width: 56vmax; height: 56vmax; border-radius: 50%; filter: blur(90px); opacity: .30; animation: nt-drift 26s ease-in-out infinite alternate; will-change: transform }
.blob.b1 { background: #5b5b6e; left: -18vmax; top: -22vmax }
.blob.b2 { background: var(--c2); right: -22vmax; top: 8vmax; opacity: .18; animation-duration: 31s; animation-delay: -8s }
.blob.b3 { background: var(--c3); left: 18vmax; bottom: -30vmax; opacity: .26; animation-duration: 36s; animation-delay: -15s }
@keyframes nt-drift { 0% { transform: translate(0, 0) scale(1) } 50% { transform: translate(6vmax, 4vmax) scale(1.12) } 100% { transform: translate(-4vmax, 7vmax) scale(.94) } }

/* Layout */
.page:not(.r2g6 *) { width: 100%; max-width: calc(1080px + 2 * var(--gut)); margin: 0 auto; padding: clamp(28px, 6vh, 64px) var(--gut) 56px; flex: 1 0 auto }
main.page--challenge:not(.r2g6 *) { max-width: 1080px; padding: 0 }
@media (min-width: 1112px) { main.page--challenge:not(.r2g6 *) { padding: 32px 0 48px } }
.section:not(.r2g6 *) { margin-top: clamp(40px, 7vh, 72px) }
.section:not(.r2g6 *) > h2 { margin-bottom: 18px }
.grid:not(.r2g6 *) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 18px }
.actions:not(.r2g6 *) { display: flex; flex-wrap: wrap; gap: 12px }

/* Hero */
.hero:not(.r2g6 *) { display: flex; flex-direction: column; gap: 14px; max-width: 760px }
.hero:not(.r2g6 *) > p { color: var(--muted); font-size: clamp(16px, 2vw, 19px) }
.hero:not(.r2g6 *) .actions { margin-top: 10px }
.hero:not(.r2g6 *) h1 span { background: linear-gradient(90deg, #fff, #cfc8e8 40%, #a78bfa 70%, #ff8a8a); -webkit-background-clip: text; background-clip: text; color: transparent }

/* Card (glass) */
.card:not(.r2g6 *) { --c: var(--c3); position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 24px 22px 22px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); overflow: hidden; isolation: isolate; transition: transform .35s var(--ease), border-color .3s, box-shadow .35s }
.card:not(.r2g6 *) p { color: var(--muted); font-size: 15.5px }
a.card:not(.r2g6 *) { text-decoration: none; color: inherit }
a.card:not(.r2g6 *):hover, a.card:not(.r2g6 *):focus-visible { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 26px 60px -24px color-mix(in srgb, var(--c) 70%, transparent); outline: none }

/* Text bits */
.kicker:not(.r2g6 *) { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--c, var(--c3)) 70%, #fff) }
.muted:not(.r2g6 *) { color: var(--muted) }
.chip:not(.r2g6 *) { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 13.5px; line-height: 1.3; text-decoration: none; background: rgba(255, 255, 255, .02); transition: color .2s, border-color .2s, background .2s }
a.chip:not(.r2g6 *):hover { color: var(--ink); border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .05) }

/* Buttons */
.btn:not(.r2g6 *) { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 12px 22px; border-radius: 999px; border: 1px solid transparent; font: 700 15px/1.2 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s, background .2s, border-color .2s }
.btn--primary:not(.r2g6 *) { background: #fff; color: #0b0a10; box-shadow: 0 10px 30px -10px rgba(255, 255, 255, .45) }
.btn--primary:not(.r2g6 *):hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 40px -12px rgba(167, 139, 250, .8) }
.btn--ghost:not(.r2g6 *) { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .18); color: var(--ink) }
.btn--ghost:not(.r2g6 *):hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .32); transform: translateY(-2px) }
.btn--sm:not(.r2g6 *) { min-height: 38px; padding: 8px 16px; font-size: 14px }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(7, 6, 11, .66); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line) }
.site-header__in { max-width: calc(1080px + 2 * var(--gut)); margin: 0 auto; padding: 10px var(--gut); display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand cta" "nav nav"; align-items: center; gap: 8px 12px }
.brand { grid-area: brand; display: inline-flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 18px; letter-spacing: -.01em; white-space: nowrap }
.brand img { width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); transition: transform .3s var(--ease) }
.brand:hover img { transform: rotate(-6deg) scale(1.05) }
.site-header__cta { grid-area: cta }
.site-nav { grid-area: nav; display: flex; flex-wrap: wrap; gap: 2px; margin: 0 -10px }
.site-nav a { padding: 7px 10px; border-radius: 10px; color: var(--muted); font-size: 15px; font-weight: 600; text-decoration: none; transition: color .15s, background .15s }
.site-nav a:hover { color: var(--ink); background: rgba(255, 255, 255, .05) }
.site-nav a[aria-current="page"] { color: var(--ink); background: rgba(255, 255, 255, .07) }
@media (min-width: 720px) {
  .site-header__in { grid-template-columns: auto 1fr auto; grid-template-areas: "brand nav cta"; padding-top: 12px; padding-bottom: 12px }
  .site-nav { justify-content: center; margin: 0 }
}

/* Footer */
.site-footer { position: relative; margin-top: auto; padding: 36px var(--gut) 40px; text-align: center; color: var(--faint); font-size: 12.5px; border-top: 1px solid var(--line) }
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 18px }
.site-footer__copy { max-width: 760px; margin: 0 auto; line-height: 1.8 }
.site-footer__copy a { color: #8d88a0; text-decoration: underline; text-underline-offset: 3px }
.site-footer__copy a:hover { color: var(--ink) }

/* ---- Pages (Task 3): home, challenges hub, live, privacy, terms, 404 ----
   .video                 16:9 frame for a YouTube iframe
   .challenge-card        challenge card (status chip + dates row, title, tagline, optional .countdown, button at the bottom)
   .chip--live/--upcoming/--finished  status chips (live has a pulsing red dot)
   .challenge-card__cover box art beside the title (in .challenge-card__head, linked to Collektory)
   .countdown             label on its own line, ticking "2d 03h 04m 05s" under it
   .card__go              "Go →" line at the bottom of a link card
   .post-card             latest-post card with an optional cover image
   .schedule              stream-time rows on /live/
   .prose                 readable long text (privacy, terms)
   .wasted                the 404 heading */
.video:not(.r2g6 *) { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #000 }
.video:not(.r2g6 *) iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.section__more:not(.r2g6 *) { margin-top: 16px }

.challenge-card:not(.r2g6 *) .challenge-card__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px }
.challenge-card__dates:not(.r2g6 *) { font-size: 14px }
.challenge-card__img:not(.r2g6 *) { margin: -24px -22px 4px; width: calc(100% + 44px); max-width: none; aspect-ratio: 16 / 9; object-fit: cover }
.challenge-card__head:not(.r2g6 *) { display: flex; align-items: flex-start; gap: 14px }
.challenge-card__text:not(.r2g6 *) { display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.challenge-card__cover-link:not(.r2g6 *) { flex: none; display: block; width: 76px; border-radius: 10px; line-height: 0 }
.challenge-card__cover-link:not(.r2g6 *):focus-visible { outline: 2px solid var(--c); outline-offset: 3px }
.challenge-card__cover:not(.r2g6 *) { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: var(--line); box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .9) }
@media (min-width: 480px) { .challenge-card__cover-link:not(.r2g6 *) { width: 92px } }
.challenge-card__actions:not(.r2g6 *), .card__go:not(.r2g6 *) { margin-top: auto; padding-top: 6px }
.card__go:not(.r2g6 *) { font-weight: 700; font-size: 15px; color: var(--ink) }

.chip--live:not(.r2g6 *) { color: #ffd6d6; border-color: color-mix(in srgb, var(--c2) 55%, transparent); background: color-mix(in srgb, var(--c2) 14%, transparent); font-weight: 700 }
.chip--live:not(.r2g6 *)::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c2); box-shadow: 0 0 0 0 var(--c2); animation: nt-pulse 1.8s ease-out infinite }
.chip--upcoming:not(.r2g6 *) { color: #ddd2ff; border-color: color-mix(in srgb, var(--c3) 55%, transparent); background: color-mix(in srgb, var(--c3) 12%, transparent); font-weight: 700 }
.chip--finished:not(.r2g6 *) { font-weight: 700 }
@keyframes nt-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 74, 74, .7) } 70% { box-shadow: 0 0 0 8px rgba(255, 74, 74, 0) } 100% { box-shadow: 0 0 0 0 rgba(255, 74, 74, 0) } }

.countdown:not(.r2g6 *) { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03) }
.card:not(.r2g6 *) .countdown { color: var(--muted); font-size: 13px }
.countdown__label:not(.r2g6 *) { display: block; max-width: 100%; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase }
.countdown__time:not(.r2g6 *) { color: var(--ink); font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap }

.post-card__cover:not(.r2g6 *) { margin: -24px -22px 4px; width: calc(100% + 44px); max-width: none; aspect-ratio: 16 / 9; object-fit: cover; background: var(--line) }

.schedule:not(.r2g6 *) { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column }
.schedule__row:not(.r2g6 *) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line) }
.schedule__row:not(.r2g6 *):first-child { padding-top: 0 }
.schedule__when:not(.r2g6 *) { font-weight: 800; color: var(--ink) }
.schedule__uk:not(.r2g6 *), .schedule__tz:not(.r2g6 *) { font-size: 13.5px }
.schedule__tz:not(.r2g6 *) { margin-top: 12px }
@media (min-width: 640px) { .schedule__row:not(.r2g6 *) { grid-template-columns: 220px minmax(0, 1fr) auto; align-items: baseline; gap: 16px } }
.schedule-card:not(.r2g6 *) a, .prose:not(.r2g6 *) a { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--c3) 70%, transparent); text-underline-offset: 3px }
.schedule-card:not(.r2g6 *) a:hover, .prose:not(.r2g6 *) a:hover { text-decoration-color: var(--ink) }

.prose:not(.r2g6 *) { max-width: 720px }
.prose:not(.r2g6 *) h2 { font-size: clamp(20px, 2.6vw, 24px); margin: 34px 0 10px }
.prose:not(.r2g6 *) p { color: #d3cfdd; margin: 0 0 12px }
.prose:not(.r2g6 *) p.muted { color: var(--muted); font-size: 15px }
.prose:not(.r2g6 *) code { font-size: .92em; padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, .07) }

.page--404:not(.r2g6 *) { display: flex; align-items: center }
.wasted:not(.r2g6 *) { font-size: clamp(56px, 14vw, 128px); color: #c8102e; text-shadow: 0 0 40px rgba(200, 16, 46, .45); letter-spacing: -.02em }

/* ---- Home extras: latest videos, community, showcase, reveal, back to top ----
   .section__head         h2 + a small button on one row (wraps on phones)
   .vnow                  title + "Watch on YouTube" under the main player
   .vgallery / .vthumb    three recent uploads as buttons (thumbnail, title, date) that swap into the player
   .community             about block: banner, avatar, the 1nteger's own line, CTAs; .tiles/.tile = watch/sleep/play/informed
   .showcase / .proj-card hub-style cards for Collektory and Way of the Pigeon (screenshot, logo, kicker, go row)
   .rv / .is-in           reveal-on-scroll (site.js adds them; off with reduced motion and never inside .r2g6)
   .to-top                floating "Back to top" button (site.js adds it on every page) */
.section__head:not(.r2g6 *) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 18px }
.vnow:not(.r2g6 *) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin-top: 14px }
.vnow:not(.r2g6 *)[hidden], .vgallery:not(.r2g6 *)[hidden] { display: none }
.vnow__text:not(.r2g6 *) { min-width: 0; flex: 1 1 260px }
.vnow:not(.r2g6 *) h3 { margin-top: 4px; font-size: clamp(17px, 2.2vw, 21px); overflow-wrap: anywhere }
.vgallery:not(.r2g6 *) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 18px }
@media (min-width: 720px) { .vgallery:not(.r2g6 *) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px } }
.vthumb:not(.r2g6 *) { --c: var(--c2); display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; min-width: 0; margin: 0; padding: 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s }
@media (min-width: 720px) { .vthumb:not(.r2g6 *) { grid-template-columns: minmax(0, 1fr); padding: 10px } }
.vthumb:not(.r2g6 *):hover, .vthumb:not(.r2g6 *):focus-visible { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 20px 44px -24px color-mix(in srgb, var(--c) 70%, transparent) }
.vthumb__pic:not(.r2g6 *) { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000 }
.vthumb__pic:not(.r2g6 *) img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease) }
.vthumb:not(.r2g6 *):hover .vthumb__pic img { transform: scale(1.05) }
.vthumb__play:not(.r2g6 *) { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(7, 6, 11, .72); border: 1px solid rgba(255, 255, 255, .3); font-size: 14px; color: #fff; transition: background .2s }
.vthumb:not(.r2g6 *):hover .vthumb__play { background: var(--c2) }
.vthumb__text:not(.r2g6 *) { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 2px 2px 4px }
.vthumb__title:not(.r2g6 *) { font-weight: 700; font-size: 14.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere }
.vthumb__date:not(.r2g6 *) { color: var(--muted); font-size: 12.5px }
.vthumb__cta:not(.r2g6 *) { color: color-mix(in srgb, var(--c2) 70%, #fff); font-size: 12.5px; font-weight: 700 }

.community:not(.r2g6 *) { position: relative; border-radius: var(--r); border: 1px solid var(--line); background: linear-gradient(120deg, rgba(139, 92, 246, .16), rgba(255, 74, 74, .10) 60%, rgba(255, 255, 255, .03)); overflow: hidden }
.community__banner:not(.r2g6 *) { display: block }
.community__banner:not(.r2g6 *) img { width: 100%; aspect-ratio: 800 / 162; object-fit: cover; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent) }
.community__body:not(.r2g6 *) { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 0 20px 24px; margin-top: -44px }
@media (min-width: 700px) { .community__body:not(.r2g6 *) { flex-direction: row; align-items: flex-start; gap: 26px; padding: 0 34px 32px; margin-top: -64px } }
.community__avatar:not(.r2g6 *) { flex: none; width: 96px; height: 96px; border-radius: 26px; border: 3px solid var(--bg); box-shadow: 0 18px 40px -16px rgba(255, 74, 74, .6); object-fit: cover; background: #000 }
@media (min-width: 700px) { .community__avatar:not(.r2g6 *) { width: 120px; height: 120px } }
.community__text:not(.r2g6 *) { display: flex; flex-direction: column; gap: 10px; min-width: 0 }
@media (min-width: 700px) { .community__text:not(.r2g6 *) { padding-top: 72px } }
.community__quote:not(.r2g6 *) { font-size: clamp(17px, 2.2vw, 21px); line-height: 1.5; color: var(--ink); font-weight: 500 }
.community__sig:not(.r2g6 *) { color: var(--muted); font-size: 13.5px }
.community__sig:not(.r2g6 *) a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px }
.community__sig:not(.r2g6 *) a:hover { color: var(--ink) }
.community__text:not(.r2g6 *) .actions { margin-top: 6px }
.tiles:not(.r2g6 *) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 18px }
@media (min-width: 540px) { .tiles:not(.r2g6 *) { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (min-width: 1000px) { .tiles:not(.r2g6 *) { grid-template-columns: repeat(4, minmax(0, 1fr)) } }
.tile:not(.r2g6 *) { gap: 8px; padding: 20px 18px }
.tile:not(.r2g6 *) h3 { font-size: 19px }
.tile:not(.r2g6 *) p { font-size: 14.5px }
.tile__icon:not(.r2g6 *) { font-size: 26px; line-height: 1 }

.showcase:not(.r2g6 *) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 18px }
.proj-card:not(.r2g6 *) { gap: 14px }
.proj-card:not(.r2g6 *)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at 50% 0%, color-mix(in srgb, var(--c) 26%, transparent), transparent 60%); opacity: 0; transition: opacity .35s }
.proj-card:not(.r2g6 *):hover::before, .proj-card:not(.r2g6 *):focus-visible::before { opacity: 1 }
.proj-card__shot:not(.r2g6 *) { margin: -24px -22px 2px; width: calc(100% + 44px); max-width: none; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; border-bottom: 1px solid var(--line) }
.proj-card__top:not(.r2g6 *) { display: flex; align-items: center; gap: 14px; min-width: 0 }
.proj-card__top:not(.r2g6 *) > div { min-width: 0 }
.proj-card__logo:not(.r2g6 *) { flex: none; width: 56px; height: 56px; border-radius: 16px; overflow: hidden; display: grid; place-items: center; background: #111; border: 1px solid rgba(255, 255, 255, .12) }
.proj-card__logo--light:not(.r2g6 *) { background: #f4efe6 }
.proj-card__logo:not(.r2g6 *) img { width: 100%; height: 100%; object-fit: cover }
.proj-card__go:not(.r2g6 *) { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--line); font-weight: 650; font-size: 14.5px }
.proj-card__go:not(.r2g6 *) i { font-style: normal; transition: transform .3s }
.proj-card:not(.r2g6 *):hover .proj-card__go i { transform: translateX(5px) }

main[tabindex="-1"]:not(.r2g6 *):focus { outline: none }

/* Reveal on scroll: hidden only once site.js has marked an element .rv, shown when it gets .is-in.
   The animation fills backwards only, so hover transforms on cards still work afterwards. */
.rv:not(.r2g6 *):not(.is-in) { opacity: 0; transform: translateY(22px) }
.rv.is-in:not(.r2g6 *) { animation: nt-reveal .75s var(--ease) var(--rv-delay, 0ms) backwards }
@keyframes nt-reveal { from { opacity: 0; transform: translateY(22px) } to { opacity: 1; transform: none } }

/* Back to top (site.js appends it to body on every page) */
.to-top:not(.r2g6 *) { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(20, 17, 30, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--ink); font: 700 14px/1.2 var(--font); cursor: pointer; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .8); opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s, border-color .2s, background .2s }
.to-top.is-shown:not(.r2g6 *) { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s, border-color .2s, background .2s }
.to-top:not(.r2g6 *):hover { border-color: color-mix(in srgb, var(--c3) 70%, transparent); background: rgba(40, 30, 64, .92) }
.to-top:not(.r2g6 *) span { font-size: 16px }

/* Motion */
@media (prefers-reduced-motion: reduce) {
  .blob, .chip--live:not(.r2g6 *)::before, .rv:not(.r2g6 *) { animation: none }
  .rv:not(.r2g6 *):not(.is-in) { opacity: 1; transform: none }
  .to-top:not(.r2g6 *) { transform: none }
  .vthumb:not(.r2g6 *):hover .vthumb__pic img { transform: none }
  *:not(.r2g6 *), *:not(.r2g6 *)::before, *:not(.r2g6 *)::after { transition: none !important; scroll-behavior: auto !important }
}

/* Notice banner and next stream (js/challenges.js renderNotice, js/home.js; set on /admin/) */
.notice:not(.r2g6 *) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 22px; padding: 12px 14px 12px 18px; border-radius: 16px; background: var(--card); border: 1px solid color-mix(in srgb, var(--c2) 45%, var(--line)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px) }
.notice:not(.r2g6 *) .notice__text { flex: 1 1 240px; font-weight: 650 }
.notice--next:not(.r2g6 *) { border-color: color-mix(in srgb, var(--c3) 45%, var(--line)) }
.notice--next:not(.r2g6 *) .notice__text { font-weight: 550; color: var(--muted) }