/**
 * Halloween skin. Overrides the base theme's --gd-* palette, then adds what
 * the components don't have. No build step: this file is served as is.
 */
@font-face {
  font-family: "Creepster";
  src: url("../fonts/creepster-latin-400-normal.woff2") format("woff2");
  font-display: swap;
}

/* Worn by the navbar avatar and the portrait. */
:root {
  --hw-pumpkin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M21 9c0-3 2-5 5-5l1 3c-2 0-3 1-3 3z' fill='%236fae5b'/%3E%3Cellipse cx='11' cy='23' rx='8' ry='12' fill='%23e87a1d'/%3E%3Cellipse cx='29' cy='23' rx='8' ry='12' fill='%23e87a1d'/%3E%3Cellipse cx='20' cy='23' rx='9' ry='13' fill='%23ff9a3c'/%3E%3Cpath d='m10 19 5 1-3 4zm20 0-5 1 3 4zM18 25h4l-2 3zM9 28c3 4 5 2 7 4 1-2 2-2 4 0 2-2 3-2 4 0 2-2 4 0 7-4-7 2-15 2-22 0z' fill='%232a1203'/%3E%3C/svg%3E");
  --hw-pumpkins: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 40'%3E%3Cdefs%3E%3Cg id='p'%3E%3Cpath d='M21 9c0-3 2-5 5-5l1 3c-2 0-3 1-3 3z' fill='%236fae5b'/%3E%3Cellipse cx='11' cy='23' rx='8' ry='12' fill='%23e87a1d'/%3E%3Cellipse cx='29' cy='23' rx='8' ry='12' fill='%23e87a1d'/%3E%3Cellipse cx='20' cy='23' rx='9' ry='13' fill='%23ff9a3c'/%3E%3Cpath d='m10 19 5 1-3 4zm20 0-5 1 3 4zM18 25h4l-2 3zM9 28c3 4 5 2 7 4 1-2 2-2 4 0 2-2 3-2 4 0 2-2 4 0 7-4-7 2-15 2-22 0z' fill='%232a1203'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23p' transform='translate(0 14) scale(.65)'/%3E%3Cuse href='%23p' x='45'/%3E%3Cuse href='%23p' transform='translate(100 18) scale(.55)'/%3E%3C/svg%3E");
  --hw-hat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M28 74 50 8c6 2 10 8 8 14l14 52z' fill='%237d52bd'/%3E%3Cellipse cx='50' cy='78' rx='46' ry='11' fill='%236a43a6'/%3E%3Cpath d='M26 66c15 6 33 6 48 0l3 11c-17 6-37 6-54 0z' fill='%23ff9a3c'/%3E%3Crect x='42' y='64' width='16' height='15' rx='2' fill='%23ffc65c'/%3E%3Crect x='46' y='68' width='8' height='7' fill='%23ff9a3c'/%3E%3C/svg%3E");
}

