/* ============================================================================
   THOUGHT JAM — shared design system
   Extracted from brand/Thought Jam Site Brand Examples/ (the locked "Remastered"
   dark lane) into a reusable, token-driven system. Every page inherits this.
   Fonts are loaded per-page via <link> (Anton, Space Grotesk, IBM Plex Mono, Caveat).
   Improvements over the raw examples: real mobile menu, focus-visible states,
   self-hosted asset paths, honoured prefers-reduced-motion.
   ========================================================================== */

:root {
  /* ---- palette ---- */
  --tj-bg:        #201F25;   /* page background */
  --tj-panel:     #2A2A30;   /* raised cards / sections */
  --tj-panel-2:   #26262C;   /* deep panel */
  --tj-footer:    #1a191e;   /* footer / darkest */
  --tj-band:      #1c1b21;   /* marquee band */
  --tj-cream:     #F5F1E8;   /* primary light / display */
  --tj-paper:     #FBFAF7;   /* light-section paper */
  --tj-body:      #cfc9d6;   /* body text on dark */
  --tj-body-dim:  #b6b2bf;   /* secondary body on dark */
  --tj-on-panel:  #e7e3ee;   /* body on blueberry panel */
  --tj-muted:     #8A877F;   /* mono labels / muted */
  --tj-charcoal:  #3B3B43;   /* city-marquee ghost text */
  --tj-pink:      #FF5CA8;   /* hot accent (the brain) */
  --tj-pink-lt:   #FF9CC9;   /* pink hover / soft */
  --tj-berry:     #5B3E96;   /* blueberry (the dish) */
  --tj-berry-dk:  #3d2a66;   /* blueberry gradient end */
  --tj-berry-lt:  #d9cff0;   /* light blueberry text */

  /* ---- type ---- */
  --tj-display: 'Anton', 'Arial Narrow', sans-serif;
  --tj-sans:    'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tj-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --tj-hand:    'Caveat', 'Comic Sans MS', cursive;

  /* ---- rhythm ---- */
  --tj-gutter: clamp(20px, 5vw, 56px);   /* horizontal page padding */
  --tj-section-y: clamp(56px, 9vh, 90px);
  --tj-radius: 14px;
  --tj-radius-lg: 20px;
  --tj-hairline: rgba(245, 241, 232, .12);
  --tj-hairline-strong: rgba(245, 241, 232, .25);
  --tj-maxw: 1240px;
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--tj-bg);
  color: var(--tj-cream);
  font-family: var(--tj-sans);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, blockquote, figure { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--tj-pink); outline-offset: 3px; border-radius: 3px; }

