/* Halloween demo announcement. */
:root { --pumpkin: #ff922f; --halloween-ink: #171019; --halloween-paper: #ffe3b2; }
.header-contact[href="#halloween"] { color: var(--pumpkin); }
.hero-demo-date { color: #ffac53; border-color: #ff922f70; }
.hero-actions .button[href="#halloween"] { background: var(--pumpkin); color: #21120a; }
.hero-actions .button[href="#halloween"]:hover { background: #ffb360; }
.vombies-card .art-status, .meatworm-card .art-status { background: var(--pumpkin); color: #21120a; font-weight: 800; }
.halloween-section {
  position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(ellipse at 30% 90%, #66301d70, transparent 65%), #1a121c;
  border-block: 1px solid #ff922f80;
}
.halloween-section::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: url('/assets/kumancraft/halloween-night.svg') center bottom / cover no-repeat;
}
.halloween-section::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .17;
  background: repeating-linear-gradient(98deg, transparent 0 5px, #f5b85b12 6px, transparent 7px 12px);
}
.halloween-layout { position: relative; grid-template-columns: 1.12fr 1fr; gap: 80px; padding: 82px 64px 128px; }
.halloween-copy .eyebrow { color: #fbb566; letter-spacing: 3px; font-size: 10px; }
.halloween-copy h2 { color: var(--halloween-paper); font-size: clamp(40px, 4.4vw, 62px); line-height: 1.08; letter-spacing: -1px; }
.halloween-copy h2 em { display: block; color: var(--pumpkin); font: inherit; }
.halloween-section .halloween-copy .halloween-date {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 12px;
  width: fit-content; margin: 25px 0 20px; padding: 10px 0;
  background: transparent; color: var(--halloween-paper);
  border-block: 1px solid #ff922f60;
}
.halloween-copy .halloween-date time { font: 700 24px/1.3 var(--heading); }
.halloween-copy .halloween-date span { font-weight: 600; }
.halloween-copy > p:not(.eyebrow):not(.halloween-date) { color: #e2d0c5; font-size: 14px; line-height: 1.85; }
.halloween-copy > p.demo-note { color: #bba99f; font-size: 11px; }
.demo-lineup { padding-top: 58px; position: relative; }
.demo-project {
  position: relative; gap: 17px; padding: 27px 22px; margin-bottom: 23px;
  color: var(--halloween-paper); background: #19131ef5;
  border: 1px solid #ce804960; border-left: 3px solid var(--pumpkin);
  transition: transform .2s, background .2s;
}
.demo-project:nth-child(2) { border-bottom: 1px solid #ce804960; }
.demo-project:hover { transform: translateY(-2px); background: #2f1d23; }
.demo-project:focus-visible { outline-color: var(--pumpkin); }
.demo-project .demo-number { color: var(--pumpkin); font: 600 28px var(--heading); }
.demo-project small { color: #f7b36d; letter-spacing: 1.8px; font-size: 8px; }
.demo-project strong { font-size: clamp(27px, 2.8vw, 40px); margin-block: 5px 8px; }
.demo-project > span > span { color: #d9c6b8; }
.demo-project > span:last-child { color: var(--pumpkin); }
.demo-lineup > p { color: #d3b7a1; margin: 24px 0 0; max-width: 360px; font: 13px/1.7 var(--body); }
@media (max-width: 1100px) and (min-width: 761px) {
  .halloween-layout { gap: 38px; padding-inline: 40px; }
  .halloween-copy h2 { font-size: 4.5vw; }
  .demo-project { padding: 23px 16px; gap: 12px; }
}
@media (max-width: 760px) {
  .halloween-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 62px 28px 100px; }
  .halloween-section::before { background-size: auto 820px; background-position: 66% bottom; opacity: .6; }
  .halloween-copy h2 { font-size: clamp(34px, 9.2vw, 60px); }
  .halloween-copy .halloween-date time { font-size: 22px; }
  .halloween-date span { font-size: 10px; }
  .demo-lineup { padding-top: 16px; }
  .demo-project { padding: 24px 17px; gap: 12px; }
  .demo-project strong { font-size: 30px; }
  .demo-project .demo-number { font-size: 29px; }
}
@media (prefers-reduced-motion: reduce) { .demo-project { transition: none; } }