/* ==========================================================================
 * /site/site.css -- the redesigned consumerbreak.com (8 November 2026).
 * Calmer and easier to follow, still loud where it counts:
 *   - tall display caps for every title (Bebas Neue, the owner's pick of 9 Nov
 *     2026, the old site's face) with a slow spectral sweep through each one,
 *     like spectralartfoundation.org; one sans for reading (Barlow),
 *     condensed caps (Barlow Condensed) only for short labels and buttons;
 *   - numbered sections ("01 / Watch"), the point first, a quiet facts row;
 *   - colour carried by the brand green, a gold highlight and a slow spectral
 *     sweep on a few words, not by every block; purple stays for Spectral
 *     Sessions only (brand rule);
 *   - body text at least 4.5:1, buttons at least 44 px, visible focus, and
 *     no motion for visitors who ask for less.
 * 100% ASCII. Bump ?v= in every page when this file changes.
 * ========================================================================== */
:root {
  --bg: #060c06;
  --bg2: #0a130a;
  --card: #0e180e;
  --line: #1f361f;
  --text: #f0f7f0;
  --soft: #c9dbc9;
  --muted: #a3b9a3;
  --green: #5fcf6e;
  --green-ink: #071007;
  --gold: #f5c842;
  --purple: #a78bfa;
  --spectrum: linear-gradient(90deg, #5fcf6e, #f5c842, #ff7a59, #ff5fa2, #a78bfa, #38d6ff, #5fcf6e);
  --radius: 14px;
  --head-h: 68px;
  /* Bebas Neue has one weight (400) and only capitals: never ask it for bold. */
  --serif: 'Bebas Neue', 'Oswald', Impact, 'Arial Narrow', sans-serif;
  --sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --cond: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--head-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 18px/1.6 var(--sans); overflow-x: hidden;
}
body.has-admin-bar { padding-bottom: 56px; }
img, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: var(--green); text-underline-offset: 3px; }
a:hover { color: #8be397; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--gold); color: #000; padding: 10px 16px;
  border-radius: 6px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }

/* ----------------------------------------------------------- header */
.site-header { position: sticky; top: 0; z-index: 500; background: rgba(6, 12, 6, .94);
  border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--spectrum);
  background-size: 200% 100%; opacity: .55; animation: sweep 14s linear infinite; }
.head-row { display: flex; align-items: center; gap: 18px; min-height: var(--head-h); flex-wrap: nowrap; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.brand img { display: block; height: 40px; width: auto; mix-blend-mode: screen; }
.nav { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; justify-content: center; min-width: 0; }
.nav a { font: 700 15px/1 var(--cond); letter-spacing: .09em; text-transform: uppercase; color: var(--soft);
  text-decoration: none; padding: 14px 10px; border-radius: 8px; white-space: nowrap; }
.nav a:hover { color: var(--text); background: rgba(95, 207, 110, .08); }
.nav a[aria-current="page"] { color: var(--green); box-shadow: inset 0 -3px 0 var(--green); border-radius: 8px 8px 0 0; }
.head-end { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; }
#nav-auth-slot { display: flex; align-items: center; min-height: 44px; }
#nav-auth-slot a { min-height: 40px; display: inline-flex !important; align-items: center; }
.menu-btn { display: none; font: 700 15px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase;
  background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 0 16px;
  min-height: 44px; cursor: pointer; }
.site-header.compact .menu-btn { display: inline-flex; align-items: center; }
.site-header.compact .nav { display: none; }
.site-header.compact .nav.open { display: flex; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column;
  align-items: stretch; gap: 0; padding: 8px 20px 18px; background: rgba(6, 12, 6, .98); border-bottom: 1px solid var(--line);
  max-height: calc(100vh - var(--head-h)); overflow-y: auto; }
.site-header.compact .nav.open a { padding: 15px 6px; font-size: 18px; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.site-header.compact .nav.open a[aria-current="page"] { color: var(--green); }

/* ----------------------------------------------------------- type */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.02; margin: 0 0 .45em; letter-spacing: .025em; }
h1 { font-size: clamp(2.9rem, 7.4vw, 5.6rem); }
h2 { font-size: clamp(2.3rem, 4.8vw, 3.6rem); }
h3 { font-size: clamp(1.55rem, 2.6vw, 1.95rem); letter-spacing: .03em; }
p { margin: 0 0 1em; }
.lead { font-size: clamp(1.1rem, 1.8vw, 1.32rem); color: var(--soft); max-width: 62ch; }
.body-text { color: var(--soft); max-width: 66ch; }
.kicker { display: inline-flex; align-items: baseline; gap: 10px; font: 700 15px/1.2 var(--cond); letter-spacing: .16em;
  text-transform: uppercase; color: var(--green); margin: 0 0 14px; }
.kicker .num { color: var(--gold); font-variant-numeric: tabular-nums; }
.kicker.spectral { color: var(--purple); }
/* The few words that carry the energy. */
.hl { background: var(--spectrum); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; animation: sweep 11s linear infinite; padding: 0 .12em .14em 0; margin: 0 -.12em -.14em 0; }
@keyframes sweep { from { background-position: 0 0; } to { background-position: 300% 0; } }

/* ----------------------------------------------------------- buttons */
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  font: 700 16px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-radius: 10px;
  background: var(--green); color: var(--green-ink); border: 2px solid var(--green); cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease; }