/* ---------- keyframes ---------- */
@keyframes tj-wob   { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes tj-float { 0%,100% { transform: translateY(0); }  50% { transform: translateY(-10px); } }
@keyframes tj-marq     { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes tj-marq-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes tj-draw  { to { stroke-dashoffset: 0; } }

/* ---------- motion helpers ---------- */
.tj-coin-idle  { animation: tj-wob 6s ease-in-out infinite; transform-origin: 50% 50%; }
.tj-coin-float { animation: tj-float 6s ease-in-out infinite; }

/* reveal-on-scroll: JS adds .is-in; base hidden state only applies when JS marks the doc */
.tj-js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.tj-js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- layout helpers ---------- */
.tj-section { padding: var(--tj-section-y) var(--tj-gutter); }
.tj-section--flush { padding: 0 var(--tj-gutter) var(--tj-section-y); }
.tj-wrap { max-width: var(--tj-maxw); margin: 0 auto; }

/* ---------- type helpers ---------- */
.tj-eyebrow {
  font-family: var(--tj-mono);
  font-size: clamp(12px, 1.4vw, 15px);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--tj-pink);
}
.tj-label {
  font-family: var(--tj-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tj-muted);
}
.tj-h-mega {
  font-family: var(--tj-display);
  font-weight: 400;
  font-size: clamp(56px, 10vw, 132px);
  line-height: .84;
  text-transform: uppercase;
  margin: 0;
}
.tj-h-section {
  font-family: var(--tj-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 60px);
  line-height: .96;
  text-transform: uppercase;
  margin: 0;
}
.tj-lead {
  font-size: clamp(18px, 2.4vw, 26px);
  line-height: 1.5;
  color: var(--tj-body);
}

/* the signature offset-shadow display title */
.tj-title-shadow { text-shadow: 5px 0 0 rgba(255,92,168,.85), -4px 5px 0 rgba(91,62,150,.7); }

/* ---------- buttons ---------- */
.tj-btn {
  display: inline-block;
  font-family: var(--tj-mono);
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 17px 32px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.tj-btn--pink  { background: var(--tj-pink); color: var(--tj-bg); }
.tj-btn--pink:hover { background: var(--tj-pink-lt); }
.tj-btn--ghost { border-color: var(--tj-hairline-strong); color: var(--tj-cream); background: transparent; }
.tj-btn--ghost:hover { background: rgba(245,241,232,.08); }
.tj-btn--sm { padding: 10px 18px; letter-spacing: .04em; }

/* link hover */
.tj-lnk { transition: color .2s ease; }
.tj-lnk:hover { color: var(--tj-pink); }

/* progressive reveal (events archive): batch-hidden until "Show more" */
.tj-hide { display: none !important; }

/* ============================================================================
   NAV
   ========================================================================== */
.tj-nav {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(32,31,37,.9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(245,241,232,.1);
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--tj-gutter);
  gap: 16px;
}
.tj-brand { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.tj-brand img { width: 40px; height: 40px; }
.tj-brand .wm {
  font-family: var(--tj-display); font-size: 23px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--tj-cream);
}
.tj-nav-links {
  display: flex; align-items: center; gap: 30px;
  font-family: var(--tj-mono); font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tj-body);
}
.tj-nav-links a.is-active { color: var(--tj-pink); }
.tj-nav-links a:hover { color: var(--tj-pink); }

/* Get Involved dropdown */
.tj-nav-drop { position: relative; }
.tj-nav-drop > button {
  background: none; border: none; color: inherit; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  display: inline-flex; align-items: center; gap: 6px;
}
.tj-nav-drop-menu {
  position: absolute; top: calc(100% + 12px); right: 0;
  background: var(--tj-panel); border: 1px solid var(--tj-hairline);
  border-radius: 12px; padding: 10px; min-width: 210px;
  display: none; flex-direction: column; gap: 2px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.tj-nav-drop[data-open="true"] .tj-nav-drop-menu { display: flex; }
.tj-nav-drop-menu a {
  padding: 11px 14px; border-radius: 8px; color: var(--tj-body);
  letter-spacing: .1em;
}
.tj-nav-drop-menu a:hover { background: rgba(245,241,232,.06); color: var(--tj-pink); }

/* hamburger — hidden on desktop */
.tj-burger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 10px;
  min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
}
.tj-burger span { display: block; width: 24px; height: 2px; background: var(--tj-cream); border-radius: 2px; transition: transform .3s ease, opacity .3s ease; }
.tj-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tj-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.tj-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile drawer */
.tj-mobile {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1001;
  width: min(84vw, 360px);
  background: var(--tj-footer);
  border-left: 1px solid var(--tj-hairline);
  transform: translateX(100%); transition: transform .3s ease;
  padding: 84px 28px 28px; display: flex; flex-direction: column; gap: 4px;
  overflow-y: auto;
}
.tj-mobile.is-open { transform: translateX(0); }
.tj-mobile a {
  padding: 14px 6px; font-family: var(--tj-mono); font-size: 15px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tj-body);
  border-bottom: 1px solid var(--tj-hairline);
}
.tj-mobile a:hover, .tj-mobile a.is-active { color: var(--tj-pink); }
.tj-scrim {
  position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.55);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.tj-scrim.is-open { opacity: 1; pointer-events: auto; }

/* ============================================================================
   HERO
   ========================================================================== */
.tj-hero { position: relative; overflow: hidden; padding: clamp(72px,12vh,130px) var(--tj-gutter) clamp(64px,10vh,110px); }
.tj-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(.4); opacity: .32; }
.tj-hero__overlay { position: absolute; inset: 0; background: radial-gradient(90% 120% at 78% -10%, rgba(91,62,150,.55), transparent 55%), linear-gradient(0deg, rgba(32,31,37,.97), rgba(32,31,37,.5)); }
.tj-hero__inner { position: relative; max-width: 960px; }
.tj-hero__title { font-family: var(--tj-display); font-weight: 400; font-size: clamp(56px,10vw,138px); line-height: .84; text-transform: uppercase; margin: 0; }
.tj-hero__sub { font-size: clamp(18px,2.4vw,26px); line-height: 1.5; color: var(--tj-body); margin: 34px 0 0; max-width: 44ch; }
.tj-hero__cta { display: flex; gap: 16px; margin-top: 40px; flex-wrap: wrap; }

