/* ==========================================================================
   CIRCUS — one page. Loaded on a/circus.html.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   One showbill: chasing bulbs round the frame, a striped tent scallop over
   the masthead, and the record as stacked bands with no margin between them
   (red, cream, dark, paper, gold). The bill spans the whole main column,
   bleeding out by main's own padding and back in by the same, so there is
   no black gutter beside it. The shell (rail, top bar, community drawer) is
   never restyled: every rule here is scoped to .ci-hero or .ci-rec.
   ========================================================================== */
@font-face { font-family: "BungeeShadeX"; src: url("fonts/bungee-shade.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "AntonX"; src: url("fonts/anton.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "EczarX"; src: url("fonts/eczar.woff2") format("woff2-variations"); font-weight: 400 800; font-display: swap; }

.ci-page {
  --ci-cream: #F0E4C8; --ci-red: #A8231B; --ci-gold: #C8921E; --ci-black: #211A10; --ci-paper: #EAD9B0; --ci-brown: #6B5A38;
  --ci-red-deep: #7c1912; --ci-gold-deep: #8f6612; --ci-bulb: #fff6c9;
  --ci-shade: "BungeeShadeX", "Bungee Shade", "Arial Black", sans-serif;
  --ci-wood: "AntonX", "Anton", Impact, "Arial Narrow", sans-serif;
  --ci-serif: "EczarX", "Eczar", Georgia, serif;
  --ci-bulb-size: 26px;
  background: var(--paper);
}
/* The page ground is the bill's stock: no black shows beside the sheet. */
.ci-page main { background: var(--ci-cream); color: var(--ci-black); }

.ci-hero, .ci-rec {
  position: relative;
  font: 400 18px/1.5 var(--ci-serif); color: var(--ci-black); font-synthesis: weight style;
  background: var(--ci-cream);
  /* Full width (Annie, change 1): out by main's padding, back in by the same. */
  margin-inline: calc(var(--s6) * -1);
}
.ci-hero { container-type: inline-size; padding: var(--ci-bulb-size) var(--ci-bulb-size) 0; }
.ci-rec { padding: 0 var(--ci-bulb-size) var(--ci-bulb-size); }
.ci-hero a, .ci-rec a { color: var(--ci-red); }
.ci-hero a:hover, .ci-rec a:hover { color: var(--ci-black); background: var(--ci-gold); }
.ci-hero :focus-visible, .ci-rec :focus-visible { outline: 4px solid var(--ci-gold); outline-offset: 3px; }
/* Zero-specificity base so every per-class margin below outranks it. */
.ci-hero :where(p), .ci-rec :where(p) { margin: 8px auto; }
.ci-anton { font-family: var(--ci-wood); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; }

/* ---- the bulb frame: top/left/right on the hero, left/right/bottom on the record ---- */
.ci-bulbs { position: absolute; pointer-events: none; }
.ci-bulbs--t, .ci-bulbs--b { left: 0; right: 0; height: var(--ci-bulb-size); background: radial-gradient(circle, var(--ci-bulb) 0 4px, var(--ci-gold) 5px 7px, transparent 8px) 0 50% / var(--ci-bulb-size) var(--ci-bulb-size) repeat-x; }
.ci-bulbs--t { top: 0; }
.ci-bulbs--b { bottom: 0; }
.ci-bulbs--l, .ci-bulbs--r { top: 0; bottom: 0; width: var(--ci-bulb-size); background: radial-gradient(circle, var(--ci-bulb) 0 4px, var(--ci-gold) 5px 7px, transparent 8px) 50% 0 / var(--ci-bulb-size) var(--ci-bulb-size) repeat-y; }
.ci-bulbs--l { left: 0; }
.ci-bulbs--r { right: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ci-bulbs--t, .ci-bulbs--b { animation: ci-chase-x .9s steps(1) infinite; }
  .ci-bulbs--l, .ci-bulbs--r { animation: ci-chase-y .9s steps(1) infinite; }
  @keyframes ci-chase-x { 50% { background-position: calc(var(--ci-bulb-size) / 2) 50%; } }
  @keyframes ci-chase-y { 50% { background-position: 50% calc(var(--ci-bulb-size) / 2); } }
}
@media (prefers-reduced-motion: reduce) { .ci-hero *, .ci-rec * { animation: none !important; transition: none !important; } }

/* ---- the tent scallop ---- */
.ci-tent { height: 120px; position: relative; background: repeating-linear-gradient(90deg, var(--ci-red) 0 60px, var(--ci-cream) 60px 120px); -webkit-mask: radial-gradient(40px 26px at 50% 100%, transparent 98%, #000) 0 0 / 120px 100%; mask: radial-gradient(60px 30px at 60px 100%, transparent 98%, #000) 0 0 / 120px 100%; }

/* ---- the masthead ---- */
.ci-hero__in { padding: 22px clamp(10px, 3vw, 30px) 30px; text-align: center; border-bottom: 6px double var(--ci-black); }
.ci-b1 { margin: 0; font: 400 clamp(20px, 3.6vw, 40px)/1 var(--ci-wood); letter-spacing: .14em; color: var(--ci-red); }
.ci-h1 { margin: 6px 0; font: 400 clamp(48px, 15cqw, 220px)/.9 var(--ci-shade); white-space: nowrap; color: var(--ci-red); letter-spacing: .02em; text-transform: uppercase; }
.ci-b2 { margin: 0; font: 400 clamp(30px, 6vw, 76px)/1 var(--ci-wood); text-transform: uppercase; }
.ci-b3 { display: inline-block; margin: 10px 0 0; font: 800 clamp(18px, 2.4vw, 28px)/1 var(--ci-serif); font-style: italic; background: var(--ci-black); color: var(--ci-gold); padding: 8px 22px; }
.ci-defining { font-weight: 600; margin-top: 14px; }

/* ---- bands: stacked, no margin, divided by heavy double rules ---- */
.ci-band { border-bottom: 6px double var(--ci-black); padding: 18px clamp(12px, 3vw, 30px); text-align: center; }
.ci-band--red { background: var(--ci-red); color: var(--ci-cream); }
.ci-band--gold { background: var(--ci-gold); }
.ci-band--dark { background: var(--ci-black); color: var(--ci-cream); }
.ci-band--paper { background: var(--ci-paper); }
.ci-band--foot { border-bottom: 0; }
.ci-rec .ci-band--dark a { color: var(--ci-gold); }
.ci-rec .ci-band--red a { color: var(--ci-cream); } /* gold on red is 2.6:1; cream is 5.9:1 */
.ci-rec .ci-band--red a:hover, .ci-rec .ci-band--dark a:hover { color: var(--ci-black); background: var(--ci-gold); }
.ci-rec .ci-band h2 { margin: 0; font: inherit; line-height: 1; letter-spacing: 0; text-transform: none; }

/* ---- ribbon banners ---- */
.ci-ribbon { position: relative; isolation: isolate; display: inline-block; margin: 0 40px 12px; padding: 10px 34px; background: var(--ci-red); color: var(--ci-cream); font: 400 clamp(20px, 3vw, 34px)/1.05 var(--ci-wood); text-transform: uppercase; letter-spacing: .05em; }
.ci-ribbon::before, .ci-ribbon::after { content: ""; position: absolute; top: 10px; bottom: -10px; width: 30px; background: var(--ci-red-deep); z-index: -1; }
.ci-ribbon::before { left: -30px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%); }
.ci-ribbon::after { right: -30px; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%); }
.ci-ribbon--g { background: var(--ci-gold); color: var(--ci-black); }
.ci-ribbon--g::before, .ci-ribbon--g::after { background: var(--ci-gold-deep); }

/* ---- tags: the big wood-type lines inside bands ---- */
.ci-tag { font: 400 clamp(26px, 5vw, 64px)/1 var(--ci-wood); text-transform: uppercase; margin: 4px auto; }
.ci-tag--shade { font-family: var(--ci-shade); font-size: clamp(28px, 5.4vw, 70px); }
.ci-tag--red { color: var(--ci-red); }
.ci-tag--gold { color: var(--ci-gold); }
.ci-rec .ci-band h2.ci-tag--use { font: 400 clamp(28px, 5.4vw, 70px)/1 var(--ci-shade); text-transform: uppercase; color: var(--ci-gold); margin: 4px auto 14px; }
.ci-rec .ci-band--red h2.ci-tag--use { color: var(--ci-cream); }
.ci-tag-sub { margin: 0 auto; font-style: italic; }

/* ---- the acts: facts as a bordered grid ---- */
.ci-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; }
.ci-acts > div { padding: 10px; border: 2px solid var(--ci-black); margin: -1px; }
.ci-acts dt { font: 400 14px/1.4 var(--ci-wood); letter-spacing: .14em; text-transform: uppercase; color: var(--ci-red); }
.ci-band--dark .ci-acts dt { color: var(--ci-gold); }
.ci-band--red .ci-acts dt { color: var(--ci-cream); }
.ci-acts dd { margin: 0; font-weight: 800; font-size: 19px; line-height: 1.2; }