.btn:hover { color: var(--green-ink); transform: translateY(-2px) rotate(-.6deg); box-shadow: 0 8px 22px rgba(95, 207, 110, .25); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn.ghost:hover { color: var(--text); border-color: var(--green); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #1b1400; }
.btn.purple { background: var(--purple); border-color: var(--purple); color: #120a24; }
.text-link { font-weight: 700; text-decoration: underline; }

/* ----------------------------------------------------------- sections */
main { display: block; }
.section { padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--line); }
.section.first { border-top: 0; padding-top: clamp(36px, 6vw, 72px); }
.section.alt { background: var(--bg2); }
.section-head { max-width: 760px; margin-bottom: 34px; }
.grid-2 { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) { .grid-4 { grid-template-columns: 1fr; } }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
  position: relative; transition: border-color .2s ease, transform .2s ease; }
.card:hover { border-color: rgba(95, 207, 110, .55); }
.card h3 { margin-top: 6px; }
.card p { color: var(--soft); }
.card .tag { font: 700 13px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.card .more { font-weight: 700; }
.card.link-card { text-decoration: none; color: inherit; display: block; }
.card.link-card:hover { transform: translateY(-3px) rotate(.3deg); }
.card.spectral-card { border-color: rgba(167, 139, 250, .45); }
.card.spectral-card .tag { color: var(--purple); }

/* A quiet row of checked facts. */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 34px 0 0; padding: 0; list-style: none;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.facts li { padding: 16px 18px; border-left: 1px solid var(--line); }
.facts li:first-child { border-left: 0; }
.facts b { display: block; font: 400 2rem/1.05 var(--serif); letter-spacing: .03em; color: var(--text); }
.facts span { font-size: 15px; color: var(--muted); }
@media (max-width: 760px) {
  .facts { grid-template-columns: repeat(2, 1fr); }
  .facts li:nth-child(3) { border-left: 0; }
  .facts li:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* Numbered steps. */
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.steps li { counter-increment: step; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 20px; }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; font: 400 2.6rem/1 var(--serif); color: var(--gold); margin-bottom: 10px; }
.steps h3 { margin-bottom: 6px; }
.steps p { color: var(--soft); margin: 0; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

ul.ticks { list-style: none; padding: 0; margin: 0 0 1em; }
ul.ticks li { position: relative; padding-left: 28px; margin: 0 0 10px; color: var(--soft); }
ul.ticks li::before { content: ''; position: absolute; left: 4px; top: .55em; width: 10px; height: 10px; border-radius: 3px;
  background: var(--green); transform: rotate(45deg); }

/* ----------------------------------------------------------- media */
.media { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #000; }
.media.r16 { aspect-ratio: 16 / 9; }
.media.r1 { aspect-ratio: 1 / 1; }
.media.r4 { aspect-ratio: 4 / 3; }
.media.r2 { aspect-ratio: 2 / 1; }
.media > img, .media > iframe, .media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.media.contain > img { object-fit: contain; background: #000; }
.yt-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: inline-flex;
  align-items: center; gap: 10px; min-height: 56px; padding: 0 24px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(6, 12, 6, .82); color: #fff; font: 700 16px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 0 0 2px var(--green); }
.yt-play::before { content: ''; width: 0; height: 0; border-left: 14px solid var(--green); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.yt-play:hover { background: rgba(6, 12, 6, .95); }
.media.no-video .yt-play { display: none; }
.caption { font-size: 15px; color: var(--muted); margin-top: 10px; }

/* ----------------------------------------------------------- hero */
.hero h1 { max-width: 15ch; }
.hero .lead { margin-top: 6px; }
.live-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid rgba(167, 139, 250, .5);
  border-radius: 999px; font: 700 14px/1.2 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--text); margin-bottom: 18px; }
.live-pill .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 0 rgba(167, 139, 250, .7);
  animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(167, 139, 250, .7); } 80%, 100% { box-shadow: 0 0 0 12px rgba(167, 139, 250, 0); } }
.showtime { margin: 16px 0 0; padding: 14px 16px; border-left: 4px solid var(--purple); background: rgba(167, 139, 250, .07);
  border-radius: 0 10px 10px 0; color: var(--soft); font-size: 16px; }
.showtime strong { color: var(--text); }
.hero-art { transform: rotate(1.2deg); }
.hero-art .media { box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(95, 207, 110, .25); }

/* ----------------------------------------------------------- BREAK Frii */
.frii-hero { background: radial-gradient(1200px 500px at 85% -10%, rgba(95, 207, 110, .14), transparent 60%),
  radial-gradient(800px 400px at 0% 110%, rgba(245, 200, 66, .08), transparent 60%); }
.frii-badge { display: inline-flex; align-items: center; gap: 10px; font: 700 14px/1 var(--cond); letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); border: 1px dashed rgba(245, 200, 66, .55); padding: 9px 14px; border-radius: 999px; margin-bottom: 18px; }
.frii-frame { margin-top: 22px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #0b1220; }
.frii-frame iframe { display: block; width: 100%; height: min(760px, 80vh); border: 0; }
.note { font-size: 15px; color: var(--muted); }
.tool-grid .card { display: flex; flex-direction: column; }
.tool-grid .card .btn { margin-top: auto; align-self: flex-start; }

/* ----------------------------------------------------------- story timeline */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ''; position: absolute; left: 70px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-item { display: grid; grid-template-columns: 70px 1fr; gap: 28px; padding: 0 0 34px; position: relative; }
.tl-item::before { content: ''; position: absolute; left: 65px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--green); }
.tl-year { font: 400 1.6rem/1.2 var(--serif); letter-spacing: .03em; color: var(--gold); }
.tl-body h3 { margin-bottom: 6px; }
.tl-body p { color: var(--soft); max-width: 70ch; }
.tl-body > img { display: block; max-width: min(100%, 520px); border-radius: 10px; border: 1px solid var(--line); margin-top: 8px; }
.tl-video { max-width: min(100%, 640px); margin-top: 12px; }
@media (max-width: 600px) {
  .timeline::before { left: 6px; }
  .tl-item { grid-template-columns: 1fr; gap: 4px; padding-left: 28px; }
  .tl-item::before { left: 1px; }
}
blockquote.pull { margin: 0; padding: 22px 26px; border-left: 4px solid var(--gold); background: var(--card); border-radius: 0 var(--radius) var(--radius) 0; }
blockquote.pull p { font: 400 clamp(1.7rem, 3vw, 2.4rem)/1.12 var(--serif); letter-spacing: .02em; margin: 0 0 8px; }
blockquote.pull cite { font-style: normal; color: var(--muted); font-size: 15px; }
.memorial { text-align: center; }
.memorial .names { font: 400 clamp(2rem, 4vw, 3rem)/1.1 var(--serif); letter-spacing: .03em; margin: 6px 0; }

/* ----------------------------------------------------------- links list, contact */
.link-row { display: flex; flex-wrap: wrap; gap: 10px; }
.link-row a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text); text-decoration: none; font-weight: 600; }
.link-row a:hover { border-color: var(--green); color: var(--green); }
.form { display: grid; gap: 14px; max-width: 640px; }
.form label { font: 700 14px/1.2 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); display: block; margin-bottom: 6px; }
.form input, .form textarea, .form select { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); font: 400 17px/1.4 var(--sans); }
.form textarea { min-height: 140px; resize: vertical; }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px rgba(95, 207, 110, .25); }
.form-msg { margin: 0; font-size: 16px; }
.form-msg.ok { color: var(--green); }
.form-msg.err { color: #ff8a8a; }

/* ----------------------------------------------------------- footer */
.site-footer { border-top: 1px solid var(--line); padding: 56px 0 28px; background: var(--bg2); margin-top: 0; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.foot-grid h2 { font: 700 14px/1.2 var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 12px; }
.foot-grid a { display: block; color: var(--soft); text-decoration: none; padding: 7px 0; }
.foot-grid a:hover { color: var(--green); }
.foot-about p { color: var(--muted); font-size: 16px; margin: 12px 0 0; }
.foot-time strong { color: var(--text); }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 14px 24px; justify-content: space-between; align-items: center;
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.foot-v1 { color: var(--muted); }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-about { grid-column: 1 / -1; } }
@media (max-width: 420px) { .foot-grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------- small screens */
@media (max-width: 560px) {
  body { font-size: 17px; }
  .wrap { padding: 0 16px; }
  .btns .btn { flex: 1 1 100%; }
  .card { padding: 20px; }
  .hero-art { transform: none; }
}

/* ----------------------------------------------------------- less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hl { background-position: 0 0; }
  .btn:hover, .card.link-card:hover { transform: none; }
  html { scroll-behavior: auto; }
}

/* Home: the autoplaying hero video and the banner under the hero (8 Nov 2026, the owner's request). */
.media.r16 .yt-auto { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.home-banner { margin: 34px 0 0; }
.home-banner img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); }

/* ----------------------------------------------------------- the spectral sweep on every title
 * As on spectralartfoundation.org: white titles with a slow band of the
 * spectrum that glides through every 11 s (h2 and h3 a little later, so a page
 * never flashes all at once). Words marked .hl keep their own colour sweep.
 * Owner, 9 Nov 2026: "add spectral sweep to all of them like on spectral art". */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  main h1, main h2, main h3, .facts b, .memorial .names {
    background-image: linear-gradient(100deg, var(--text) 0%, var(--text) 38%, #ff6a6a 42%, #ffb35c 44.5%, #ffe066 47%,
      #66e09b 49.5%, #5fd8ea 52%, #8fa8ff 54.5%, #c49bff 57%, var(--text) 61%, var(--text) 100%);
    background-size: 300% 100%; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 20px rgba(167, 139, 250, .16));
    animation: titleSweep 11s ease-in-out infinite;
  }
  main h2 { animation-delay: 1.2s; }
  main h3, .facts b { animation-delay: 2.4s; }
  .hl { -webkit-text-fill-color: transparent; }
  /* The gold display figures (step numbers, timeline years) sweep over gold. */
  .steps li::before, .tl-year {
    background-image: linear-gradient(100deg, var(--gold) 0%, var(--gold) 38%, #ff6a6a 42%, #ffb35c 44.5%, #ffe066 47%,
      #66e09b 49.5%, #5fd8ea 52%, #8fa8ff 54.5%, #c49bff 57%, var(--gold) 61%, var(--gold) 100%);
    background-size: 300% 100%; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: titleSweep 11s ease-in-out infinite; animation-delay: 3.6s;
  }
}
@keyframes titleSweep { 0%, 58% { background-position: 100% 0; } 88%, 100% { background-position: 0% 0; } }
@media (forced-colors: active) {
  main h1, main h2, main h3, .facts b, .memorial .names, .hl, .steps li::before, .tl-year { background: none !important; -webkit-text-fill-color: currentColor !important; filter: none !important; }
}

/* ----------------------------------------------------------- the four cards under the home banner
 * One card per panel of the banner above them, in the same order, each a link. */
.facts.pillars li { padding: 0; }
.facts.pillars a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 18px 18px 16px; color: inherit; text-decoration: none;
  transition: background .2s ease; }