/* ============================================================================
   PARALLAX BAND — content scrolls over a fixed-feel blurred venue photo
   (the treatment Jon likes on realtalkphilosophy.org). JS translates the
   oversized blurred bg at a fraction of scroll speed; falls back to static.
   ========================================================================== */
.tj-parallax { position: relative; overflow: hidden; }
.tj-parallax__bg {
  position: absolute; inset: -18% 0;
  width: 100%; height: 136%;
  object-fit: cover;
  filter: blur(14px) saturate(1.25) brightness(.5);
  transform: translateY(0);
  will-change: transform;
}
.tj-parallax__tint { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(32,31,37,.55), rgba(91,62,150,.25)); }
.tj-parallax__inner { position: relative; padding: clamp(72px,14vh,140px) var(--tj-gutter); text-align: center; }
.tj-parallax__title { font-family: var(--tj-display); font-weight: 400; font-size: clamp(44px,7vw,88px); line-height: .9; text-transform: uppercase; margin: 0 auto; max-width: 16ch; }
.tj-parallax__sub { font-size: clamp(17px,2vw,22px); color: var(--tj-cream); opacity: .85; margin: 20px auto 0; max-width: 52ch; }

/* ============================================================================
   VIDEO EMBED — click-to-load YouTube (poster first: fast + private)
   ========================================================================== */
.tj-video { position: relative; border-radius: var(--tj-radius-lg); overflow: hidden; aspect-ratio: 16/9; background: #000; cursor: pointer; border: 1px solid var(--tj-hairline); }
.tj-video img.poster { width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity .3s ease, transform .55s ease; }
.tj-video:hover img.poster { opacity: .7; transform: scale(1.03); }
.tj-video__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 92px; height: 92px; border-radius: 50%;
  background: var(--tj-pink); border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, transform .2s ease;
}
.tj-video:hover .tj-video__play { background: var(--tj-pink-lt); transform: translate(-50%,-50%) scale(1.08); }
.tj-video__play svg { width: 34px; height: 34px; fill: var(--tj-bg); margin-left: 5px; }
.tj-video__label { position: absolute; left: 24px; bottom: 20px; font-family: var(--tj-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--tj-cream); background: rgba(32,31,37,.72); padding: 8px 14px; border-radius: 5px; }
.tj-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============================================================================
   MARQUEES
   ========================================================================== */
.tj-marq { overflow: hidden; }
.tj-marq--band { border-top: 1px solid var(--tj-hairline); border-bottom: 1px solid var(--tj-hairline); padding: 18px 0; background: var(--tj-band); }
.tj-marq-track { display: flex; width: max-content; }
.tj-marq-track--imgs { gap: 18px; animation: tj-marq 42s linear infinite; }
.tj-marq-track--imgs img { height: 150px; width: auto; border-radius: 8px; object-fit: cover; }
.tj-marq:hover .tj-marq-track { animation-play-state: paused; }

/* ── Picture marquee: swipeable, not just watchable (Jon, 2026-08-16) ───────
   The transform animation alone gave a viewer no way in. On a 375px screen
   that is ~1.5 of 28 photos visible at a time, on a 42s loop, with
   `overflow:hidden` forbidding a swipe — you wait or you miss them.

   So the picture marquee (and only that one; the city and quote marquees stay
   pure decoration) becomes a real horizontal scroller that also happens to
   drift on its own. JS swaps the transform animation for scrollLeft, because
   a transform and native scrolling fight over the same pixels — you cannot
   have both moving the content. With JS off, the CSS animation below still
   runs exactly as before, which is why this is gated on .tj-js. */
.tj-js .tj-marq--band {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;   /* momentum on older iOS */
  overscroll-behavior-x: contain;      /* a swipe past the end must not navigate back */
  scrollbar-width: none;               /* the drift is the affordance, not a bar */
  -ms-overflow-style: none;
}
.tj-js .tj-marq--band::-webkit-scrollbar { display: none; }