/* ---- what carries the look ---- */
.ci-tw { overflow-x: auto; }
.ci-tab { width: 100%; max-width: 900px; margin: 0 auto; border-collapse: collapse; text-align: left; background: transparent; }
.ci-tab th, .ci-tab td { padding: 8px; border: 0; border-bottom: 2px dotted var(--ci-brown); vertical-align: top; background: transparent; color: inherit; font-weight: 400; }
.ci-rec .ci-tab th a { font: 400 22px/1.2 var(--ci-wood); text-transform: uppercase; text-decoration: none; color: var(--ci-black); }
.ci-tab th small { display: block; color: var(--ci-red); font-style: italic; font-weight: 600; font-size: 14px; }
.ci-nl { color: var(--ci-brown); font-style: italic; }
.ci-tab td.ci-nl { font-style: italic; }
.ci-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.ci-rec .ci-tags a { border: 2px solid var(--ci-black); padding: 1px 8px; text-decoration: none; color: var(--ci-black); font: 400 16px/1.5 var(--ci-wood); text-transform: uppercase; letter-spacing: .04em; }
.ci-rec .ci-tags a:hover { background: var(--ci-gold); }
.ci-swatch { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.ci-swatch span { width: 84px; padding: 24px 4px 3px; font: 12px/1.2 ui-monospace, Menlo, monospace; border: 2px solid var(--ci-black); }

/* ---- what it argues / it refuses ---- */
.ci-lede { max-width: 34ch; margin: 10px auto; font: 800 clamp(24px, 3.4vw, 40px)/1.15 var(--ci-serif); }
.ci-small { max-width: 62ch; margin: 8px auto; }
.ci-refuse { display: inline-block; margin-top: 10px; border: 4px double var(--ci-cream); padding: 10px 18px; max-width: 640px; }
.ci-refuse b { font: 400 22px/1.2 var(--ci-wood); text-transform: uppercase; color: var(--ci-gold); display: block; }

/* ---- how you recognise it ---- */
.ci-diag { font-weight: 800; font-size: 21px; }

/* ---- rules as acts ---- */
.ci-rl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; text-align: left; max-width: 1000px; margin: 10px auto 0; }
.ci-rl article { padding: 14px 16px; border: 3px solid var(--ci-black); margin: -1.5px; background: var(--ci-cream); }
.ci-rl article:nth-child(4n+2), .ci-rl article:nth-child(4n+3) { background: var(--ci-paper); }
.ci-rl h3 { margin: 0; font: 400 30px/1 var(--ci-wood); text-transform: uppercase; color: var(--ci-red); letter-spacing: 0; }
.ci-rl .ci-k { font-style: italic; font-weight: 600; color: var(--ci-brown); display: block; margin-bottom: 6px; }
.ci-rl p { margin: 0; }
.ci-rl em { font-style: italic; font-weight: 700; }
.ci-rl small { display: block; margin-top: 4px; font-style: italic; color: var(--ci-brown); font-size: 15px; }
.ci-rec .ci-rl .ci-ctx { grid-column: 1 / -1; background: var(--ci-black); color: var(--ci-cream); }
.ci-rec .ci-rl .ci-ctx h3 { color: var(--ci-gold); }
.ci-rec .ci-rl .ci-ctx .ci-k, .ci-rec .ci-rl .ci-ctx small { color: var(--ci-paper); }

