/* ─────────────────────────────────────────────────────────────────────────────
   The Halloween look. Every page loads this, but every rule is under html.hw, a
   class assets/js/halloween.js sets only from 25 October to 1 November, so for the
   rest of the year it does nothing. It only overrides site.css and the hero styles.

   The idea is an empty ballroom on the last night of October rather than decorations:
   a dark room, the photographs faded to old silver prints, candlelight for the only
   colour, a bare tree's shadow thrown in by the moon, fog along the floor, one failing
   light, and the dancers leaving a faint second image of themselves behind. No props.
   ───────────────────────────────────────────────────────────────────────────── */

html.hw {
  --bone: #DCD5C7;
  --tallow: #E8923F;        /* candle flame: the only real colour on the page */
  --oxblood: #8A2C10;
  --oxblood-hover: #A63814;

  --ink: var(--bone);
  --black: #050406;
  --red: #E0793A;           /* text on the dark ground: 6.6:1 on the page black */
  --red-hover: #EE8E4E;
  --grad: linear-gradient(96deg, #9A2614 0%, #D2581E 48%, #F4A84A 100%);
  --body: #A29B8F;
  --prose: #BDB6A9;
  --muted: #7F786F;
  --footer-grey: #7F786F;
  --fine: #6F6962;
  --panel: #0E0D10;
  --tile: #141317;
  --rule: #1D1B20;
  --rule-2: #27242A;
  --chip-border: #34303A;
  --pill-border: #3A363F;
  /* the metals read on black as they are, so the text takes the metal itself */
  --lv-bronze-ink: #C98A4E; --lv-silver-ink: #AEB4BB; --lv-gold-ink: #CDB45E;
  --lv-open: #9A80C4; --lv-open-ink: #A890CF;

  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --print: grayscale(0.88) sepia(0.16) contrast(1.14) brightness(0.8);
}

html.hw body { background: #0A090B; color: var(--bone); }
html.hw ::selection { background: rgba(201,180,138,0.28); color: #fff; }

/* ── type: an old dance programme rather than a poster ──────────────────── */
html.hw .tight { font-family: var(--serif); font-weight: 500; letter-spacing: -0.012em; line-height: 0.98; }
html.hw .grad { font-style: italic; }
html.hw .eyebrow { letter-spacing: 0.34em; font-weight: 500; }
html.hw .statement h2 { font-size: 74px; }
html.hw #heroCopy .h, html.hw #expandInner .h { font-weight: 500; }
html.hw .styles h3 { font-size: 64px; font-weight: 400; }
html.hw .quote:not(.quote-about) p { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 46px; line-height: 1.24; letter-spacing: -0.005em; color: var(--bone); }
html.hw .practices h2, html.hw .comps h2 { font-size: 66px; }
html.hw .sched-day h3 { font-family: var(--serif); font-size: 24px; font-weight: 500; letter-spacing: 0; }
html.hw .comps .what { font-family: var(--serif); font-size: 26px; letter-spacing: 0; }
html.hw footer .wordmark { font-weight: 400; }
html.hw .quote-about p { font-family: var(--serif); font-style: italic; font-size: 36px; line-height: 1.3; letter-spacing: 0; color: var(--bone); }
html.hw .page-hero h1 { font-weight: 500; }

/* ── photographs: silver prints ─────────────────────────────────────────── */
html.hw .fill, html.hw .mosaic .tile img, html.hw .lbimg { filter: var(--print); }
html.hw .tile:hover .fill, html.hw .mosaic .tile:hover img { filter: grayscale(1) contrast(1.2) brightness(0.72); }
html.hw #ohHero { filter: var(--print); }
html.hw #ohHero .dh-slide .oh-svg, html.hw #ohHero .dh-slide canvas, html.hw #ohHero .oh-root svg { filter: none; }
html.hw .oj-beats, html.hw .oj-figbox { filter: var(--print); }

/* the second image a dancer leaves behind (added by halloween.js) */
html.hw .hw-echo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  mix-blend-mode: screen; opacity: 0.17; filter: grayscale(1) blur(1.2px) brightness(1.15);
  animation: hw-echo 19s cubic-bezier(.45,0,.55,1) infinite alternate; }
html.hw .tile .hw-echo { transition: opacity 1600ms ease; }
html.hw .tile:hover .hw-echo { opacity: 0.3; }
@keyframes hw-echo {
  0%   { transform: translate(0, 0) scale(1.005); }
  55%  { transform: translate(1.6%, -0.4%) scale(1.012); }
  100% { transform: translate(2.4%, 0.2%) scale(1.02); }
}

/* ── the word in the hero: bone, no pink glint ──────────────────────────── */
html.hw .dh-word .ln, html.hw .dh-word .gl { stroke: var(--bone); }
html.hw .dh-word .fl { fill: var(--bone); fill-opacity: 0.26; }   /* the dancers move through it, not past it */
html.hw .dh-word .glint { filter: drop-shadow(0 0 5px rgba(255,214,160,.9)) drop-shadow(0 0 22px rgba(232,120,40,.7)); }
html.hw .dh-word .gl { stroke: #FFD9A0; }
html.hw .oh-line path.oh-c { stroke: var(--bone); }
html.hw .oj-bones { mix-blend-mode: screen; }

/* ── light: moon from above, one low lamp, nothing saturated ────────────── */
html.hw .gw1, html.hw .gw2, html.hw .gw3, html.hw .gw4, html.hw .gw5 { mix-blend-mode: screen; }
html.hw .gw1, html.hw .gw3, html.hw .gw5 {
  background: radial-gradient(90% 70% at 62% -14%, rgba(168,182,198,0.20), transparent 60%),
              radial-gradient(80% 70% at 0% 112%, rgba(214,96,28,0.40), transparent 62%); }
html.hw .gw2, html.hw .gw4 {
  background: radial-gradient(90% 70% at 30% -14%, rgba(168,182,198,0.16), transparent 60%),
              radial-gradient(80% 70% at 100% 112%, rgba(214,96,28,0.34), transparent 62%); }
html.hw #hero > .ov { background: linear-gradient(to bottom, rgba(5,4,6,0.78) 0%, rgba(5,4,6,0.10) 30%, rgba(5,4,6,0.30) 58%, rgba(5,4,6,0.96) 100%) !important; }

html.hw #expandInner .ov[style*="radial"] { background: radial-gradient(80% 62% at 16% 92%, rgba(200,84,24,0.50), transparent 62%) !important; }
html.hw .sc-a { background: linear-gradient(to top, rgba(6,8,12,0.96) 0%, rgba(30,38,50,0.40) 50%, rgba(60,72,90,0.10) 100%); }
html.hw .sc-b { background: radial-gradient(70% 55% at 84% 8%, rgba(168,182,198,0.18), transparent 62%); }
html.hw .lc-a { background: linear-gradient(to top, rgba(14,5,7,0.96) 0%, rgba(40,12,14,0.40) 46%, rgba(20,16,20,0.06) 100%); }
html.hw .lc-b { background: radial-gradient(70% 55% at 16% 100%, rgba(214,96,28,0.30), transparent 62%); }
html.hw .q-b { background: none; }
/* the warmth of the flame itself, centred on the lamp */
html.hw .q-c { background: radial-gradient(circle calc(var(--lr, 340px) * 0.9) at var(--mx, 50%) var(--my, 50%), rgba(232,120,40,0.20), transparent 70%); z-index: 1; }
html.hw footer .glowf { background: radial-gradient(70% 90% at 88% 0%, rgba(214,96,28,0.12), transparent 62%); }
html.hw .oj-progress i, html.hw #progress { background: var(--tallow); }
html.hw #progress { height: 2px; opacity: 0.85; box-shadow: 0 0 8px rgba(232,120,40,0.8); }
html.hw .grad { filter: drop-shadow(0 0 18px rgba(232,110,30,0.35)); }

/* ── the quote is read by lamplight: the room shows only where the light is ── */
html.hw .quote .fill.k5 { opacity: 0.06 !important; }
html.hw .quote .hw-lamp { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  filter: grayscale(1) sepia(0.85) saturate(1.7) hue-rotate(-10deg) contrast(1.2) brightness(1.2); opacity: 0.8; z-index: 1;
  -webkit-mask-image: radial-gradient(circle var(--lr, 340px) at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,0.5) 38%, transparent 100%);
          mask-image: radial-gradient(circle var(--lr, 340px) at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,0.5) 38%, transparent 100%); }
html.hw .quote .who { color: var(--muted); }

/* the hero's slide numbers take each clip's colour from site.js; keep them bone */
html.hw #bars .num[style*="color"] { color: var(--bone) !important; }
html.hw #bars .bar i[style*="fillbar"] { background: var(--bone) !important; }
html.hw #nav .brand { font-family: var(--serif); font-size: 21px; font-weight: 500; letter-spacing: 0; }

/* ── surfaces that were white ───────────────────────────────────────────── */
html.hw #nav.solid { background: rgba(8,7,9,0.72); border-bottom-color: rgba(220,213,199,0.06); }
html.hw #nav .join, html.hw .pill-red { background: var(--oxblood); color: var(--bone); }
html.hw #nav .join:hover, html.hw .pill-red:hover { background: var(--oxblood-hover); box-shadow: 0 22px 60px rgba(106,22,20,0.45); }
html.hw .pill-light { background: var(--bone); color: #0A090B; }
html.hw .pill-ghost { border-color: rgba(220,213,199,0.30); color: var(--bone); }
html.hw .pill-dark:hover { background: var(--bone); color: #0A090B; border-color: var(--bone); }
html.hw .lnk svg path { stroke: currentColor; }
html.hw .comps { background: #070608; border-top: 1px solid var(--rule); }
html.hw .comps .table { background: var(--panel); border: 1px solid var(--rule); }
html.hw .sched-day { border: 1px solid var(--rule); }
html.hw .card .row.first { background: var(--tile); box-shadow: none; }
html.hw .skip { background: var(--bone); color: #0A090B; }
html.hw .btn-white { background: var(--bone); color: #0A090B; }
html.hw .bio-card { background: var(--panel); border: 1px solid var(--rule); }
html.hw .pledge input, html.hw .pledge select, html.hw .pledge textarea, html.hw .res-who {
  background: var(--panel); color: var(--bone); border-color: var(--rule-2); color-scheme: dark; }
html.hw .pledge ::placeholder { color: var(--muted); }
html.hw #nav.solid .links.open { background: rgba(8,7,9,0.96); }
html.hw :focus-visible { outline-color: var(--tallow); }

/* ── the room itself: grain, a vignette and a light that is not quite steady ── */
html.hw .hw-grain, html.hw .hw-vignette, html.hw .hw-flicker { position: fixed; inset: 0; pointer-events: none; }
html.hw .hw-vignette { z-index: 64; background: radial-gradient(120% 95% at 50% 45%, transparent 55%, rgba(0,0,0,0.55) 100%); }
html.hw .hw-flicker { z-index: 65; background: #000; opacity: 0; }
html.hw .hw-grain { z-index: 66; inset: -50%; opacity: 0.085; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: hw-grain 900ms steps(6) infinite; }
@keyframes hw-grain {
  0% { transform: translate(0, 0); } 17% { transform: translate(-3%, 2%); } 33% { transform: translate(2%, -4%); }
  50% { transform: translate(-4%, -1%); } 67% { transform: translate(3%, 3%); } 83% { transform: translate(-1%, 4%); }
  100% { transform: translate(0, 0); } }

/* ── fog along the floor ────────────────────────────────────────────────── */
html.hw .hw-fog { position: absolute; left: -40%; right: -40%; bottom: -6%; height: 48%; pointer-events: none; z-index: 1;
  background:
    radial-gradient(28% 46% at 14% 72%, rgba(196,202,212,0.20), transparent 70%),
    radial-gradient(24% 40% at 38% 84%, rgba(196,202,212,0.16), transparent 70%),
    radial-gradient(32% 50% at 63% 70%, rgba(196,202,212,0.18), transparent 70%),
    radial-gradient(26% 42% at 88% 82%, rgba(196,202,212,0.16), transparent 70%);
  filter: blur(22px); animation: hw-fog 70s ease-in-out infinite alternate; }
html.hw .hw-fog.b { height: 34%; bottom: -10%; opacity: 0.8; animation-duration: 47s; animation-direction: alternate-reverse; }
@keyframes hw-fog { from { transform: translateX(-14%); } to { transform: translateX(14%); } }

/* ── a bare tree outside, its shadow thrown across the room by the moon ──── */
html.hw .statement, html.hw .comps { position: relative; isolation: isolate; }
html.hw .hw-branch { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  mix-blend-mode: screen; filter: blur(2.4px);
  animation: hw-sway 9s ease-in-out infinite alternate; }
html.hw #hero .hw-branch, html.hw .page-hero .hw-branch { z-index: 1; filter: blur(3.4px); }
html.hw .statement .hw-branch, html.hw .comps .hw-branch { z-index: -1; }
@keyframes hw-sway { from { transform: rotate(-0.7deg); } to { transform: rotate(0.9deg); } }

@media (prefers-reduced-motion: reduce) {
  html.hw .hw-grain, html.hw .hw-echo, html.hw .hw-fog, html.hw .hw-branch { animation: none; }
}
@media (max-width: 640px) {
  html.hw .statement h2 { font-size: 46px; }
  html.hw .quote:not(.quote-about) p { font-size: 28px; }
  html.hw .styles h3 { font-size: 44px; }
  html.hw .practices h2, html.hw .comps h2 { font-size: 44px; }
}