/* Once JS drives scrollLeft, the keyframes must stop or the two compound. */
.tj-js .tj-marq--band[data-marq-live] .tj-marq-track--imgs { animation: none; }

/* Grabbable on a pointer device, so the affordance is not touch-only. */
.tj-js .tj-marq--band[data-marq-live] { cursor: grab; }
.tj-js .tj-marq--band[data-marq-live].is-dragging { cursor: grabbing; }
.tj-js .tj-marq--band[data-marq-live].is-dragging img { pointer-events: none; }

/* city marquee (ghost Anton names + berry dots) */
.tj-citymarq { border-top: 1px solid var(--tj-hairline); border-bottom: 1px solid var(--tj-hairline); padding: 16px 0; overflow: hidden; }
.tj-citymarq .tj-marq-track { gap: 0; animation: tj-marq 38s linear infinite; font-family: var(--tj-display); font-size: clamp(20px,2.4vw,30px); text-transform: uppercase; color: var(--tj-charcoal); }
.tj-citymarq span { padding: 0 28px; }
.tj-citymarq .dot { color: var(--tj-berry); }
.tj-citymarq .you { color: var(--tj-pink); }

/* quote marquee (Caveat on berry) */
.tj-quotemarq { background: var(--tj-berry); padding: clamp(28px,4vh,40px) 0; overflow: hidden; }
.tj-quotemarq .tj-marq-track { gap: 0; animation: tj-marq 46s linear infinite; font-family: var(--tj-hand); font-weight: 700; font-size: clamp(26px,3vw,40px); color: var(--tj-cream); }
.tj-quotemarq span { padding: 0 40px; }
.tj-quotemarq .star { color: var(--tj-pink-lt); }

/* Attribution (ticket M). These are real people, so the marquee names them.
   The item becomes a two-line block: the quote in the handwritten face it
   already used, the source under it in mono at a much smaller size, so the
   quote still carries the visual weight. */
.tj-quotemarq__item { display: inline-flex; flex-direction: column; align-items: flex-start;
                      gap: 6px; padding: 0 40px; vertical-align: middle; }
.tj-quotemarq__q { padding: 0; }
.tj-quotemarq__src { font-family: var(--tj-mono); font-style: normal; font-weight: 500;
                     font-size: clamp(11px, 0.9vw, 13px); letter-spacing: .1em;
                     text-transform: uppercase; color: var(--tj-pink-lt); opacity: .85;
                     padding: 0; white-space: nowrap; }

/* ============================================================================
   STAT BAND
   ========================================================================== */
.tj-statband { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); border-bottom: 1px solid var(--tj-hairline); }
.tj-stat { padding: 38px clamp(24px,3vw,40px); border-right: 1px solid var(--tj-hairline); }
.tj-stat:last-child { border-right: 0; }
.tj-stat__n { font-family: var(--tj-display); font-size: clamp(48px,5vw,66px); line-height: .9; color: var(--tj-cream); }
.tj-stat__n--pink { color: var(--tj-pink); }
.tj-stat__n sup, .tj-stat__n .plus { font-size: .55em; color: var(--tj-berry); }
.tj-stat__l { font-family: var(--tj-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--tj-muted); margin-top: 8px; }

/* ============================================================================
   CARDS + GRIDS
   ========================================================================== */
.tj-grid { display: grid; gap: 20px; }
.tj-grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.tj-grid--cards { grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); }

/* feature/info card (How a night works) */
.tj-card { background: var(--tj-panel); border-radius: 12px; padding: 30px 26px; border-top: 3px solid var(--tj-berry); transition: transform .3s ease, border-color .3s ease; }
.tj-card--accent { border-top-color: var(--tj-pink); }
.tj-card:hover { transform: translateY(-5px); border-color: rgba(255,92,168,.5); }
.tj-card__n { font-family: var(--tj-display); font-size: 28px; color: var(--tj-berry); margin-bottom: 14px; }
.tj-card__h { font-family: var(--tj-sans); font-weight: 700; font-size: 22px; margin: 0 0 8px; }
.tj-card__p { font-size: 16px; color: var(--tj-body-dim); margin: 0; line-height: 1.5; }

