/* ==========================================================================
   DISCO — one page. Loaded on a/disco.html.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   A mirror ball hangs on its string at the crown, its facets catching the
   light; starburst flares sit where the light lands; a field of coloured
   specks turns slowly behind everything; the name is set in moving gold.
   The record is set on satin panels with gold-sheen heads. The shell (rail,
   top bar, community drawer) is never restyled: every rule here is scoped
   to .dc-hero or .dc-rec.

   Contrast: cream #F6E7C8 on chocolate #261508 is 14.6:1 and on the
   brightest satin stop (#4B2A12) above 10:1. Gold text is used only where it
   is large (the title and the heads), and the heads' sheen never drops below
   #C89042 (4.3:1 on the brightest satin, 6:1 on the ground). The title keeps
   the full sheen with its deep stops: it is the brand move, and never under
   56px. Body text is always solid. Every animation is off under
   prefers-reduced-motion. The specks layers are clipped by their own
   wrappers, so the huge turning field never widens the page.
   ========================================================================== */
@font-face {
  font-family: "SyneDC";
  src: url("fonts/syne.woff2") format("woff2-variations"), url("fonts/syne.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
.dc-page {
  --dc-choc: #261508; --dc-cream: #F6E7C8; --dc-choc2: #31190B; --dc-gold: #EFC05A; --dc-gold2: #D9A33C; --dc-gold3: #C89042;
  --dc-lilac: #B98CE0; --dc-blue: #7FA7F2;
  --dc-face: "SyneDC", "Syne", "Helvetica Neue", Arial, sans-serif;
  --dc-specks-bg: radial-gradient(circle 3px at 56% 71%,rgba(185,140,224,.8),transparent),radial-gradient(circle 4px at 62% 48%,rgba(239,192,90,.9),transparent),radial-gradient(circle 4px at 42% 73%,rgba(127,167,242,.8),transparent),radial-gradient(circle 3px at 92% 25%,rgba(246,231,200,.9),transparent),radial-gradient(circle 4px at 70% 57%,rgba(246,231,200,.9),transparent),radial-gradient(circle 3px at 66% 37%,rgba(127,167,242,.8),transparent),radial-gradient(circle 3px at 69% 18%,rgba(246,231,200,.9),transparent),radial-gradient(circle 3px at 35% 56%,rgba(246,231,200,.9),transparent),radial-gradient(circle 4px at 86% 1%,rgba(185,140,224,.8),transparent),radial-gradient(circle 3px at 0% 29%,rgba(246,231,200,.9),transparent),radial-gradient(circle 3px at 93% 17%,rgba(127,167,242,.8),transparent),radial-gradient(circle 3px at 3% 89%,rgba(239,192,90,.9),transparent),radial-gradient(circle 4px at 48% 74%,rgba(239,192,90,.9),transparent),radial-gradient(circle 4px at 30% 31%,rgba(246,231,200,.9),transparent),radial-gradient(circle 4px at 71% 30%,rgba(185,140,224,.8),transparent),radial-gradient(circle 4px at 53% 54%,rgba(127,167,242,.8),transparent),radial-gradient(circle 3px at 70% 2%,rgba(127,167,242,.8),transparent),radial-gradient(circle 4px at 37% 27%,rgba(185,140,224,.8),transparent),radial-gradient(circle 4px at 98% 36%,rgba(246,231,200,.9),transparent),radial-gradient(circle 2px at 83% 64%,rgba(127,167,242,.8),transparent),radial-gradient(circle 3px at 64% 59%,rgba(239,192,90,.9),transparent),radial-gradient(circle 4px at 75% 44%,rgba(185,140,224,.8),transparent),radial-gradient(circle 3px at 35% 98%,rgba(246,231,200,.9),transparent),radial-gradient(circle 2px at 77% 40%,rgba(127,167,242,.8),transparent),radial-gradient(circle 4px at 53% 51%,rgba(239,192,90,.9),transparent),radial-gradient(circle 4px at 46% 40%,rgba(127,167,242,.8),transparent),radial-gradient(circle 4px at 95% 73%,rgba(246,231,200,.9),transparent),radial-gradient(circle 3px at 68% 71%,rgba(185,140,224,.8),transparent),radial-gradient(circle 4px at 32% 76%,rgba(239,192,90,.9),transparent),radial-gradient(circle 4px at 43% 35%,rgba(239,192,90,.9),transparent),radial-gradient(circle 3px at 89% 36%,rgba(246,231,200,.9),transparent),radial-gradient(circle 4px at 12% 25%,rgba(246,231,200,.9),transparent),radial-gradient(circle 3px at 22% 89%,rgba(239,192,90,.9),transparent),radial-gradient(circle 3px at 16% 24%,rgba(239,192,90,.9),transparent),radial-gradient(circle 3px at 40% 40%,rgba(239,192,90,.9),transparent),radial-gradient(circle 3px at 54% 33%,rgba(246,231,200,.9),transparent),radial-gradient(circle 2px at 0% 2%,rgba(239,192,90,.9),transparent),radial-gradient(circle 3px at 59% 60%,rgba(185,140,224,.8),transparent),radial-gradient(circle 4px at 42% 9%,rgba(239,192,90,.9),transparent),radial-gradient(circle 2px at 64% 49%,rgba(127,167,242,.8),transparent),radial-gradient(circle 3px at 27% 14%,rgba(127,167,242,.8),transparent),radial-gradient(circle 4px at 97% 75%,rgba(246,231,200,.9),transparent),radial-gradient(circle 4px at 85% 74%,rgba(239,192,90,.9),transparent),radial-gradient(circle 3px at 95% 47%,rgba(246,231,200,.9),transparent),radial-gradient(circle 3px at 49% 3%,rgba(127,167,242,.8),transparent),radial-gradient(circle 3px at 54% 67%,rgba(127,167,242,.8),transparent),radial-gradient(circle 2px at 10% 21%,rgba(239,192,90,.9),transparent),radial-gradient(circle 4px at 46% 85%,rgba(246,231,200,.9),transparent),radial-gradient(circle 2px at 21% 35%,rgba(246,231,200,.9),transparent),radial-gradient(circle 4px at 81% 93%,rgba(185,140,224,.8),transparent),radial-gradient(circle 2px at 41% 29%,rgba(246,231,200,.9),transparent),radial-gradient(circle 3px at 58% 1%,rgba(185,140,224,.8),transparent),radial-gradient(circle 3px at 62% 7%,rgba(127,167,242,.8),transparent),radial-gradient(circle 3px at 43% 57%,rgba(185,140,224,.8),transparent),radial-gradient(circle 3px at 75% 90%,rgba(127,167,242,.8),transparent),radial-gradient(circle 4px at 26% 74%,rgba(185,140,224,.8),transparent),radial-gradient(circle 2px at 50% 4%,rgba(127,167,242,.8),transparent),radial-gradient(circle 4px at 39% 18%,rgba(239,192,90,.9),transparent),radial-gradient(circle 3px at 65% 49%,rgba(246,231,200,.9),transparent),radial-gradient(circle 4px at 91% 37%,rgba(185,140,224,.8),transparent),radial-gradient(circle 2px at 39% 46%,rgba(185,140,224,.8),transparent),radial-gradient(circle 3px at 41% 48%,rgba(185,140,224,.8),transparent),radial-gradient(circle 3px at 32% 47%,rgba(239,192,90,.9),transparent),radial-gradient(circle 4px at 20% 35%,rgba(185,140,224,.8),transparent),radial-gradient(circle 3px at 13% 51%,rgba(246,231,200,.9),transparent),radial-gradient(circle 3px at 76% 92%,rgba(246,231,200,.9),transparent),radial-gradient(circle 4px at 86% 13%,rgba(239,192,90,.9),transparent),radial-gradient(circle 2px at 0% 4%,rgba(185,140,224,.8),transparent),radial-gradient(circle 2px at 6% 94%,rgba(239,192,90,.9),transparent),radial-gradient(circle 3px at 55% 71%,rgba(185,140,224,.8),transparent);
  background: var(--paper); /* shell mat; the room ground lives on main */
}
.dc-page main { background: var(--dc-choc); color: var(--dc-cream); }
.dc-hero, .dc-rec { font: 400 1.125rem/1.6 var(--dc-face); color: var(--dc-cream); letter-spacing: 0; }
.dc-hero a, .dc-rec a { color: var(--dc-gold); }
.dc-hero a:hover, .dc-rec a:hover { color: var(--dc-cream); }
.dc-hero :focus-visible, .dc-rec :focus-visible { outline: 3px solid var(--dc-gold); outline-offset: 3px; }

/* ---- the gold: the title keeps the artifact's full sheen; heads stay bright ---- */
.dc-gold, .dc-sheen {
  color: var(--dc-gold);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text; background-clip: text;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background-size: 250% 100%;
}
.dc-gold { display: inline-block; padding: 0 0.05em; background-image: linear-gradient(100deg, #8a5a1e 0%, #EFC05A 22%, #fff3cf 30%, #D9A33C 42%, #6e4513 55%, #EFC05A 70%, #fff3cf 76%, #C89042 90%); }
.dc-sheen { background-image: linear-gradient(100deg, #C89042 0%, #EFC05A 22%, #fff3cf 30%, #D9A33C 44%, #C89042 55%, #EFC05A 70%, #fff3cf 76%, #D9A33C 90%); }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .dc-gold, .dc-sheen { -webkit-text-fill-color: currentColor; background: none; }
}
@media (forced-colors: active) {
  .dc-gold, .dc-sheen { -webkit-text-fill-color: CanvasText; background: none; }
}

/* ---- the specks: a clipped wrapper, a huge turning field inside it ---- */
.dc-specks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.dc-specks b {
  position: absolute; left: 50%; top: 40%; width: 260vmax; height: 260vmax; margin: -130vmax 0 0 -130vmax;
  background: var(--dc-specks-bg); opacity: 0.8;
}
/* In the record the field stays in view while the panels scroll over it. */
.dc-specks--rec { position: sticky; top: 0; bottom: auto; height: 100vh; margin-bottom: -100vh; }
.dc-specks--rec b { top: 50%; }

/* ---- hero ---- */
.dc-hero {
  position: relative; overflow: hidden; container-type: inline-size;
  min-height: min(94vh, 900px); display: grid; justify-items: center; align-items: start;
  padding: 0 16px 60px; text-align: center;
  background: radial-gradient(60% 50% at 50% 30%, #4a2a10, var(--dc-choc) 70%);
}
.dc-stage { position: relative; z-index: 1; width: min(100%, 900px); display: flex; flex-direction: column; align-items: center; }
.dc-string { display: block; width: 2px; height: clamp(48px, 12vh, 120px); background: linear-gradient(var(--dc-gold3), var(--dc-gold)); }
.dc-ball {
  position: relative; width: clamp(180px, 34cqi, 340px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.85), transparent 22%), radial-gradient(circle at 50% 50%, #b9b3a8, #5c4a36 72%, #2b1a0c);
  box-shadow: 0 0 80px rgba(239, 192, 90, 0.35);
}
.dc-ball::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-linear-gradient(0deg, rgba(38, 21, 8, 0.7) 0 2px, transparent 2px 18px), repeating-linear-gradient(90deg, rgba(38, 21, 8, 0.7) 0 2px, transparent 2px 18px);
}
.dc-ball::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 58%, rgba(38, 21, 8, 0.55) 100%);
}
.dc-ball i { position: absolute; z-index: 1; width: 16px; height: 16px; background: #fff8e0; opacity: 0.3; }
.dc-flare { position: absolute; z-index: 2; width: clamp(70px, 14cqi, 120px); height: auto; pointer-events: none; }
.dc-flare--1 { left: calc(50% + 70px); top: 6%; }
.dc-flare--2 { left: 6%; top: 52%; scale: 0.6; }
.dc-flare--3 { right: 6%; top: 28%; scale: 0.8; }
.dc-h1 { margin: 26px 0 0; font: 800 clamp(56px, 17cqi, 220px)/0.85 var(--dc-face); letter-spacing: -0.04em; }
.dc-def { margin: 18px auto 0; max-width: 30ch; font-size: 20px; line-height: 1.5; color: var(--dc-cream); }

/* ---- the record ---- */
.dc-rec { position: relative; overflow: clip; isolation: isolate; padding-bottom: 60px; }
:where(.dc-rec) p { margin: 0 0 14px; } /* zero specificity: every .dc-* margin below outranks it */
.dc-wrap { position: relative; z-index: 1; max-width: 1060px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); container-type: inline-size; }
.dc-satin {
  position: relative; margin-top: 70px; padding: 32px clamp(18px, 4cqi, 42px); border-radius: 28px;
  background: linear-gradient(115deg, #2e1809 0%, #4b2a12 18%, #2a1608 34%, #3d220e 52%, #241307 70%, #4a2911 86%, #2c170a 100%);
  box-shadow: inset 0 1px 0 rgba(246, 231, 200, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.4), 0 20px 50px rgba(0, 0, 0, 0.4);
}
.dc-satin > :last-child { margin-bottom: 0; }
.dc-satin h2 { margin: 0 0 16px; font: 800 clamp(32px, 6cqi, 56px)/1.02 var(--dc-face); letter-spacing: -0.02em; }
.dc-lbl { display: block; margin-bottom: 6px; font: 600 13px/1.4 var(--dc-face); letter-spacing: 0.24em; text-transform: uppercase; color: var(--dc-lilac); }

.dc-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; margin: 0; }
.dc-meta dt { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dc-gold); }
.dc-meta dd { margin: 0; font-weight: 600; }

.dc-big { margin: 0 0 16px; font: 800 clamp(28px, 5cqi, 52px)/1.05 var(--dc-face); letter-spacing: -0.02em; color: var(--dc-cream); }
.dc-refuse {
  margin: 18px 0 0; padding: 16px 20px; border-radius: 18px;
  background: linear-gradient(90deg, rgba(185, 140, 224, 0.25), rgba(127, 167, 242, 0.25)); border: 1px solid rgba(185, 140, 224, 0.5);
}
.dc-refuse b { color: var(--dc-lilac); }
.dc-dx { margin: 16px 0; font: 600 clamp(22px, 3cqi, 28px)/1.35 var(--dc-face); color: var(--dc-gold); }

.dc-tw { overflow-x: auto; }
.dc-ct { width: 100%; border-collapse: collapse; }
.dc-ct th, .dc-ct td { padding: 6px 8px; border-bottom: 1px solid rgba(239, 192, 90, 0.2); text-align: left; vertical-align: top; }
.dc-ct th { width: 30%; font-weight: 600; }
.dc-ct th a { display: inline-flex; align-items: center; min-height: 44px; }
.dc-ct td { padding-top: 15px; }
.dc-ct small { display: block; color: var(--dc-lilac); font-size: 13px; }
.dc-none { color: rgba(246, 231, 200, 0.82); font-style: italic; }
.dc-spec { display: block; font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--dc-gold); margin-bottom: 4px; }
.dc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.dc-tags a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--dc-gold); border-radius: 999px; text-decoration: none; }
.dc-swatch { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-swatch span {
  width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600;
  box-shadow: inset -6px -8px 14px rgba(0, 0, 0, 0.35), inset 6px 6px 10px rgba(255, 255, 255, 0.35);
}
.dc-asbuilt { margin: 6px 0 0; }

.dc-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dc-rule { padding: 18px; border-radius: 18px; background: rgba(0, 0, 0, 0.25); box-shadow: inset 0 1px 0 rgba(246, 231, 200, 0.15); }
.dc-rule--wide { grid-column: 1 / -1; }
.dc-rule h3 { margin: 0 0 4px; font: 800 24px/1.2 var(--dc-face); }
.dc-rule__one + .dc-rule__one { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(239, 192, 90, 0.2); }
.dc-k { display: block; margin-bottom: 6px; font-size: 14px; color: var(--dc-gold); }
.dc-rule p { margin: 0; }
.dc-ev { display: block; margin-top: 4px; font-size: 15px; font-style: italic; color: rgba(246, 231, 200, 0.82); }

.dc-firm { font-style: italic; }
.dc-rt { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 16px; margin-top: 14px; }
.dc-rt th, .dc-rt td { padding: 7px 8px; border-bottom: 1px solid rgba(239, 192, 90, 0.2); text-align: left; }
.dc-rt thead th { color: var(--dc-gold); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.dc-rt tbody th { font-weight: 600; }
.dc-y { color: var(--dc-gold); font-weight: 600; }
.dc-n { color: rgba(246, 231, 200, 0.82); }

.dc-conf { display: grid; gap: 12px; }
.dc-conf > a, .dc-conf > div {
  display: block; padding: 14px 18px; border-radius: 18px; background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 1px 0 rgba(246, 231, 200, 0.12); color: var(--dc-cream); text-decoration: none;
}
.dc-conf > a b { color: var(--dc-gold); text-decoration: underline; text-underline-offset: 3px; }
.dc-conf > a:hover { color: var(--dc-cream); box-shadow: inset 0 0 0 1px var(--dc-gold); }
.dc-conf small { color: var(--dc-lilac); font-size: 14px; }
.dc-conf span { display: block; margin-top: 4px; }

.dc-pills { display: flex; flex-wrap: wrap; gap: 12px; }
.dc-rec a.dc-pill {
  display: inline-flex; flex-direction: column; justify-content: center; max-width: 100%; min-height: 44px; padding: 12px 24px;
  border-radius: 999px; text-decoration: none; color: var(--dc-choc); font-size: 16px; line-height: 1.4;
  background: linear-gradient(180deg, #fff3cf 0%, #EFC05A 35%, #C89042 70%, #EFC05A 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7), 0 6px 20px rgba(239, 192, 90, 0.35);
}
.dc-pill b { font-weight: 800; font-size: 18px; }
.dc-rec a.dc-pill:hover { color: var(--dc-choc); filter: brightness(1.12); }
.dc-mach { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin: 20px 0 0; }
.dc-mach .dc-lbl { margin: 0; }
.dc-mach a, .dc-foot a { display: inline-flex; align-items: center; min-height: 44px; }
.dc-foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 12px; margin-top: 40px; padding: 0 16px; text-align: center; }

@container (max-width: 700px) {
  .dc-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dc-rules { grid-template-columns: 1fr; }
  .dc-rule--wide { grid-column: auto; }
  .dc-rec a.dc-pill { border-radius: 24px; }
}
@container (max-width: 440px) {
  .dc-meta { grid-template-columns: 1fr; }
  .dc-ct, .dc-ct tbody, .dc-ct tr, .dc-ct th, .dc-ct td { display: block; width: auto; }
  .dc-ct th { border-bottom: 0; padding-bottom: 0; }
  .dc-ct td { padding-top: 0; }
  .dc-satin { border-radius: 22px; }
}

/* ---- motion: all of it, and only when it is welcome ---- */
@media (prefers-reduced-motion: no-preference) {
  .dc-specks b { animation: dc-spin 90s linear infinite; }
  .dc-gold, .dc-sheen { animation: dc-sheen 6s ease-in-out infinite; }
  .dc-ball::before { animation: dc-turn 4s linear infinite; }
  .dc-ball i { animation: dc-twinkle 2.4s infinite; }
  .dc-flare { animation: dc-flare 3.2s ease-in-out infinite; }
  .dc-flare--2 { animation-delay: -1.1s; }
  .dc-flare--3 { animation-delay: -2.2s; }
}
@keyframes dc-spin { to { transform: rotate(360deg); } }
@keyframes dc-sheen { 50% { background-position: 100% 0; } }
@keyframes dc-turn { to { background-position: 18px 0, 18px 0; } }
@keyframes dc-twinkle { 0%, 100% { opacity: 0; } 50% { opacity: 0.95; } }
@keyframes dc-flare { 0%, 100% { opacity: 0.6; rotate: 0deg; } 50% { opacity: 1; rotate: 22deg; } }

/* research-dimension table at phone width: no fixed floor, cells wrap (QA 2026-09-29) */
@media (max-width: 480px) {
  .dc-rt { min-width: 0; }
  .dc-rt th, .dc-rt td { padding-inline: 6px; overflow-wrap: break-word; }
  .dc-rt thead th { letter-spacing: 0.04em; }
  .dc-rt { font-size: 14px; }
  .dc-rt thead th { font-size: 11px; }
}

/* phone: the hero sizes to the ball and title, not the viewport (was ~400px of empty floor at 375) */
@media (max-width: 600px) {
  .dc-hero { min-height: 0; }
}