/* The shared header and footer (tools/chrome.py), on every page: site pages, home, 404 and the forum archive.
   Same world as the splash: black ground, Arial in wide-tracked caps, one red. Classes are c- prefixed so they never
   collide with a page's own styles (the home and forum carry their own sheets). 2026-10-03. */
.c-bar, .c-foot { --c-ink: #eaeaea; --c-soft: #a9a4a0; --c-dim: #8a8580; --c-red: #e3141c; --c-red-btn: #c4121a; --c-line: #1c1c1c;
  --c-ease: cubic-bezier(.16, 1, .3, 1); font: 15px/1.6 Arial, Helvetica, sans-serif; letter-spacing: normal; text-align: left; color: var(--c-ink); }
.c-bar *, .c-foot * { box-sizing: border-box; }
.c-in { width: 100%; max-width: 1100px; margin: 0 auto; padding-inline: 20px; }

/* ---------- header: sticky, solid, one row ---------- */
.c-bar { position: sticky; top: 0; z-index: 20; width: 100%; background: #000; border-bottom: 1px solid var(--c-line);
  padding-top: env(safe-area-inset-top, 0px); }
.c-bar .c-in { display: flex; align-items: center; gap: 28px; height: 64px; }
/* The logo fills with blood on hover: a red layer masked to the logo's own letterforms rises from the bottom (dark
   where it pools, bright at the surface) and drains back out when the pointer leaves. Pressing it pushes it in.
   Devin's idea, 2026-10-03. Reduced motion gets the colour change with no rise (the transitions are switched off). */
.c-brand { position: relative; display: block; flex: none; transition: transform .3s var(--c-ease); }
.c-brand img { display: block; width: 78px; height: auto; }
.c-brand::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, #5c0007 0%, #a3000e 45%, #e3141c 92%, #ff4d52 100%);
  -webkit-mask: url("/assets/logo-mark.webp") center / 100% 100% no-repeat; mask: url("/assets/logo-mark.webp") center / 100% 100% no-repeat;
  clip-path: inset(100% 0 0 0); transition: clip-path .7s cubic-bezier(.55, 0, .45, 1); }
.c-brand:hover::after, .c-brand:focus-visible::after { clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(.3, .1, .2, 1); }
.c-brand:hover { transform: translateY(-1px); }
.c-brand:active { transform: translateY(1px) scale(.92); transition-duration: .07s; }
.c-brand:active::after { clip-path: inset(0 0 0 0); filter: brightness(.8); transition-duration: .07s; }
.c-nav { display: flex; gap: 4px 26px; margin-left: auto; }
.c-nav a, .c-sheet a { color: var(--c-soft); text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  transition: color .2s var(--c-ease), border-color .2s var(--c-ease), transform .2s var(--c-ease); }
.c-nav a { display: inline-block; padding: 22px 0 20px; border-bottom: 2px solid transparent; }
.c-nav a:hover { color: #fff; border-color: #5a1013; }
.c-nav a:active { transform: translateY(1px); opacity: .8; transition-duration: .06s; }
.c-nav a[aria-current] { color: #fff; border-color: var(--c-red); }
.c-cta { flex: none; display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 3px; background: var(--c-red-btn); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 4px 14px rgba(120, 0, 6, .45); transition: background .2s var(--c-ease), transform .2s var(--c-ease), box-shadow .2s var(--c-ease); }
.c-cta:hover { background: var(--c-red); transform: translateY(-1px); box-shadow: 0 7px 18px rgba(150, 0, 8, .5); }
.c-cta:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(120, 0, 6, .45); transition-duration: .06s; }
/* On /join the page's own Send button is the one red action, so the header's steps back. */
.c-cta.is-here { background: transparent; box-shadow: inset 0 0 0 1px var(--c-red); }
.c-bar :focus-visible, .c-foot :focus-visible { outline: 2px solid var(--c-red); outline-offset: 3px; border-radius: 2px; }

/* Phone menu: a <details>, so it opens without any script and keyboard and screen readers get it for free. */
.c-menu { display: none; }
.c-menu summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; cursor: pointer; list-style: none; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; user-select: none; }
.c-menu summary::-webkit-details-marker { display: none; }
.c-burger { position: relative; display: grid; gap: 4px; width: 18px; }
.c-burger i { display: block; height: 2px; background: currentColor; border-radius: 1px; transition: transform .25s var(--c-ease), opacity .2s var(--c-ease); }
.c-menu[open] .c-burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.c-menu[open] .c-burger i:nth-child(2) { opacity: 0; }
.c-menu[open] .c-burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.c-menu summary:active { opacity: .7; }
.c-menu:not([open]) .c-sheet { display: none; }
.c-sheet { position: absolute; left: 0; right: 0; top: 100%; display: grid; padding: 8px 20px 20px; background: #050505; border-bottom: 1px solid var(--c-line);
  box-shadow: 0 18px 30px rgba(0, 0, 0, .6); animation: c-drop .28s var(--c-ease) both; }