/* event/media card (archive, recent jams) */
.tj-ecard { border-radius: var(--tj-radius); overflow: hidden; background: var(--tj-panel); transition: transform .3s ease; }
.tj-ecard:hover { transform: translateY(-6px); }
.tj-ecard__media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.tj-ecard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.tj-ecard:hover .tj-ecard__media img { transform: scale(1.06); }
.tj-ecard__tag { position: absolute; top: 14px; left: 14px; font-family: var(--tj-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tj-bg); background: var(--tj-pink); padding: 5px 11px; border-radius: 4px; font-weight: 600; }
.tj-ecard__body { padding: 24px; }
.tj-ecard__meta { font-family: var(--tj-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--tj-muted); margin-bottom: 10px; }
.tj-ecard__h { font-family: var(--tj-display); font-weight: 400; font-size: 32px; line-height: .96; text-transform: uppercase; margin: 0; }

/* overlay event card (hero-style, gradient scrim) */
.tj-ocard { position: relative; border-radius: var(--tj-radius); overflow: hidden; min-width: 0; }
.tj-ocard img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.tj-ocard:hover img { transform: scale(1.06); }
.tj-ocard__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,19,24,.92), transparent 55%); }
.tj-ocard__cap { position: absolute; left: 26px; right: 26px; bottom: 24px; }
.tj-ocard__meta { font-family: var(--tj-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--tj-pink); margin-bottom: 8px; }
.tj-ocard__h { font-family: var(--tj-display); font-weight: 400; font-size: clamp(28px,3.4vw,40px); text-transform: uppercase; margin: 0; }

/* topic card (Topics grid) */
.tj-tcard { background: var(--tj-panel); border: 1px solid var(--tj-hairline); border-radius: var(--tj-radius); padding: 32px 28px; transition: transform .3s ease, border-color .3s ease; }
.tj-tcard:hover { transform: translateY(-5px); border-color: rgba(255,92,168,.5); }
.tj-tcard:hover .tj-tcard__go { color: var(--tj-pink); }
.tj-tcard__cat { font-family: var(--tj-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--tj-muted); margin-bottom: 16px; }
.tj-tcard__h { font-family: var(--tj-display); font-weight: 400; font-size: 30px; line-height: .96; text-transform: uppercase; margin: 0 0 10px; }
.tj-tcard__p { font-size: 16px; color: var(--tj-body-dim); margin: 0 0 18px; line-height: 1.5; }
.tj-tcard__go { font-family: var(--tj-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--tj-muted); transition: color .2s ease; }

/* step card (numbered) */
.tj-step { border: 1px solid var(--tj-hairline); border-radius: 12px; padding: 32px 26px; transition: border-color .3s ease, transform .3s ease; }
.tj-step:hover { border-color: rgba(255,92,168,.5); transform: translateY(-4px); }
.tj-step__n { font-family: var(--tj-display); font-size: 54px; color: var(--tj-berry); line-height: .8; margin-bottom: 18px; }
.tj-step__n--last { color: var(--tj-pink); }
.tj-step__h { font-family: var(--tj-sans); font-weight: 700; font-size: 21px; margin: 0 0 8px; }
.tj-step__p { font-size: 16px; color: var(--tj-body-dim); margin: 0; line-height: 1.5; }