.facts.pillars a:hover { background: rgba(95, 207, 110, .06); }
.facts.pillars b { font-size: 1.75rem; }
.facts.pillars span { font-size: 15px; line-height: 1.5; color: var(--soft); }
.facts.pillars .go { margin-top: auto; padding-top: 6px; font: 700 14px/1.2 var(--cond); letter-spacing: .1em; text-transform: uppercase;
  color: var(--green); overflow-wrap: anywhere; }
.facts.pillars .go::after { content: ' \2192'; }

/* ----------------------------------------------------------- NFTOPIA, over its looping convention video */
.nftopia { position: relative; overflow: hidden; isolation: isolate; }
.nftopia .nft-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.nftopia .nft-shade { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(6, 12, 6, .94) 0%, rgba(6, 12, 6, .78) 48%, rgba(6, 12, 6, .45) 100%); }
.nftopia .nft-copy { max-width: 620px; }
.nftopia .nft-pause { position: absolute; right: 16px; bottom: 16px; z-index: 2; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(240, 247, 240, .35); background: rgba(6, 12, 6, .7); color: var(--text); cursor: pointer;
  font: 700 14px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; }
.nftopia .nft-pause:hover { border-color: var(--green); }
.nftopia .nft-logo { display: block; width: 100%; max-width: 360px; height: auto; border-radius: 10px; border: 1px solid var(--line); margin: 6px 0 18px; }
@media (max-width: 760px) { .nftopia .nft-shade { background: rgba(6, 12, 6, .82); } }
@media (max-width: 560px) {
  .facts.pillars { grid-template-columns: 1fr; }
  .facts.pillars li { border-left: 0; border-top: 1px solid var(--line); }
  .facts.pillars li:first-child { border-top: 0; }
  .facts.pillars .go { overflow-wrap: normal; }
}
/* Phones: the pause button joins the flow above the text, so it can never cover the section's own link. */
@media (max-width: 760px) {
  .nftopia .nft-pause { position: relative; right: auto; bottom: auto; display: block; width: fit-content; margin: 0 16px 18px auto; }
}