/* Midnight: aubergine sky, pumpkin light, witch's lilac. */
:root,
[data-theme="dark"] {
  --gd-bg: #1c1228;
  --gd-bg-subtle: #221631;
  --gd-surface: #2a1c3b;
  --gd-surface-raised: #36254b;
  --gd-surface-sunken: #150d1f;
  --gd-line: #443158;
  --gd-line-strong: #5f4878;
  --gd-field-line: #8a72a5;
  --gd-fg: #f4eefa;
  --gd-fg-muted: #c8bbd6;
  --gd-fg-subtle: #a597b6;
  --gd-primary: #ff9a3c;
  --gd-primary-strong: #ffb56e;
  --gd-primary-fg: #2a1203;
  --gd-primary-soft: rgb(255 154 60 / 0.13);
  --gd-primary-ring: rgb(255 154 60 / 0.4);
  --gd-accent: #c9a7ff;
  --gd-accent-fg: #24103f;
  --gd-accent-soft: rgb(201 167 255 / 0.14);
  --gd-accent-ring: rgb(201 167 255 / 0.4);
  --gd-tertiary: #9fe0a0;
  --gd-tertiary-soft: rgb(159 224 160 / 0.12);
  --gd-sage: #a597b6;
  --gd-sage-soft: rgb(165 151 182 / 0.16);
  --gd-cap: #ff9a3c;
  --gd-cap-fg: #2a1203;
  --gd-success: #9fe0a0;
  --gd-success-soft: rgb(159 224 160 / 0.12);
  --gd-info: #c9a7ff;
  --gd-info-soft: rgb(201 167 255 / 0.12);
  --gd-star: #ffc65c;
  --gd-selection: rgb(255 154 60 / 0.35);
  --gd-shadow-color: 8 2 16;
  --gd-sticker: #f4eefa;
  --hw-moon: #f6e7b4;
  --hw-moon-glow: rgb(246 231 180 / 0.22);
  --hw-slime: #8fd694;
  --hw-web: rgb(244 238 250 / 0.28);
  --hw-ghost: #f4eefa;
  --hw-ghost-ink: #24103f;
}

/* Dusk: same graveyard, an hour earlier. */
[data-theme="light"] {
  --gd-bg: #efe6f2;
  --gd-bg-subtle: #e6dbea;
  --gd-surface: #faf6fb;
  --gd-surface-raised: #ffffff;
  --gd-surface-sunken: #e0d3e6;
  --gd-line: #d2c2da;
  --gd-line-strong: #b09dbb;
  --gd-field-line: #806c8c;
  --gd-fg: #24142f;
  --gd-fg-muted: #4f3c5f;
  --gd-fg-subtle: #5f4b70;
  --gd-primary: #9a3c00;
  --gd-primary-strong: #7c3000;
  --gd-primary-fg: #ffffff;
  --gd-primary-soft: rgb(154 60 0 / 0.09);
  --gd-primary-ring: rgb(154 60 0 / 0.32);
  --gd-accent: #6a2fa0;
  --gd-accent-fg: #ffffff;
  --gd-accent-soft: rgb(106 47 160 / 0.1);
  --gd-accent-ring: rgb(106 47 160 / 0.32);
  --gd-tertiary: #1f6e3a;
  --gd-tertiary-soft: rgb(31 110 58 / 0.09);
  --gd-sage: #5f4b70;
  --gd-sage-soft: rgb(95 75 112 / 0.12);
  --gd-success: #1f6e3a;
  --gd-success-soft: rgb(31 110 58 / 0.09);
  --gd-info: #6a2fa0;
  --gd-info-soft: rgb(106 47 160 / 0.09);
  --gd-star: #a86a00;
  --gd-selection: rgb(255 154 60 / 0.4);
  --gd-shadow-color: 50 24 70;
  --gd-sticker: #ffffff;
  --hw-moon: #ffb56e;
  --hw-moon-glow: rgb(255 154 60 / 0.25);
  --hw-slime: #4fa35a;
  --hw-web: rgb(36 20 47 / 0.22);
  --hw-ghost: #ffffff;
  --hw-ghost-ink: #24103f;
}

/* Headings drip; the small font-sans ones (footer columns) stay readable. */
h1,
h2:not(.font-sans) {
  font-family: "Creepster", var(--font-display);
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.1;
}