/* filter chips */
.tj-chips { display: flex; gap: 12px; flex-wrap: wrap; }
.tj-chip { border: 1px solid var(--tj-hairline-strong); padding: 11px 20px; border-radius: 100px; font-family: var(--tj-mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--tj-body); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.tj-chip:hover { border-color: rgba(255,92,168,.6); }
.tj-chip.is-on { background: var(--tj-pink); color: var(--tj-bg); border-color: var(--tj-pink); }

/* ============================================================================
   PANELS — CTA, pull-quote, mission split, timeline, apply form
   ========================================================================== */
.tj-cta { position: relative; border-radius: var(--tj-radius-lg); overflow: hidden; background: linear-gradient(120deg, var(--tj-berry), var(--tj-berry-dk)); }
.tj-cta__coin { position: absolute; right: -30px; bottom: -30px; width: 240px; height: 240px; opacity: .16; }
.tj-cta__inner { position: relative; padding: clamp(40px,7vw,70px) clamp(32px,5vw,64px); }
.tj-cta__eyebrow { font-family: var(--tj-mono); font-size: 14px; letter-spacing: .28em; text-transform: uppercase; color: var(--tj-pink-lt); margin-bottom: 18px; }
.tj-cta__h { font-family: var(--tj-display); font-weight: 400; font-size: clamp(44px,6.5vw,72px); line-height: .92; text-transform: uppercase; margin: 0 0 20px; max-width: 18ch; }
.tj-cta__p { font-size: clamp(18px,2.2vw,22px); line-height: 1.5; color: var(--tj-on-panel); margin: 0 0 36px; max-width: 52ch; }

.tj-pullquote { background: linear-gradient(135deg, var(--tj-berry), var(--tj-berry-dk)); border-radius: var(--tj-radius-lg); padding: clamp(40px,6vw,72px); position: relative; overflow: hidden; }
.tj-pullquote__coin { position: absolute; right: -30px; bottom: -30px; width: 220px; height: 220px; opacity: .14; }
.tj-pullquote blockquote { font-family: var(--tj-sans); font-weight: 700; font-size: clamp(1.8rem,3.6vw,2.6rem); line-height: 1.3; color: var(--tj-cream); position: relative; max-width: 24ch; }
.tj-pullquote cite { display: block; font-family: var(--tj-hand); font-weight: 700; font-size: 1.7rem; font-style: normal; color: var(--tj-pink-lt); margin-top: 16px; }

.tj-split { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(32px,5vw,64px); align-items: start; }

.tj-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 24px; }
.tj-tl { border-top: 3px solid var(--tj-berry); padding-top: 22px; }
.tj-tl--first { border-top-color: var(--tj-pink); }
.tj-tl__y { font-family: var(--tj-display); font-size: 40px; color: var(--tj-cream); }
.tj-tl--first .tj-tl__y { color: var(--tj-pink); }
.tj-tl__p { font-size: 17px; color: var(--tj-body-dim); margin: 12px 0 0; line-height: 1.5; }