/* ===================================================== 9 Nov 2026, round 3 (owner) */

/* Header tabs: shiny, with a ripple of the spectrum running left to right
   ("make the top header tabs shinier and color sweeps"). */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .nav a {
    background-image: linear-gradient(100deg, var(--soft) 0%, var(--soft) 38%, #ff6a6a 42%, #ffb35c 44.5%, #ffe066 47%,
      #66e09b 49.5%, #5fd8ea 52%, #8fa8ff 54.5%, #c49bff 57%, var(--soft) 61%, var(--soft) 100%);
    background-size: 300% 100%; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: titleSweep 9s ease-in-out infinite;
  }
  .nav a:nth-child(2) { animation-delay: .25s; } .nav a:nth-child(3) { animation-delay: .5s; }
  .nav a:nth-child(4) { animation-delay: .75s; } .nav a:nth-child(5) { animation-delay: 1s; } .nav a:nth-child(6) { animation-delay: 1.25s; }
  .nav a:hover, .nav a[aria-current="page"] {
    background-image: linear-gradient(100deg, #fff 0%, #fff 38%, #ff6a6a 42%, #ffb35c 44.5%, #ffe066 47%, #66e09b 49.5%,
      #5fd8ea 52%, #8fa8ff 54.5%, #c49bff 57%, #fff 61%, #fff 100%);
    filter: drop-shadow(0 0 10px rgba(167, 139, 250, .45));
  }
}
.nav a { position: relative; }
.nav a[aria-current="page"] { box-shadow: none; }
.nav a[aria-current="page"]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 3px; border-radius: 3px;
  background: var(--spectrum); background-size: 200% 100%; animation: sweep 6s linear infinite; box-shadow: 0 0 12px rgba(167, 139, 250, .6); }
.site-header.compact .nav.open a[aria-current="page"]::after { left: 6px; right: auto; width: 48px; bottom: 8px; }

/* Home hero: no tilt, a spectral ring around the video, and no flash of the
   still image while the player loads (the image shows only with no video). */
.hero-art { transform: none; }
.hero .grid-2 { align-items: center; }
.hero-video { position: relative; padding: 3px; border-radius: calc(var(--radius) + 3px);
  background: var(--spectrum); background-size: 300% 100%; animation: sweep 10s linear infinite;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 40px rgba(167, 139, 250, .18); }
.hero-video .media { border: 0; border-radius: var(--radius); }
.media.has-video > img { display: none; }

/* Next show: a live countdown and "add to calendar". */
.showtime .count { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: rgba(167, 139, 250, .16);
  color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-links { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; font-size: 15px; }
.cal-links a { font-weight: 700; }

/* Sections rise into view as you scroll (only with JavaScript, never for reduced motion). */
.js-reveal .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js-reveal .reveal.in { opacity: 1; transform: none; }
/* Whole sections fade only: a moved section would shift in-page link targets (#how, #contact) under the sticky header. */
.js-reveal section.reveal { transform: none; }

/* Share */
.share-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--soft); cursor: pointer; font: 700 14px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; }
.share-btn:hover { border-color: var(--green); color: var(--green); }