/* ---- what stands behind it ---- */
.ci-firm { font-style: italic; }
.ci-rt { margin: 14px auto 0; min-width: 480px; max-width: 820px; width: 100%; border-collapse: collapse; text-align: left; font-size: 16px; background: transparent; }
.ci-rt th, .ci-rt td { padding: 6px 8px; border: 0; border-bottom: 1px solid rgba(240, 228, 200, .4); background: transparent; color: inherit; font-weight: 400; }
.ci-rt thead th { font: 400 16px/1.4 var(--ci-wood); text-transform: uppercase; letter-spacing: .06em; color: var(--ci-gold); border-bottom: 3px solid var(--ci-gold); }

/* ---- often confused with ---- */
.ci-trio { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ci-rec .ci-trio a, .ci-trio__plain { flex: 1 1 260px; max-width: 360px; display: block; padding: 14px; border: 3px solid var(--ci-black); text-decoration: none; color: var(--ci-black); background: var(--ci-cream); text-align: left; }
.ci-trio b { display: block; font: 400 26px/1 var(--ci-wood); text-transform: uppercase; color: var(--ci-red); margin-bottom: 4px; }
.ci-rec .ci-trio a:hover { background: var(--ci-black); color: var(--ci-cream); }

/* ---- use it: the tickets (Annie, change 2: black on gold by default, cream on hover) ---- */
.ci-tix { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.ci-rec .ci-band--red .ci-tix a { flex: 1 1 280px; max-width: 420px; display: block; padding: 18px 24px; background: var(--ci-gold); color: var(--ci-black); text-decoration: none; border: 3px dashed var(--ci-black); outline: 6px solid var(--ci-gold); text-align: left; }
.ci-rec .ci-band--red .ci-tix a b { display: block; font: 400 30px/1 var(--ci-wood); text-transform: uppercase; margin-bottom: 6px; color: var(--ci-black); }
.ci-rec .ci-band--red .ci-tix a:hover { background: var(--ci-cream); color: var(--ci-black); }
.ci-rec .ci-band--red .ci-tix a:focus-visible { outline: 4px solid var(--ci-cream); outline-offset: 3px; }
.ci-mach { margin-top: 18px; }
.ci-mach a { margin: 0 10px; }

/* ---- the fold below 60rem: the shell narrows main's padding ---- */
@media (max-width: 60rem) {
  .ci-hero, .ci-rec { margin-inline: calc(var(--s4) * -1); }
}
@media (max-width: 760px) {
  .ci-page { --ci-bulb-size: 18px; }
  .ci-acts, .ci-rl { grid-template-columns: 1fr; }
  .ci-ribbon { margin: 0 26px 12px; padding: 8px 18px; }
}

/* research-dimension table at phone width: no fixed floor, cells wrap (QA 2026-09-29) */
@media (max-width: 480px) {
  .ci-rt { min-width: 0; }
  .ci-rt th, .ci-rt td { padding-inline: 6px; overflow-wrap: break-word; }
}