/* Hero: the moon and the graveyard of retired tech. */
[data-component-id$=":hero"] {
  padding-bottom: 9rem;
  overflow: hidden;
}
[data-component-id$=":hero"]::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(var(--gd-header-height) + 2.5rem);
  right: 8%;
  width: clamp(5.5rem, 16vw, 13rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 35%, rgb(0 0 0 / 0.08) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 62%, rgb(0 0 0 / 0.07) 0 13%, transparent 14%),
    radial-gradient(circle at 68% 26%, rgb(0 0 0 / 0.06) 0 6%, transparent 7%),
    var(--hw-moon);
  box-shadow: 0 0 4rem 1rem var(--hw-moon-glow);
}
[data-component-id$=":hero"]::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: 8.5rem;
  background: linear-gradient(#4a3566, #4a3566) bottom / 100% 10% no-repeat, center bottom / auto 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 136'%3E%3Cpath d='M0 136v-14c100-12 200 6 300-4s220-12 300-2 200 10 300 0 200-4 300 6v14z' fill='%234a3566'/%3E%3Cg fill='%234a3566'%3E%3Cpath d='M170 122V58a42 42 0 0 1 84 0v64zM392 122V70a34 34 0 0 1 68 0v52zM598 122V44h22V22h22v22h22v22h-22v56zM770 122V62a40 40 0 0 1 80 0v60zM988 122V72a32 32 0 0 1 64 0v50z'/%3E%3C/g%3E%3Cg fill='%23f4eefa' font-family='Georgia,serif' text-anchor='middle'%3E%3Ctext x='212' y='62' font-size='13'%3ER.I.P.%3C/text%3E%3Ctext x='212' y='84' font-size='17'%3EDrupal 7%3C/text%3E%3Ctext x='212' y='102' font-size='10'%3E2011-2025%3C/text%3E%3Ctext x='426' y='82' font-size='15'%3EIE6%3C/text%3E%3Ctext x='426' y='100' font-size='9'%3Efinally%3C/text%3E%3Ctext x='810' y='66' font-size='13'%3EHere lies%3C/text%3E%3Ctext x='810' y='86' font-size='15'%3EFriday%3C/text%3E%3Ctext x='810' y='104' font-size='15'%3Edeploy%3C/text%3E%3Ctext x='1020' y='82' font-size='14'%3EFTP%3C/text%3E%3Ctext x='1020' y='100' font-size='9'%3Eto prod%3C/text%3E%3C/g%3E%3Cdefs%3E%3Cg id='p'%3E%3Cpath d='M21 9c0-3 2-5 5-5l1 3c-2 0-3 1-3 3z' fill='%236fae5b'/%3E%3Cellipse cx='11' cy='23' rx='8' ry='12' fill='%23e87a1d'/%3E%3Cellipse cx='29' cy='23' rx='8' ry='12' fill='%23e87a1d'/%3E%3Cellipse cx='20' cy='23' rx='9' ry='13' fill='%23ff9a3c'/%3E%3Cpath d='m10 19 5 1-3 4zm20 0-5 1 3 4zM18 25h4l-2 3zM9 28c3 4 5 2 7 4 1-2 2-2 4 0 2-2 3-2 4 0 2-2 4 0 7-4-7 2-15 2-22 0z' fill='%232a1203'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23p' transform='translate(55 90) scale(0.9)'/%3E%3Cuse href='%23p' transform='translate(272 84) scale(1.1)'/%3E%3Cuse href='%23p' transform='translate(486 97) scale(0.75)'/%3E%3Cuse href='%23p' transform='translate(688 84) scale(1.1)'/%3E%3Cuse href='%23p' transform='translate(872 97) scale(0.75)'/%3E%3Cuse href='%23p' transform='translate(1090 90) scale(0.9)'/%3E%3Cuse href='%23p' transform='translate(1150 100) scale(0.55)'/%3E%3C/svg%3E");
}

/* Witch hat on the portrait sticker. */
.gd-portrait > .relative::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -19%;
  left: -7%;
  width: 56%;
  aspect-ratio: 1;
  transform: rotate(-14deg);
  background: center / contain no-repeat var(--hw-hat);
  pointer-events: none;
}
[data-gd-navbar] a[rel="home"] {
  position: relative;
}
[data-gd-navbar] a[rel="home"]::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -0.875rem;
  left: -0.5rem;
  width: 2rem;
  aspect-ratio: 1;
  transform: rotate(-14deg);
  background: center / contain no-repeat var(--hw-hat);
  pointer-events: none;
}