@keyframes c-drop { from { opacity: 0; transform: translateY(-6px); clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.c-sheet a { display: flex; align-items: center; min-height: 52px; font-size: 13px; border-bottom: 1px solid #141414; }
.c-sheet a:hover, .c-sheet a[aria-current] { color: #fff; }
.c-sheet a[aria-current]::before { content: ""; width: 14px; margin-right: 10px; border-top: 2px solid var(--c-red); }
.c-sheet a:active { opacity: .7; }
.c-sheet .c-sheet-discord { gap: 10px; border-bottom: 0; color: #fff; }
.c-sheet-discord svg { width: 20px; height: 20px; flex: none; }

@media (max-width: 760px) {
  .c-bar .c-in { gap: 14px; height: 58px; }
  .c-brand img { width: 66px; }
  .c-nav { display: none; }
  .c-cta { margin-left: auto; padding: 9px 14px; }
  .c-menu { display: block; }
}

/* ---------- footer: the site map, the live Discord line, the mark ---------- */
.c-foot { width: 100%; margin-top: 64px; border-top: 1px solid var(--c-line); background: #000 url("/assets/splash-ripple.webp") center bottom / auto 64px no-repeat; }
.c-note { max-width: 1100px; margin: 0 auto; padding: 26px 20px 0; font-size: 13px; color: var(--c-dim); }
.c-note a { color: var(--c-soft); }
.c-foot-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px 48px; padding-block: 40px 28px; }
.c-foot-brand p { margin: 12px 0 0; max-width: 36ch; color: var(--c-soft); font-size: 14px; }
.c-foot-brand .c-brand img { width: 96px; }
.c-pulse { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--c-soft); font-variant-numeric: tabular-nums; }
.c-pulse[hidden] { display: none; }
.c-pulse .dot { width: 8px; height: 8px; border-radius: 50%; background: #3fb950; animation: c-ping 2.4s var(--c-ease) infinite; }
.c-pulse .dot.off { background: #555; animation: none; }
@keyframes c-ping { 0% { box-shadow: 0 0 0 0 rgba(63, 185, 80, .45); } 70%, 100% { box-shadow: 0 0 0 8px rgba(63, 185, 80, 0); } }
.c-discord { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 11px 18px 11px 14px; border-radius: 3px; color: #fff; text-decoration: none;
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; box-shadow: inset 0 0 0 1px #3a3a3a;
  transition: background .2s var(--c-ease), box-shadow .2s var(--c-ease), transform .2s var(--c-ease); }
.c-discord svg { width: 18px; height: 18px; flex: none; }
.c-discord:hover { background: #151515; box-shadow: inset 0 0 0 1px var(--c-red); transform: translateY(-1px); }
.c-discord:active { transform: translateY(1px); transition-duration: .06s; }
.c-foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.c-foot-cols h2 { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #fff; }
.c-foot-cols h2::after { content: none; }
.c-foot-cols ul { list-style: none; margin: 0; padding: 0; }
.c-foot-cols a { display: inline-block; padding: 6px 0; color: var(--c-soft); text-decoration: none; font-size: 14px; transition: color .15s var(--c-ease), transform .15s var(--c-ease); }
.c-foot-cols a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--c-red); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.c-foot-cols a:active { transform: translateY(1px); opacity: .7; }
.c-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding-block: 16px 72px;
  border-top: 1px solid #111; font-size: 11px; letter-spacing: .14em; color: var(--c-dim); }
.c-made { margin: 0; }
.c-up { color: var(--c-dim); text-decoration: none; padding: 6px 0; transition: color .15s var(--c-ease); }
.c-up:hover { color: #fff; }
.c-up::after { content: " \2191"; }
.c-foot .heart { display: inline-block; color: #e25563; animation: c-beat 2.4s ease-in-out infinite; }
@keyframes c-beat { 0%, 40%, 100% { transform: scale(1); } 8% { transform: scale(1.18); } 16% { transform: scale(1); } 24% { transform: scale(1.12); } }
.c-foot .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 720px) {
  .c-foot-grid { grid-template-columns: 1fr; padding-block: 32px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .c-sheet, .c-pulse .dot, .c-foot .heart { animation: none; }
  .c-bar *, .c-foot * { transition: none !important; }
}

/* ---------- shared: the video player (site.js), used on /clips and the home page ----------
   A poster that is one big button: tap anywhere and the real <video> loads in its place and plays. Nothing downloads
   until then (the posters are lazy images), so a page of twenty clips costs a page of thumbnails. 2026-10-03. */
.vplay { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: #000; color: #fff; text-decoration: none; cursor: pointer; }
.vplay img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.16, 1, .3, 1), filter .3s ease; }
.vplay::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .05), rgba(0, 0, 0, .45)); transition: opacity .3s ease; }
.vplay-icon { position: absolute; left: 50%; top: 50%; z-index: 2; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%;
  background: rgba(196, 18, 26, .92); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); transition: transform .25s cubic-bezier(.16, 1, .3, 1), background .2s ease; }
.vplay-icon::after { content: ""; position: absolute; left: 27px; top: 21px; border-left: 22px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.vplay-dur { position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 3px 7px; border-radius: 3px; background: rgba(0, 0, 0, .75);
  font: 700 12px/1.3 Arial, Helvetica, sans-serif; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.vplay:hover .vplay-icon, .vplay:focus-visible .vplay-icon { transform: scale(1.1); background: #e3141c; }
.vplay:hover::before { opacity: .6; }
.vplay:active .vplay-icon { transform: scale(.94); transition-duration: .07s; }
.vplay:focus-visible { outline: 2px solid #e3141c; outline-offset: 3px; }
.vplay.is-loading .vplay-icon { animation: vspin 1s linear infinite; }
@keyframes vspin { to { transform: rotate(360deg); } }
.vframe-video { display: block; width: 100%; height: 100%; background: #000; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .vplay img, .vplay-icon { transition: none; } .vplay.is-loading .vplay-icon { animation: none; } }

/* ---------- shared: footer copy-invite button ---------- */
.c-invite { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; }
.c-invite .c-discord { margin-top: 0; }
.c-copy { padding: 10px 2px; border: 0; background: none; color: var(--c-soft); cursor: pointer; font: 700 11px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--c-red); text-underline-offset: .35em;
  transition: color .15s var(--c-ease), text-decoration-thickness .15s var(--c-ease); }
.c-copy:hover { color: #fff; text-decoration-thickness: 2px; }
.c-copy:active { opacity: .7; }
.c-copy.is-done { color: #8fe0a0; text-decoration-color: rgba(63, 185, 80, .6); }

/* ---------- shared: in-page zoom for images (site.js; the 2ezHouse brackets) ----------
   A native <dialog>: Esc closes it, focus stays inside while open and returns to the bracket after. */
.lightbox { width: min(96vw, 1440px); max-width: none; max-height: 94dvh; margin: auto; padding: 0; border: 1px solid #262626; border-radius: 6px;
  background: #050505; color: #eaeaea; overflow: hidden; }
.lightbox::backdrop { background: rgba(0, 0, 0, .86); }
.lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; animation: lb-in .3s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes lb-in { from { opacity: 0; transform: scale(.97); } }
.lightbox img { display: block; width: 100%; height: 100%; max-height: calc(94dvh - 56px); object-fit: contain; background: #000; }
.lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px 10px 18px; border-top: 1px solid #1c1c1c;
  font: 14px/1.4 Arial, Helvetica, sans-serif; }
.lightbox-bar p { margin: 0; color: #a9a4a0; }
.lightbox-close { flex: none; padding: 9px 16px; border: 0; border-radius: 3px; background: transparent; box-shadow: inset 0 0 0 1px #3a3a3a; color: #fff; cursor: pointer;
  font: 700 11px/1 Arial, Helvetica, sans-serif; letter-spacing: .2em; text-transform: uppercase; transition: background .2s ease, box-shadow .2s ease; }
.lightbox-close:hover { background: #151515; box-shadow: inset 0 0 0 1px #e3141c; }
.lightbox-close:active { transform: translateY(1px); }
.lightbox-close:focus-visible { outline: 2px solid #e3141c; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .lightbox[open] { animation: none; } }