/* Spectral Sessions page: themed like spectralartfoundation.org (deep violet,
   Jumbie's banner, the Twitch player beside Watch live, the Spectralizer). */
body.theme-safe { --bg: #0a0910; --bg2: #100d18; --card: #151122; --line: rgba(167, 139, 250, .22); --muted: #b3a9c9; --soft: #d9d2ea; }
body.theme-safe .site-header { background: rgba(10, 9, 16, .94); }
body.theme-safe .site-footer { background: #0d0b14; }
.safe-banner { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--line); }
.safe-facts { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 0; }
.safe-facts div { padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.safe-facts dt { font: 400 1.9rem/1 var(--serif); letter-spacing: .03em; color: var(--text); }
.safe-facts dd { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.twitch-mini { position: relative; width: 100%; max-width: 560px; aspect-ratio: 4 / 3; min-height: 300px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: #000; }
.twitch-mini iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.twitch-mini .tw-poster { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 15px; text-align: center; padding: 16px; }
.live-art-box { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; background: #000;
  border: 1px solid var(--line); box-shadow: 0 0 40px rgba(167, 139, 250, .15); }
.live-art-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.live-art-box.is-paused iframe { visibility: hidden; }
/* /spectral hero (owner, 10 Nov 2026): Jumbie's demo Spectralizer from SAFE (/jumbie-art: category, artwork,
   Add to Spectralizer, Buy a print) under the Twitch player, and a Spectral Art Foundation button. */
.spectral-media { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 560px; min-width: 0; }
.live-art-box.jumbie-box { aspect-ratio: auto; height: clamp(540px, 112vw, 620px); box-shadow: none; }
/* Twitch autoplays a muted embed only while Chromium counts its player as visible: no glow from a neighbor may paint
   over it (a 40px glow on the box below did, 10 Nov 2026), so the player also sits above its neighbors. */
.spectral-media .twitch-mini { z-index: 1; }
.safe-cta { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 14px; margin-top: 16px;
  min-height: 56px; max-width: 100%; padding: 10px 22px 10px 12px; border-radius: 999px; text-decoration: none; color: #fff;
  background: radial-gradient(120% 140% at 0% 50%, rgba(167, 139, 250, .28), transparent 60%), #0d0a18; box-shadow: 0 0 22px -4px rgba(167, 139, 250, .6); }
.safe-cta::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: linear-gradient(90deg, #ff5a5a, #ff9d45, #ffd84d, #52d98c, #43cfe2, #6d95ff, #b585ff, #ff5a5a); background-size: 200% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: safeRing 4s linear infinite; }
.safe-cta::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 35%; pointer-events: none; z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255, 90, 90, .35), rgba(255, 216, 77, .4), rgba(82, 217, 140, .4), rgba(67, 207, 226, .4), rgba(181, 133, 255, .35), transparent);
  mix-blend-mode: screen; animation: safeSweep 3.6s ease-in-out infinite; }
@keyframes safeRing { to { background-position: 200% 0; } }
@keyframes safeSweep { 0%, 35% { left: -40%; } 100% { left: 110%; } }
.safe-cta img { width: 84px; height: auto; flex: 0 0 auto; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .25)); position: relative; z-index: 2; }
.safe-cta span { display: flex; flex-direction: column; line-height: 1.15; position: relative; z-index: 2; min-width: 0; }
.safe-cta b { font: 400 1.35rem/1.05 var(--serif); letter-spacing: .04em; }
.safe-cta small { font-size: .8rem; color: #d6ccf5; letter-spacing: .03em; }
.safe-cta:hover { color: #fff; box-shadow: 0 0 30px -2px rgba(167, 139, 250, .9); }
.safe-cta:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
html.no-motion .safe-cta::after { display: none; }
@media (max-width: 480px) { .safe-cta { display: flex; justify-content: center; } }
.live-art-box.is-paused::after { content: "Animations are paused. Press \"Play animations\" at the bottom of the page, or open the Spectralizer."; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; color: var(--soft); font-size: .95rem; }
.art-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 22px; list-style: none; padding: 0; }
.art-strip li { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.art-strip img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #000; }
.art-strip .t { display: block; padding: 8px 10px 4px; font-size: 14px; color: var(--soft); }
.art-strip a.yt { display: block; padding: 0 10px 10px; font-size: 13px; font-weight: 700; }
.blend-tree { display: block; width: 100%; max-width: 760px; height: auto; margin: 0 auto; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; }

/* The stream page keeps its player and chat; it now wears the shared header and footer. */
body.stream-page main { display: block; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; }
}

/* A site-wide "Pause animations" switch (WCAG 2.2.2, Pause, Stop, Hide): the
   title sweeps, the tab ripple and the video ring stop; the choice is kept. */
html.no-motion *, html.no-motion *::before, html.no-motion *::after { animation-play-state: paused !important; }
.motion-btn { margin-left: 8px; }

/* Pages fade between each other where the browser supports it (progressive). */
@view-transition { navigation: auto; }

/* Home and Spectral heroes: a tighter headline and a wider media column, so the
   video sits beside three lines of title instead of floating mid-column. */
.hero h1 { font-size: clamp(2.6rem, 5.2vw, 4.4rem); max-width: 14ch; }
/* Home: three lines at desktop width, so both buttons sit above the fold at 1440x900. */
[data-page="home"] .hero h1 { font-size: clamp(2.6rem, 4.6vw, 4rem); max-width: none; }
[data-page="home"] .hero .showtime { margin-top: 22px; }
@media (min-width: 901px) { .hero .grid-2 { grid-template-columns: 1fr 1.12fr; } }

/* Printing: show every section, even those not yet scrolled into view. */
@media print { .js-reveal .reveal { opacity: 1 !important; transform: none !important; } }

/* ===== 10 Nov 2026 ===== */
/* "Live now" bar at the top of every page, Sundays 3 to 9 PM Eastern (owner):
   a spectrum band that links to /stream. The pulse and the sweep stop with
   "Pause animations" (html.no-motion) and for reduced motion. */
.live-bar { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; min-height: 44px; padding: 8px 16px;
  text-align: center; text-decoration: none; color: #fff; font: 700 15px/1.25 var(--cond); letter-spacing: .06em;
  /* A dark veil over the spectrum keeps white text at 4.5:1 or better on every hue. */
  background: linear-gradient(rgba(0, 0, 0, .38), rgba(0, 0, 0, .38)), linear-gradient(90deg, #7a1030, #8a2be2, #1d6fd1, #0f8f6f, #b8860b, #7a1030);
  background-size: 100% 100%, 300% 100%;
  animation: liveSweep 12s linear infinite; position: relative; z-index: 60; }
.live-bar[hidden] { display: none; }
.live-bar b { text-transform: uppercase; letter-spacing: .14em; font-size: 15px; }
.live-bar .live-text { font-weight: 600; letter-spacing: .03em; }
.live-bar .live-go { font-size: 18px; }
.live-bar:hover .live-text, .live-bar:focus-visible .live-text { text-decoration: underline; text-underline-offset: 3px; }
.live-dot { width: 12px; height: 12px; border-radius: 50%; background: #ff2d55; box-shadow: 0 0 0 0 rgba(255, 45, 85, .7); animation: livePulse 1.6s ease-out infinite; flex: 0 0 auto; }
@keyframes liveSweep { from { background-position: 0 0, 0% 0; } to { background-position: 0 0, 300% 0; } }
@media (max-width: 440px) { .live-bar .live-go { display: none; } .live-bar { gap: 8px; font-size: 14px; } }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(255, 45, 85, .7); } 80%, 100% { box-shadow: 0 0 0 10px rgba(255, 45, 85, 0); } }
/* While live, a red dot on the Watch live tab. */
.is-live .nav a[href="/stream"]::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #ff2d55; vertical-align: 2px; }
@media (prefers-reduced-motion: reduce) { .live-bar, .live-dot { animation: none; } }
@media (forced-colors: active) { .live-bar { border-bottom: 2px solid CanvasText; } .live-dot { background: Highlight; } }

/* /spectral: each piece shows itself in the Spectralizer window, or opens in SpectralBreak. */
.art-strip button.art-show { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.art-strip button.art-show:focus-visible { outline-offset: -3px; }
.art-strip a.sb { display: block; padding: 0 10px 10px; font-size: 13px; font-weight: 700; min-height: 24px; }

/* ===== 10 Nov 2026, round 5 (owner) ===== */
/* Header tabs on hover or keyboard focus: no rainbow; the text lights up and
   the button gets a big broken crack across it ("break"). The current tab
   keeps its sweep and spectrum bar. */
.nav a:hover, .nav a:focus-visible {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'%3E%3Cpath d='M-2 23 L9 19 L16 25 L24 14 L31 22 L39 9 L46 18 L53 6 L58 17 L66 12 L72 27 L80 18 L88 24 L95 15 L102 19' stroke='rgba(0,0,0,.65)' stroke-width='4' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M-2 23 L9 19 L16 25 L24 14 L31 22 L39 9 L46 18 L53 6 L58 17 L66 12 L72 27 L80 18 L88 24 L95 15 L102 19' stroke='%23fff' stroke-width='1.8' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M24 14 L21 2 M39 9 L37 -1 M53 6 L56 -1 M46 18 L49 32 L45 41 M72 27 L70 41 M16 25 L12 41 M88 24 L92 41 M66 12 L70 1 M31 22 L35 33 M80 18 L83 8' stroke='%23fff' stroke-width='1.1' stroke-opacity='.85' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat, rgba(255, 255, 255, .07);
  -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: #fff; color: #fff; animation: none;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .85)) drop-shadow(0 0 16px rgba(245, 200, 66, .55));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
@media (forced-colors: active) { .nav a:hover, .nav a:focus-visible { background: none; filter: none; } }

/* /spectral: the pieces from the show in a dropdown (there will be 40+). */
.art-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 22px; }
.art-pick[hidden] { display: none; }
.art-pick label { font: 700 14px/1.2 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.art-pick select { min-height: 44px; max-width: 100%; padding: 10px 14px; border-radius: 999px; font: 600 16px var(--sans);
  color: var(--text); background: var(--card); border: 1px solid var(--line); }
.art-pick .btn[hidden] { display: none; }

/* /spectral: the RGB flashlight simulator (from spectralartfoundation.org). */
.flash-sim { margin-top: 18px; background: #000; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-align: left; }
.flash-sim .flash-title { margin: 0; padding: 12px 14px; font: 700 14px/1.3 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--text); background: var(--card); }
.flash-sim canvas { display: block; width: 100%; height: auto; touch-action: pan-y; cursor: crosshair; -webkit-tap-highlight-color: transparent; }
.flash-sim .sim-controls { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: var(--card); border-top: 1px solid var(--line); }
.flash-sim .swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.flash-sim .swatch { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); cursor: pointer; padding: 0; }
.flash-sim .swatch[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
.flash-sim .sim-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.flash-sim .chip { min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--soft);
  font: 700 13px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.flash-sim .chip[aria-pressed="true"] { color: #fff; border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .08); }
.flash-sim .sim-dim { display: flex; align-items: center; flex: 1 1 160px; min-width: 0; }
.flash-sim .sim-dim input { width: 100%; min-height: 32px; accent-color: #fff; }
.flash-sim.room-off .sim-dim { opacity: .55; }
.flash-sim .flash-note { margin: 0; padding: 10px 14px 12px; font-size: 14px; color: var(--soft); background: var(--card); }

/* Full-screen picture (the blend tree), in the same tab. */
.zoom-view { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 12px;
  background: rgba(0, 0, 0, .94); cursor: zoom-out; }
.zoom-view img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: #fff; border-radius: 6px; }
.zoom-view .zoom-close { position: absolute; top: 12px; right: 12px; min-height: 44px; padding: 10px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .5); background: rgba(0, 0, 0, .7); color: #fff; font: 700 14px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; }
html.zoom-open, html.zoom-open body { overflow: hidden; }
a[data-zoom] { cursor: zoom-in; display: block; }
/* Twitch autoplays only at 300 px wide or more: on the narrowest phones the
   player runs edge to edge (the column is 288 px at 320). Never scale it. */
@media (max-width: 340px) { .twitch-mini { width: calc(100% + 32px); max-width: none; margin-left: -16px; margin-right: -16px; border-radius: 0; } }

/* ===== 10 Nov 2026, round 6 (owner) ===== */
/* A different crack on each header tab ("a different distinct pattern per button"):
   1 diagonal, 2 impact star, 3 twin cracks, 4 lightning bolt, 5 spider web, 6 branching. */
.nav a:nth-child(1):hover, .nav a:nth-child(1):focus-visible { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-2 23 L9 19 L16 25 L24 14 L31 22 L39 9 L46 18 L53 6 L58 17 L66 12 L72 27 L80 18 L88 24 L95 15 L102 19' stroke='rgba(0,0,0,.65)' stroke-width='4' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M-2 23 L9 19 L16 25 L24 14 L31 22 L39 9 L46 18 L53 6 L58 17 L66 12 L72 27 L80 18 L88 24 L95 15 L102 19' stroke='%23fff' stroke-width='1.8' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M24 14 L21 2 M39 9 L37 -1 M53 6 L56 -1 M46 18 L49 32 L45 41 M72 27 L70 41 M16 25 L12 41 M88 24 L92 41 M66 12 L70 1' stroke='%23fff' stroke-width='1.1' stroke-opacity='.85' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat, rgba(255, 255, 255, .07); -webkit-background-clip: border-box; background-clip: border-box; }
.nav a:nth-child(2):hover, .nav a:nth-child(2):focus-visible { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M34 22 L47.2 22.7 L67.7 23.9 M34 22 L57.6 28.5 L81.9 38.2 M34 22 L42.0 27.6 L47.3 36.1 M34 22 L28.7 32.7 L26.7 48.8 M34 22 L26.8 26.9 L13.5 34.2 M34 22 L11.1 26.2 L-21.2 32.5' stroke='rgba(0,0,0,.65)' stroke-width='4' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M34 22 L47.2 22.7 L67.7 23.9 M34 22 L57.6 28.5 L81.9 38.2 M34 22 L42.0 27.6 L47.3 36.1 M34 22 L28.7 32.7 L26.7 48.8 M34 22 L26.8 26.9 L13.5 34.2 M34 22 L11.1 26.2 L-21.2 32.5' stroke='%23fff' stroke-width='1.8' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M34 22 L16.8 21.3 L0.3 20.1 M34 22 L14.4 15.5 L-13.9 5.8 M34 22 L30.0 16.4 L20.7 7.9 M34 22 L35.3 11.3 L41.3 -4.8 M34 22 L45.2 17.1 L54.5 9.8 M34 22 L60.9 17.8 L89.2 11.5' stroke='rgba(0,0,0,.65)' stroke-width='4' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M34 22 L16.8 21.3 L0.3 20.1 M34 22 L14.4 15.5 L-13.9 5.8 M34 22 L30.0 16.4 L20.7 7.9 M34 22 L35.3 11.3 L41.3 -4.8 M34 22 L45.2 17.1 L54.5 9.8 M34 22 L60.9 17.8 L89.2 11.5' stroke='%23fff' stroke-width='1.8' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M28 19 L39 18 L41 25 L30 27 Z' stroke='%23fff' stroke-width='1.1' stroke-opacity='.85' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat, rgba(255, 255, 255, .07); -webkit-background-clip: border-box; background-clip: border-box; }
.nav a:nth-child(3):hover, .nav a:nth-child(3):focus-visible { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-2 12 L12 15 L20 9 L33 14 L44 8 L57 13 L69 7 L81 12 L92 6 L102 10' stroke='rgba(0,0,0,.65)' stroke-width='4' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M-2 12 L12 15 L20 9 L33 14 L44 8 L57 13 L69 7 L81 12 L92 6 L102 10' stroke='%23fff' stroke-width='1.8' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M-2 31 L10 27 L22 33 L35 28 L47 34 L60 27 L71 32 L84 26 L95 31 L102 28' stroke='rgba(0,0,0,.65)' stroke-width='4' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M-2 31 L10 27 L22 33 L35 28 L47 34 L60 27 L71 32 L84 26 L95 31 L102 28' stroke='%23fff' stroke-width='1.8' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M20 9 L24 21 L22 33 M57 13 L55 21 L60 27 M81 12 L86 20 L84 26' stroke='%23fff' stroke-width='1.1' stroke-opacity='.85' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat, rgba(255, 255, 255, .07); -webkit-background-clip: border-box; background-clip: border-box; }
.nav a:nth-child(4):hover, .nav a:nth-child(4):focus-visible { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M58 -2 L46 13 L56 15 L41 29 L50 30 L38 42' stroke='rgba(0,0,0,.65)' stroke-width='4' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M58 -2 L46 13 L56 15 L41 29 L50 30 L38 42' stroke='%23fff' stroke-width='1.8' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M46 13 L33 10 L22 14 M56 15 L70 12 L84 16 M41 29 L28 33 M50 30 L64 34 L78 31 M33 10 L28 3 M70 12 L74 4' stroke='%23fff' stroke-width='1.1' stroke-opacity='.85' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat, rgba(255, 255, 255, .07); -webkit-background-clip: border-box; background-clip: border-box; }
.nav a:nth-child(5):hover, .nav a:nth-child(5):focus-visible { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M62 20 L109.8 22.1 M62 20 L98.2 35.7 M62 20 L72.8 43.4 M62 20 L43.2 42.1 M62 20 L20.9 32.4 M62 20 L14.2 17.9 M62 20 L25.8 4.3 M62 20 L51.2 -3.4 M62 20 L80.8 -2.1 M62 20 L103.1 7.6' stroke='rgba(0,0,0,.65)' stroke-width='4' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M62 20 L109.8 22.1 M62 20 L98.2 35.7 M62 20 L72.8 43.4 M62 20 L43.2 42.1 M62 20 L20.9 32.4 M62 20 L14.2 17.9 M62 20 L25.8 4.3 M62 20 L51.2 -3.4 M62 20 L80.8 -2.1 M62 20 L103.1 7.6' stroke='%23fff' stroke-width='1.8' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M72.0 20.4 L69.5 23.3 L64.2 24.9 L58.1 24.6 L53.4 22.6 L52.0 19.6 L54.5 16.7 L59.8 15.1 L65.9 15.4 L70.6 17.4 Z M85.9 21.0 L80.1 27.9 L67.4 31.7 L52.6 31.0 L41.4 26.2 L38.1 19.0 L43.9 12.1 L56.6 8.3 L71.4 9.0 L82.6 13.8 Z' stroke='%23fff' stroke-width='1.1' stroke-opacity='.85' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat, rgba(255, 255, 255, .07); -webkit-background-clip: border-box; background-clip: border-box; }
.nav a:nth-child(6):hover, .nav a:nth-child(6):focus-visible { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 42 L22 33 L19 25 L27 18 L25 9 L33 -2' stroke='rgba(0,0,0,.65)' stroke-width='4' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M18 42 L22 33 L19 25 L27 18 L25 9 L33 -2' stroke='%23fff' stroke-width='1.8' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M22 33 L37 30 L45 21 L58 23 L66 12 L80 14 L87 4 L102 6' stroke='rgba(0,0,0,.65)' stroke-width='4' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M22 33 L37 30 L45 21 L58 23 L66 12 L80 14 L87 4 L102 6' stroke='%23fff' stroke-width='1.8' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M19 25 L9 21 L3 25 M27 18 L38 12 M45 21 L48 33 L55 42 M66 12 L64 2 M80 14 L88 26 L100 30' stroke='%23fff' stroke-width='1.1' stroke-opacity='.85' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat, rgba(255, 255, 255, .07); -webkit-background-clip: border-box; background-clip: border-box; }
@media (forced-colors: active) { .nav a:hover, .nav a:focus-visible { background: none !important; } }

/* Portrait reels (9:16): the home hero's second video and /community's. */
.media.r916 { aspect-ratio: 9 / 16; }
.media.r916 .yt-auto { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hero-video.reel-video { max-width: 300px; margin: 22px auto 0; }
.reel-caption { text-align: center; }
.comm-hero { align-items: center; }
.comm-hero .reel-video { margin-top: 0; }

/* "Three ways in": the picture beside the heading. */
.paths-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 32px; align-items: center; margin-bottom: 34px; }
.paths-head .section-head { margin-bottom: 0; }
.paths-pic img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); }
@media (max-width: 760px) { .paths-head { grid-template-columns: 1fr; } .paths-pic { max-width: 340px; } }
/* Home hero with two videos: the columns align at the top (the text no longer
   slides down beside the taller video column), and the reel is narrower. */
@media (min-width: 901px) { [data-page="home"] .hero .grid-2 { align-items: start; } }
[data-page="home"] .hero .hero-video2 { margin-top: 22px; }