/* Candy-corn skill bars. */
.gd-seg {
  background: linear-gradient(90deg, #ffd65c 0 33%, #ff9a3c 33% 66%, #fff4e0 66%);
}

/* Cobweb in the corner of each job. */
[data-component-id$=":timeline-item"] article {
  position: relative;
}
[data-component-id$=":timeline-item"] article::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4.5rem;
  height: 4.5rem;
  border-top-left-radius: inherit;
  pointer-events: none;
  background: var(--hw-web);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M0 0 72 0M0 0l66 26M0 0l46 46M0 0l26 66M0 0v72M50 0c-2 8-2 10 1 19-8 1-12 3-16 16-11 3-15 6-16 16-9-2-11-2-18 0M28 0c-1 4-1 6 0 11-5 0-7 2-9 9-6 1-8 3-9 8-4-1-6-1-10 0'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M0 0 72 0M0 0l66 26M0 0l46 46M0 0l26 66M0 0v72M50 0c-2 8-2 10 1 19-8 1-12 3-16 16-11 3-15 6-16 16-9-2-11-2-18 0M28 0c-1 4-1 6 0 11-5 0-7 2-9 9-6 1-8 3-9 8-4-1-6-1-10 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Ectoplasm dripping into the footer. */
[data-component-id$=":footer"] {
  position: relative;
}
[data-component-id$=":footer"]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2.5rem;
  pointer-events: none;
  background: var(--hw-slime);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0h240v6c-8 0-10 3-12 10-2 8-9 8-10 0-1-6-6-8-14-8-10 0-12 4-14 20-1 10-11 10-12 0-1-12-5-18-16-18-9 0-12 3-14 9-2 7-9 7-11 0-2-6-8-9-18-9-9 0-12 5-14 16-1 8-10 8-11 0-2-10-7-16-18-16-8 0-12 3-14 8-2 5-8 5-10 0C70 11 62 8 50 8S36 12 34 24c-1 8-11 8-12 0C20 12 14 6 0 6z'/%3E%3C/svg%3E") 0 0 / 240px 100% repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0h240v6c-8 0-10 3-12 10-2 8-9 8-10 0-1-6-6-8-14-8-10 0-12 4-14 20-1 10-11 10-12 0-1-12-5-18-16-18-9 0-12 3-14 9-2 7-9 7-11 0-2-6-8-9-18-9-9 0-12 5-14 16-1 8-10 8-11 0-2-10-7-16-18-16-8 0-12 3-14 8-2 5-8 5-10 0C70 11 62 8 50 8S36 12 34 24c-1 8-11 8-12 0C20 12 14 6 0 6z'/%3E%3C/svg%3E") 0 0 / 240px 100% repeat-x;
}

/* Jack-o'-lanterns: on every third job card, and on the footer floor. */
[data-component-id$=":timeline-item"]:nth-child(3n + 1) article::before {
  content: "";
  position: absolute;
  top: -2.1rem;
  right: 2rem;
  width: 2.75rem;
  aspect-ratio: 1;
  background: center / contain no-repeat var(--hw-pumpkin);
  pointer-events: none;
  animation: hw-flicker 3.5s ease-in-out infinite;
}
[data-component-id$=":footer"]::after {
  content: "";
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  width: 10rem;
  height: 2.75rem;
  transform: translateX(-50%);
  background: center bottom / contain no-repeat var(--hw-pumpkins);
  pointer-events: none;
  animation: hw-flicker 4.5s ease-in-out infinite;
}