/* light apply/form panel */
.tj-formpanel { background: var(--tj-cream); color: var(--tj-bg); border-radius: var(--tj-radius-lg); padding: clamp(40px,5vw,64px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,4vw,56px); }
.tj-fld { border: 1px solid rgba(32,31,37,.25); background: #fff; border-radius: 8px; padding: 16px 18px; font-family: var(--tj-sans); font-size: 17px; color: var(--tj-bg); width: 100%; }
.tj-fld:focus { outline: none; border-color: var(--tj-pink); }
.tj-form { display: flex; flex-direction: column; gap: 16px; }

/* "we provide / you bring" panels */
.tj-panel-dark { background: var(--tj-panel); border-radius: 16px; padding: 44px 40px; }
.tj-panel-berry { background: linear-gradient(135deg, var(--tj-berry), var(--tj-berry-dk)); border-radius: 16px; padding: 44px 40px; }

/* ============================================================================
   FOOTER
   ========================================================================== */
.tj-footer { background: var(--tj-footer); border-top: 1px solid rgba(245,241,232,.1); padding: 48px var(--tj-gutter); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.tj-footer .tj-brand img { width: 38px; height: 38px; }
.tj-footer__tag { font-family: var(--tj-sans); font-size: 13px; color: var(--tj-muted); }
.tj-footer__links { display: flex; gap: 24px; flex-wrap: wrap; font-family: var(--tj-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--tj-muted); }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .tj-nav-links { display: none; }
  .tj-burger { display: flex; }
  .tj-split { grid-template-columns: 1fr; }
  .tj-formpanel { grid-template-columns: 1fr; }
  .tj-hero__title { font-size: clamp(48px, 12vw, 84px); }
}
@media (max-width: 560px) {
  .tj-cta__inner { padding: 40px 26px; }
  .tj-stat { padding: 28px 22px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .tj-js [data-reveal] { opacity: 1 !important; transform: none !important; }
}


/* ── No-photo fallback ──────────────────────────────────────────────────────
   127 of 238 events have no photograph in Coda. They get this, deliberately a
   graphic rather than a photo, so a visitor can see that no picture exists
   instead of being shown a picture of somewhere else. */
.tj-nophoto{
  position:absolute; inset:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center; padding:18px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(91,62,150,.55), transparent 70%),
    repeating-linear-gradient(135deg, #2A2831 0 12px, #2E2B36 12px 24px);
}
.tj-ecard__media .tj-nophoto{ position:absolute; }
.tj-nophoto__label{
  font-family:var(--tj-display, 'Anton', sans-serif);
  text-transform:uppercase; letter-spacing:.02em; line-height:1.05;
  font-size:clamp(15px, 2.1vw, 22px);
  color:rgba(245,241,232,.42); text-align:center;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.tj-ocard .tj-nophoto__label{ color:rgba(245,241,232,.30); }

/* Hydration must never flash: the swap is opacity-only and skipped entirely
   under reduced motion. */
@media (prefers-reduced-motion: no-preference){
  [data-live].tj-live-updating{ transition:opacity .18s ease; opacity:.72; }
}

/* ── Event page (ticket N) ──────────────────────────────────────────────────
   The gallery was shipping one photo per row, which turned a 14-photo night
   into a 9,300px page. Grid it. */
.tj-gal{ display:grid; gap:18px; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); }
.tj-gal__item{ margin:0; }
.tj-gal__item img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
                   border-radius:10px; display:block; background:var(--tj-band); }
.tj-gal__item figcaption{ font-family:var(--tj-mono); font-size:12px; line-height:1.5;
                          letter-spacing:.04em; color:var(--tj-muted, #847E94); margin-top:8px; }

/* Hero image on an event page: wide, capped, never a full-bleed banner that
   pushes the facts below the fold. */
.tj-ev-hero__media{ margin:0 auto; max-width:1100px; padding:0 clamp(16px,4vw,48px); }
.tj-ev-hero__media img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover;
                        border-radius:14px; display:block; }

/* Recap prose, when an event has any. */
.tj-prose{ max-width:68ch; }
.tj-prose p{ margin:0 0 18px; font-size:clamp(16px,1.3vw,18px); line-height:1.75; }

/* ── Rotating hero headline (ticket K) ──────────────────────────────────────
   Crossfade + a small lift. min-height is set in JS from the tallest phrase,
   so swapping copy never reflows the hero. */
.tj-hero__title.tj-rot { transition: opacity .75s cubic-bezier(.4,0,.2,1) !important;
                         transform: none !important; }
.tj-hero__title.tj-rot--out { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  .tj-rot, .tj-rot--out { transition: none; opacity: 1; transform: none; }
}

/* ── "What is a Thought Jam?" cards (ticket L) ──────────────────────────────
   Eleven items, so the grid must not strand a lone card on the last row.
   auto-fill at 260px gives 4 across at 1920 (4/4/3), 3 at 1280 (3x3 + 2),
   2 at 768 and 1 on mobile — no orphan row at any of them. */
.tj-ngrid{ display:grid; gap:26px; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
.tj-ncard{ display:flex; flex-direction:column; }
.tj-ncard__media{ position:relative; width:100%; aspect-ratio:4/3; overflow:hidden;
                  border-radius:12px; margin-bottom:16px; background:var(--tj-band); }
.tj-ncard__media img{ width:100%; height:100%; object-fit:cover; display:block;
                      transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.tj-ncard:hover .tj-ncard__media img{ transform:scale(1.06); }
.tj-ncard .tj-card__h{ margin:0 0 8px; }
.tj-ncard .tj-card__p{ margin:0; }
@media (prefers-reduced-motion: reduce){
  .tj-ncard__media img, .tj-ncard:hover .tj-ncard__media img{ transition:none; transform:none; }
}

/* ── Testimonials as comment cards (ticket M, revised) ──────────────────────
   Jon: "like comments on facebook/reddit, smaller font. marquee, much slower."
   150s vs the old 46s — a card should be readable as it drifts past. */
.tj-quotemarq{ background: var(--tj-berry); padding: clamp(28px,4vh,44px) 0; overflow: hidden; }
.tj-quotemarq .tj-marq-track--cards{ gap: 18px; align-items: stretch;
  animation: tj-marq 150s linear infinite; font-family: var(--tj-sans); }
.tj-quotemarq .tj-marq-track--cards span{ padding: 0; }

.tj-tcard{
  font-family: var(--tj-sans);
  flex: 0 0 auto; width: min(340px, 78vw); box-sizing: border-box;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 16px 18px; text-align: left;
  display: flex; flex-direction: column; gap: 10px;
}
.tj-tcard__head{ display: flex; align-items: center; gap: 10px; }
.tj-tcard__avatar{
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  background: var(--tj-pink); color: var(--tj-charcoal);
  font-family: var(--tj-mono); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.tj-tcard__who{ display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.tj-tcard__name{
  font-family: var(--tj-sans); font-style: normal; font-weight: 600;
  font-size: 14px; color: var(--tj-cream);
}
.tj-tcard__role{
  font-family: var(--tj-mono); font-size: 10.5px; letter-spacing: .06em;
  color: rgba(245,241,232,.55); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 260px;
}
.tj-tcard__body{
  margin: 0; font-family: var(--tj-sans); font-weight: 400;
  font-size: 14.5px; line-height: 1.55; color: rgba(245,241,232,.9);
  white-space: normal;
}

/* Sub-heading above the card grid ("What our jams are made of"). */
.tj-h-sub{
  font-family: var(--tj-display); text-transform: uppercase;
  font-size: clamp(20px, 2.2vw, 28px); letter-spacing: .01em;
  color: var(--tj-cream); margin: 0;
}

/* ── Photo lightbox (ticket S) ──────────────────────────────────────────────
   Dimmed backdrop, the photo centred and capped so it never overflows, caption
   underneath, controls on a bar. Chevrons sit outside the image on desktop and
   overlay it on mobile where there is no room beside it. */
.tj-lb{ position:fixed; inset:0; z-index:9000; background:rgba(15,14,18,.94);
        display:flex; flex-direction:column; align-items:center; justify-content:center;
        padding:clamp(12px,3vw,40px); }
.tj-lb[hidden]{ display:none; }
.tj-lb__fig{ margin:0; max-width:min(1400px,92vw); max-height:78vh;
             display:flex; flex-direction:column; align-items:center; gap:14px; }
.tj-lb__img{ max-width:100%; max-height:70vh; width:auto; height:auto;
             object-fit:contain; border-radius:10px; display:block;
             box-shadow:0 24px 70px rgba(0,0,0,.6); }
.tj-lb__cap{ font-family:var(--tj-sans); font-size:14.5px; line-height:1.55;
             color:rgba(245,241,232,.86); text-align:center; max-width:70ch; margin:0; }
.tj-lb__cap[hidden]{ display:none; }

.tj-lb__x{ position:absolute; top:14px; right:16px; width:44px; height:44px;
           font-size:30px; line-height:1; }
.tj-lb__nav{ position:absolute; top:50%; transform:translateY(-50%);
             width:52px; height:52px; font-size:30px; line-height:1; }
.tj-lb__nav--prev{ left:clamp(6px,2vw,28px); }
.tj-lb__nav--next{ right:clamp(6px,2vw,28px); }
.tj-lb__x, .tj-lb__nav, .tj-lb__fs, .tj-lb__fav{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:var(--tj-cream); border-radius:99px; cursor:pointer;
  font-family:var(--tj-mono); letter-spacing:.08em;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.tj-lb__x:hover, .tj-lb__nav:hover, .tj-lb__fs:hover, .tj-lb__fav:hover{ background:rgba(255,255,255,.2); }
/* [hidden] must win over the display:flex above, or a control that is not
   wired up yet still paints. */
.tj-lb [hidden]{ display:none !important; }
.tj-lb__x:focus-visible, .tj-lb__nav:focus-visible, .tj-lb__fs:focus-visible,
.tj-lb__fav:focus-visible{ outline:2px solid var(--tj-pink); outline-offset:3px; }

.tj-lb__bar{ display:flex; align-items:center; gap:14px; margin-top:22px; flex-wrap:wrap;
             justify-content:center; }
.tj-lb__count{ font-family:var(--tj-mono); font-size:12px; letter-spacing:.14em;
               color:rgba(245,241,232,.6); }
.tj-lb__fs, .tj-lb__fav{ font-size:12px; text-transform:uppercase; padding:10px 16px; }
.tj-lb__fav[aria-pressed="true"] .tj-lb__heart{ color:var(--tj-pink); }
.tj-lb__heart{ font-size:15px; }

@media (max-width:640px){
  .tj-lb__nav{ width:44px; height:44px; background:rgba(0,0,0,.45); }
  .tj-lb__img{ max-height:62vh; }
}
/* A zoomable thumbnail should say so on hover, and never animate for someone
   who asked for less motion. */
[data-lightbox]{ cursor:zoom-in; }
[data-lightbox]:focus-visible{ outline:2px solid var(--tj-pink); outline-offset:3px; }