/* Everything halloween.js adds. */
.hw-witch {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  width: clamp(6.5rem, 13vw, 11rem);
  pointer-events: none;
  animation: hw-cross var(--hw-time, 12s) linear forwards;
}
.hw-witch svg {
  display: block;
  overflow: visible;
  animation: hw-bob 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 0.5rem rgb(255 154 60 / 0.35));
}
.hw-spider {
  position: fixed;
  z-index: 30;
  top: 0;
  right: 5%;
  width: 2.25rem;
  height: 11rem;
  transform-origin: top center;
  animation: hw-sway 7s ease-in-out infinite;
  cursor: pointer;
  transition: height 0.5s var(--ease-out-expo);
}
.hw-spider.is-scared {
  height: 2rem;
}
.hw-spider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 1.5rem;
  left: 50%;
  border-left: 1px solid var(--hw-web);
}
.hw-spider svg {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.hw-bat {
  position: fixed;
  z-index: 30;
  left: 0;
  width: 3rem;
  pointer-events: none;
  color: var(--gd-fg);
  animation: hw-fly var(--hw-time, 9s) linear forwards;
}
.hw-bat svg {
  animation: hw-flap 0.22s ease-in-out infinite alternate;
  transform-origin: center;
}
.hw-ghost {
  position: fixed;
  z-index: 35;
  right: 1rem;
  bottom: 1rem;
  width: 3.5rem;
  height: 4rem;
  color: var(--hw-ghost);
  filter: drop-shadow(0 0.25rem 0.75rem rgb(var(--gd-shadow-color) / 0.5));
  animation: hw-float 4s ease-in-out infinite;
}
.hw-swarm {
  position: fixed;
  z-index: 60;
  bottom: -5rem;
  width: 3.5rem;
  pointer-events: none;
  color: var(--hw-ghost);
  animation: hw-rise 3.5s ease-in forwards;
}
.hw-joke {
  position: fixed;
  z-index: 35;
  right: 1rem;
  bottom: 5.75rem;
  max-width: min(20rem, calc(100vw - 2rem));
  padding: 0.75rem 1.125rem;
  border-radius: 1.25rem 1.25rem 0.25rem;
  background: var(--hw-ghost);
  color: var(--hw-ghost-ink);
  font-size: 0.9375rem;
  line-height: 1.4;
  box-shadow: 0 0.5rem 1.5rem rgb(var(--gd-shadow-color) / 0.35);
}
.hw-joke:empty {
  display: none;
}

@keyframes hw-cross {
  from { transform: translate(var(--hw-from), var(--hw-y)); }
  to { transform: translate(var(--hw-to), var(--hw-y)); }
}
@keyframes hw-bob {
  0%, 100% { transform: scaleX(var(--hw-flip, 1)) translateY(0) rotate(-3deg); }
  50% { transform: scaleX(var(--hw-flip, 1)) translateY(-0.75rem) rotate(2deg); }
}
@keyframes hw-flicker {
  0%, 100% { filter: drop-shadow(0 0 0.4rem rgb(255 154 60 / 0.55)); }
  45% { filter: drop-shadow(0 0 0.15rem rgb(255 154 60 / 0.25)); }
  55% { filter: drop-shadow(0 0 0.7rem rgb(255 198 92 / 0.7)); }
}
@keyframes hw-sway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}
@keyframes hw-fly {
  from { transform: translate(-4rem, var(--hw-y, 20vh)); }
  50% { transform: translate(50vw, calc(var(--hw-y, 20vh) - 6vh)); }
  to { transform: translate(calc(100vw + 4rem), var(--hw-y, 20vh)); }
}
@keyframes hw-flap {
  from { transform: scaleY(1); }
  to { transform: scaleY(0.45); }
}
@keyframes hw-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.5rem); }
}
@keyframes hw-rise {
  to { transform: translateY(-120vh); opacity: 0.2; }
}

/* A small screen has no room for a spider dangling over the text. */
@media (max-width: 47.99rem) {
  .hw-spider,
  [data-component-id$=":footer"]::after {
    display: none;
  }
  [data-component-id$=":hero"]::after {
    height: 6rem;
  }
  [data-component-id$=":hero"]::before {
    top: calc(var(--gd-header-height) + 0.5rem);
    right: 4%;
    width: 4.5rem;
  }
  [data-component-id$=":hero"] {
    padding-bottom: 7rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hw-spider,
  .hw-ghost {
    animation: none;
  }
}