/* ==========================================================================
   High School Hackathon page: "Sticker Book" theme
   Warm paper, chunky outlines, hard offset shadows, marker doodles.
   ========================================================================== */

.hs {
  --paper: #fbf5e9;
  --paper-line: rgba(23, 19, 15, 0.06);
  --ink: #17130f;
  --ink-soft: #5b5248;

  --hs-gold: #ffb703;
  --hs-green: #00704a;
  --hs-coral: #ff6b4a;
  --hs-sky: #7dcdf0;
  --hs-pink: #ffb3d1;

  --font-hs: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --font-hand: "Shantell Sans", "Comic Sans MS", cursive;

  background: var(--paper);
  color: var(--ink);
}

/* Paper grain over everything. */
.hs::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 39; /* under the nav and the footer watercolor */
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.38 0 0 0 0 0.3 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hs ::selection { background: var(--hs-gold); color: var(--ink); }

/* The footer is shared with the main site, so it keeps the main site's ink colour. */
.hs .footer { --ink: #0f2219; }
.hs :focus-visible { outline-color: var(--hs-coral); }

/* ---------- Chunky buttons ---------- */

.btn-chunky {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 56px;
  padding: 0 1.5rem;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--hs-gold);
  color: var(--ink);
  font-family: var(--font-hs);
  font-size: 1.05rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background-color 0.2s;
}
.btn-chunky svg { width: 20px; height: 20px; transition: transform 0.3s var(--ease-out); }
.btn-chunky:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn-chunky:hover svg { transform: translateX(3px); }
.btn-chunky:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn-chunky--paper { background: #fff; }
.btn-chunky--paper:hover { background: var(--hs-sky); }
.btn-chunky--sm { height: 42px; padding: 0 1.1rem; font-size: 0.92rem; box-shadow: 3px 3px 0 var(--ink); }

/* ---------- Nav: ink on paper ---------- */

.hs .nav { color: var(--ink); }
.hs .nav::before { background: transparent; border-color: transparent; }
.hs .nav.is-scrolled::before {
  background: rgba(251, 245, 233, 0.86);
  border-color: rgba(23, 19, 15, 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.hs .nav__brand { font-family: var(--font-hs); font-weight: 800; }
/* The HS nav is always ink on paper, so it always uses the black-text logo. */
.hs .nav .nav__logo--on-dark,
.hs.menu-open .nav .nav__logo--on-dark { display: none; }
.hs .nav .nav__logo--on-light,
.hs.menu-open .nav .nav__logo--on-light { display: block; }
.hs-badge {
  margin-left: 0.35rem;
  padding: 0.15rem 0.5rem;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--hs-coral);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  rotate: -4deg;
}
.hs .nav__links {
  font-family: var(--font-hs);
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
}
.hs .nav__links a::after { height: 2.5px; border-radius: 2px; background: var(--hs-coral); }
.hs .nav__cta { display: none; }

.hs .mobile-menu { background: var(--hs-gold); color: var(--ink); }
.hs .mobile-menu a:not(.btn-chunky) { font-family: var(--font-hs); font-weight: 800; }
.hs .mobile-menu .btn-chunky {
  margin-top: 1.5rem;
  background: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}
.hs.menu-open .nav { color: var(--ink); }

@media (min-width: 480px) {
  .hs .nav__cta { display: inline-flex; }
}

/* ---------- Hero ---------- */

.hs-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding: calc(var(--nav-h) + clamp(1.5rem, 6vh, 4.5rem)) var(--gutter) clamp(10rem, 28vh, 16rem);
  border-bottom: 2.5px solid var(--ink);
}

/* Faint graph paper, fading toward the bottom where the stickers land. */
.hs-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
}

/* The physics shelf: sized to its content so stickers pile beside and below it. */
.hs-hero__copy {
  position: relative;
  z-index: 2;
  width: fit-content;
  max-width: 100%;
}

.hs-hero__kicker { margin: 0 0 clamp(0.75rem, 2vw, 1.25rem); }
.hs-tape {
  display: inline-block;
  padding: 0.35rem 1.1rem;
  background: rgba(255, 183, 3, 0.75);
  font-family: var(--font-hand);
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  font-weight: 700;
  rotate: -2deg;
  clip-path: polygon(0 8%, 3% 0, 6% 9%, 9% 0, 91% 0, 94% 10%, 97% 0, 100% 9%, 100% 92%, 97% 100%, 94% 90%, 91% 100%, 9% 100%, 6% 91%, 3% 100%, 0 90%);
}

.hs-hero__title {
  position: relative;
  margin: 0;
  font-family: var(--font-hs);
  font-size: clamp(3.3rem, 9.6vw, 14rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.05em;
}
.hs-line {
  display: block;
  overflow: hidden;
  padding: 0.02em 0.06em 0.15em 0;
  margin-bottom: -0.13em;
}
.hs-line > span {
  position: relative;
  display: inline-block;
}
.hs-line:nth-child(2) > span { color: var(--hs-green); }

/* Marker squiggle under "Hackathon". */
.hs-squiggle {
  position: absolute;
  left: 0;
  bottom: -0.04em;
  width: 100%;
  height: 0.16em;
  overflow: visible;
}
.hs-squiggle path {
  fill: none;
  stroke: var(--hs-coral);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* Date stamp slapped on the corner of the title. */
.hs-stamp {
  position: absolute;
  top: -0.42em;
  right: -0.95em;
  display: grid;
  place-content: center;
  width: 0.92em;
  height: 0.92em;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--hs-coral);
  color: #fff;
  font-size: clamp(5.2rem, 7.4vw, 10rem);
  line-height: 0.9;
  text-align: center;
  letter-spacing: -0.03em;
  box-shadow: 4px 4px 0 var(--ink);
  rotate: 14deg;
}
.hs-stamp b { font-size: 0.2em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.hs-stamp span { font-size: 0.32em; font-weight: 800; }

.hs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: clamp(1.5rem, 3.5vw, 2.25rem) 0 0;
  padding: 0;
  list-style: none;
}
.hs-meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-hs);
  font-size: clamp(0.85rem, 1.2vw, 0.98rem);
  font-weight: 600;
}
.hs-meta svg { width: 17px; height: 17px; flex: none; }

.hs-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1rem;
  margin-top: clamp(1.25rem, 3vw, 2rem);
}

.hs-scribble {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0 0 0 0.25rem;
  color: var(--hs-coral);
  font-family: var(--font-hand);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.2;
  rotate: -3deg;
}
.hs-scribble svg { width: 46px; flex: none; margin-top: -0.4rem; }

/* ---------- Stickers ---------- */

.hs-stickers {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.sticker {
  --s: 1;
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  border: calc(5px * var(--s)) solid #fff;
  color: #fff;
  font-family: var(--font-hs);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  box-shadow:
    0 0 0 1px rgba(23, 19, 15, 0.1),
    0 calc(12px * var(--s)) calc(18px * var(--s)) calc(-8px * var(--s)) rgba(23, 19, 15, 0.45);
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  opacity: 0;
  will-change: transform;
  transition: opacity 0.25s, box-shadow 0.25s;
}
.sticker.is-in { opacity: 1; }
.sticker.is-grabbed {
  cursor: grabbing;
  box-shadow:
    0 0 0 1px rgba(23, 19, 15, 0.1),
    0 calc(26px * var(--s)) calc(30px * var(--s)) calc(-10px * var(--s)) rgba(23, 19, 15, 0.4);
}
/* Vinyl gloss. */
.sticker::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 42%);
  pointer-events: none;
}

.sticker--pill {
  height: calc(56px * var(--s));
  padding: 0 calc(22px * var(--s));
  border-radius: 999px;
  font-size: calc(1.15rem * var(--s));
  white-space: nowrap;
}
.sticker--round {
  border-radius: 50%;
  font-size: calc(1.05rem * var(--s));
  text-align: center;
}
.sticker--round svg { width: 50%; height: 50%; }
.sticker--hand { font-family: var(--font-hand); font-weight: 700; }
.sticker img { width: 84%; height: auto; pointer-events: none; }

.sticker--gold { background: var(--hs-gold); color: var(--ink); }
.sticker--coral { background: var(--hs-coral); }
.sticker--sky { background: var(--hs-sky); color: var(--ink); }
.sticker--green { background: var(--hs-green); }
.sticker--pink { background: var(--hs-pink); color: var(--ink); }
.sticker--ink { background: var(--ink); color: var(--hs-gold); }
.sticker--white {
  background: #fff;
  color: var(--ink);
  box-shadow:
    0 0 0 1px rgba(23, 19, 15, 0.18),
    0 calc(12px * var(--s)) calc(18px * var(--s)) calc(-8px * var(--s)) rgba(23, 19, 15, 0.45);
}

/* ---------- Hero entrance (after the page is ready) ---------- */

html.js .hs-tape { opacity: 0; transform: translateY(12px) scale(0.9); transition: opacity 0.6s var(--ease-out) 0.15s, transform 0.6s var(--ease-out) 0.15s; }
html.js .hs-line > span { transform: translateY(105%); transition: transform 1s var(--ease-out); }
html.js .hs-line:nth-child(2) > span { transition-delay: 0.1s; }
html.js .hs-stamp { opacity: 0; transform: scale(0.2) rotate(-40deg); }
html.js .hs-meta,
html.js .hs-hero__ctas { opacity: 0; transform: translateY(16px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
html.js .hs-meta { transition-delay: 0.45s; }
html.js .hs-hero__ctas { transition-delay: 0.55s; }

html.js .is-ready .hs-tape,
html.js .is-ready .hs-meta,
html.js .is-ready .hs-hero__ctas { opacity: 1; transform: none; }
html.js .is-ready .hs-line > span { transform: none; }
html.js .is-ready .hs-stamp { animation: hs-slap 0.6s var(--ease-out) 0.75s both; }
html.js .is-ready .hs-squiggle path { animation: hs-draw 0.9s var(--ease-out) 0.9s forwards; }
html:not(.js) .hs-squiggle path { stroke-dashoffset: 0; }

@keyframes hs-slap {
  0% { opacity: 0; transform: scale(2.2) rotate(-30deg); }
  60% { opacity: 1; transform: scale(0.92) rotate(4deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes hs-draw { to { stroke-dashoffset: 0; } }

@media (max-width: 599px) {
  .hs-stamp { top: -0.55em; right: 0; font-size: 4.4rem; }
  .hs-scribble { display: none; }
}

/* Wide screens: headline on the left, the sticker pile fills the right. */
@media (min-width: 900px) {
  .hs-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: clamp(3rem, 8vh, 6rem);
  }
}

/* ---------- Mission ---------- */

.hs-mission {
  position: relative;
  padding: clamp(5rem, 12vw, 9rem) var(--gutter) clamp(6rem, 13vw, 10rem);
  scroll-margin-top: var(--nav-h);
}

.hs-label {
  display: inline-block;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  padding: 0.3rem 0.9rem;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--lc, var(--hs-sky));
  color: var(--lt, var(--ink));
  font-family: var(--font-hand);
  font-size: 1.05rem;
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--ink);
  rotate: -2deg;
}

.hs-mission__text {
  max-width: 22ch;
  margin: 0;
  font-family: var(--font-hs);
  font-size: clamp(2.1rem, 5.4vw, 4.8rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.04em;
}

/* Highlighter swipe. */
.hs-mission__text mark {
  padding: 0 0.08em;
  color: inherit;
  background: linear-gradient(transparent 52%, var(--hs-gold) 52%, var(--hs-gold) 90%, transparent 90%) no-repeat 0 0 / 0% 100%;
  transition: background-size 0.9s var(--ease-out) 0.6s;
}
.hs-mission__text.is-in mark,
html:not(.js) .hs-mission__text mark { background-size: 100% 100%; }

/* Marker circle drawn around a phrase. */
.hs-circled {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.hs-circled svg {
  position: absolute;
  left: -7%;
  top: -16%;
  width: 114%;
  max-width: none;
  height: 132%;
  overflow: visible;
  pointer-events: none;
}
.hs-circled path {
  fill: none;
  stroke: var(--hs-coral);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease-in-out) 1.2s;
}
.hs-mission__text.is-in .hs-circled path,
html:not(.js) .hs-circled path { stroke-dashoffset: 0; }

.hs-mission__aside {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 1.5rem 0 0 clamp(0rem, 18vw, 16rem);
  color: var(--hs-coral);
  font-family: var(--font-hand);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 600;
  rotate: -2deg;
}
.hs-mission__aside svg { width: 50px; flex: none; margin-top: -0.9rem; }

/* Sticky notes. */
.hs-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.75rem, 3vw, 2.75rem);
  max-width: 76rem;
  margin-top: clamp(3.5rem, 8vw, 6rem);
}
.hs-note {
  position: relative;
  padding: 2.3rem 1.6rem 1.9rem;
  border: 2.5px solid var(--ink);
  border-radius: 4px 4px 4px 26px;
  background: var(--c);
  box-shadow: 6px 6px 0 var(--ink);
  rotate: var(--r);
}
html.js .hs-note[data-inview] {
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), rotate 0.4s var(--ease-out), translate 0.4s var(--ease-out);
  transition-delay: var(--d, 0ms), var(--d, 0ms), 0s, 0s;
}
.hs-note:hover { rotate: 0deg; translate: 0 -5px; }
/* Tape holding the note down. */
.hs-note::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  width: 104px;
  height: 30px;
  translate: -50% 0;
  rotate: -4deg;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(23, 19, 15, 0.12);
}
.hs-note__num {
  font-family: var(--font-hand);
  font-size: 0.95rem;
  font-weight: 600;
}
.hs-note h3 {
  margin: 0.15rem 0 0.6rem;
  font-family: var(--font-hs);
  font-size: clamp(1.8rem, 2.6vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}
.hs-note p {
  margin: 0;
  color: rgba(23, 19, 15, 0.82);
  font-size: 1rem;
  line-height: 1.5;
}

/* ---------- Shared section pieces ---------- */

.hs-numbers,
.hs-countdown,
.hs-schedule,
.hs-prizes,
.hs-faq,
.hs-partners,
.hs-team {
  position: relative;
  padding: clamp(5rem, 11vw, 9rem) var(--gutter);
  scroll-margin-top: var(--nav-h);
}

.hs-head {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.hs-head--center {
  margin-inline: auto;
  text-align: center;
}
.hs-h2 {
  margin: 0;
  font-family: var(--font-hs);
  font-size: clamp(2.5rem, 6vw, 5.2rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.05em;
}
.hs-lede {
  margin: 1rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}

/* ---------- Ticker tape ---------- */

.hs-ticker {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 4rem) 0;
}
.hs-ticker__band {
  position: relative;
  width: 112%;
  margin-left: -6%;
  overflow: hidden;
  border-block: 2.5px solid var(--ink);
}
.hs-ticker__band--gold { z-index: 1; background: var(--hs-gold); rotate: -2.5deg; }
.hs-ticker__band--ink { margin-top: -0.9rem; background: var(--ink); color: var(--paper); rotate: 1.8deg; }
.hs-ticker__row {
  display: flex;
  align-items: center;
  width: max-content;
  padding: 0.7rem 0;
  font-family: var(--font-hs);
  font-size: clamp(1.4rem, 3.2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  white-space: nowrap;
  will-change: transform;
}
.hs-ticker__row span,
.hs-ticker__row i { padding-right: 1.4rem; }
.hs-ticker__row i { color: var(--hs-coral); font-size: 0.8em; font-style: normal; }

/* ---------- Pick your path ---------- */

.hs-paths { --card-w: min(clamp(210px, 18vw, 270px), 34vh); scroll-margin-top: var(--nav-h); }
.hs-paths__track { padding: clamp(5rem, 10vw, 8rem) var(--gutter); }
.hs-paths .hs-head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }

.hs-deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.75rem;
}
.hs-slot { perspective: 1200px; }

/* Pinned: the deck sits in the middle of a sticky stage and fans out with the scroll. */
.hs-paths__track.is-pinned { height: 260vh; padding: 0; }
.hs-paths__track.is-pinned .hs-paths__stage {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  padding: var(--nav-h) var(--gutter) 1.5rem;
}
.is-pinned .hs-deck {
  position: relative;
  display: block;
  height: calc(var(--card-w) * 1.4 + 2rem);
}
.is-pinned .hs-slot {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--card-w);
  margin-left: calc(var(--card-w) / -2);
  will-change: transform;
}

.hs-card {
  position: relative;
  display: block;
  width: 100%;
  min-height: 16rem;
  text-align: left;
  transform-style: preserve-3d;
  transition: transform 0.7s var(--ease-out), translate 0.35s var(--ease-out);
}
.is-pinned .hs-card { aspect-ratio: 5 / 7; min-height: 0; }
.hs-card[aria-pressed="true"] { transform: rotateY(180deg); }
.hs-slot:hover .hs-card { translate: 0 -10px; }

.hs-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 1.4rem;
  border: 2.5px solid var(--ink);
  border-radius: 22px;
  background: var(--c);
  color: var(--t);
  box-shadow: 6px 6px 0 var(--ink);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.hs-card__back { transform: rotateY(180deg); background: #fff; color: var(--ink); }
.hs-card__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  rotate: -4deg;
}
.hs-card__icon svg { width: 34px; height: 34px; }
.hs-card__kicker { margin-top: auto; font-family: var(--font-hand); font-size: 1rem; font-weight: 600; opacity: 0.85; }
.hs-card__title {
  font-family: var(--font-hs);
  font-size: clamp(1.7rem, 2.3vw, 2.15rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}
.hs-card__text { margin-top: 0.5rem; font-size: 0.95rem; line-height: 1.4; }
.hs-card__flip {
  position: absolute;
  top: 1.3rem;
  right: 1.3rem;
  font-family: var(--font-hand);
  font-size: 0.85rem;
  font-weight: 600;
}
.hs-card__back .hs-card__kicker {
  align-self: flex-start;
  margin-top: 0;
  padding: 0.2rem 0.65rem;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--c);
  opacity: 1;
}
.hs-card__list { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 1.4rem; }
.hs-card__list span {
  position: relative;
  padding-left: 1.75rem;
  font-family: var(--font-hs);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
}
.hs-card__list span::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--c);
  font-size: 0.7rem;
  font-weight: 800;
}

/* ---------- Numbers: achievement badges ---------- */

.hs-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: clamp(1.25rem, 2vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hs-badge-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.4rem 1.3rem 1.3rem;
  border: 2.5px solid var(--ink);
  border-radius: 22px;
  background: #fff;
  box-shadow: 5px 5px 0 var(--ink);
}
.hs-badge-stat::before {
  content: "Unlocked";
  position: absolute;
  top: -13px;
  right: 14px;
  padding: 0.15rem 0.55rem;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--c);
  font-family: "Silkscreen", monospace;
  font-size: 0.7rem;
  rotate: 4deg;
}
.hs-badge-stat__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: var(--c);
}
.hs-badge-stat__icon svg { width: 26px; height: 26px; }
.hs-badge-stat__value {
  margin-top: 1rem;
  font-family: var(--font-hs);
  font-size: clamp(2.6rem, 4.5vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
}
.hs-badge-stat__label { margin-top: 0.3rem; color: var(--ink-soft); font-family: var(--font-hs); font-weight: 600; }

html.js .hs-badge-stat[data-inview] {
  transform: translateY(36px) scale(0.85) rotate(-5deg);
  transition: opacity 0.5s ease, transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--d, 0ms);
}
html.js .hs-badge-stat[data-inview].is-in { transform: none; }

/* ---------- Countdown: handheld console ---------- */

.hs-countdown { display: grid; place-items: center; }
.hs-console {
  width: min(100%, 60rem);
  padding: clamp(1rem, 2.5vw, 1.75rem);
  border: 3px solid var(--ink);
  border-radius: 34px 34px 34px 80px;
  background: var(--hs-coral);
  box-shadow: 8px 8px 0 var(--ink);
}
html.js .hs-console[data-inview] {
  transform: translateY(70px) scale(0.9) rotate(-2deg);
  transition: opacity 0.7s ease, transform 1s cubic-bezier(0.34, 1.4, 0.64, 1);
}
html.js .hs-console[data-inview].is-in { transform: none; }

.hs-console__screen {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2.5rem);
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: radial-gradient(ellipse at 50% 40%, #173d2a, #0b2117 75%);
  color: #b6f36b;
  text-align: center;
  box-shadow: inset 0 0 0 6px #08180f, inset 0 0 70px rgba(0, 0, 0, 0.6);
}
/* CRT scanlines. */
.hs-console__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.2) 2px 4px);
}
.hs-pixel {
  margin: 0;
  font-family: "Silkscreen", monospace;
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hs-pixel--sm { margin-top: 1rem; font-size: clamp(0.7rem, 1.2vw, 0.85rem); opacity: 0.75; }
.hs-timer {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(0.2rem, 1.4vw, 1rem);
  margin: clamp(1.25rem, 3vw, 2rem) 0;
}
.hs-timer[hidden] { display: none; }
.hs-timer__unit { display: grid; gap: 0.35rem; }
.hs-timer__unit span {
  font-family: "Silkscreen", monospace;
  font-size: clamp(2rem, 7.5vw, 6.2rem);
  line-height: 1;
  color: #e8ffd0;
  text-shadow: 0 0 18px rgba(182, 243, 107, 0.55);
}
.hs-timer__unit small { font-family: "Silkscreen", monospace; font-size: clamp(0.6rem, 1vw, 0.8rem); opacity: 0.7; text-transform: uppercase; }
.hs-timer i {
  font-family: "Silkscreen", monospace;
  font-size: clamp(1.4rem, 5vw, 4rem);
  font-style: normal;
  line-height: 1.3;
  animation: hs-blink 1s steps(1) infinite;
}
.hs-bar {
  max-width: 34rem;
  height: 24px;
  margin: 0 auto;
  padding: 3px;
  border: 3px solid #b6f36b;
}
.hs-bar span {
  display: block;
  height: 100%;
  background: repeating-linear-gradient(90deg, #b6f36b 0 14px, transparent 14px 18px);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s linear;
}
@keyframes hs-blink { 50% { opacity: 0; } }

.hs-console__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.5vw, 1.6rem) clamp(0.5rem, 2vw, 1.5rem) 0.25rem;
}
.hs-console__dpad {
  width: 66px;
  height: 66px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 22px 100% no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 100% 22px no-repeat;
}
.hs-console__start { background: #fff; }
.hs-sub { font-family: var(--font-hand); font-size: 0.85rem; font-weight: 500; opacity: 0.7; }
.hs-console__ab { display: flex; gap: 0.6rem; rotate: -18deg; }
.hs-console__ab i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--hs-coral);
  font-family: "Silkscreen", monospace;
  font-style: normal;
}
.hs-console__ab i:last-child { translate: 0 -12px; }

@media (max-width: 599px) {
  .hs-console__dpad,
  .hs-console__ab { display: none; }
  .hs-console__controls { justify-content: center; }
}

/* ---------- Schedule board ---------- */

.hs-board { position: relative; max-width: 68rem; margin: 0 auto; }
.hs-board__svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.hs-board__road {
  fill: none;
  stroke: rgba(23, 19, 15, 0.16);
  stroke-width: 18;
  stroke-dasharray: 16 10;
}
.hs-board__done {
  fill: none;
  stroke: var(--hs-gold);
  stroke-width: 18;
  stroke-linecap: round;
  stroke-dasharray: 0 99999;
}
.hs-board__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  margin: 0;
  padding: 5rem 0 4rem;
  list-style: none;
}
.hs-tile {
  --tc: var(--hs-gold);
  display: grid;
  grid-template-columns: 1fr 88px 1fr;
  align-items: center;
  column-gap: clamp(1rem, 4vw, 3.5rem);
}
.hs-tile--checkin { --tc: var(--hs-sky); }
.hs-tile--ceremony { --tc: var(--hs-gold); }
.hs-tile--fun { --tc: var(--hs-pink); }
.hs-tile--build { --tc: var(--hs-green); }
.hs-tile--workshop { --tc: var(--hs-sky); }
.hs-tile--food { --tc: var(--hs-coral); }
.hs-tile--demo { --tc: var(--hs-pink); }

.hs-tile__node {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  background: #fff;
  box-shadow: 4px 4px 0 var(--ink);
  font-family: var(--font-hs);
  font-size: 1.1rem;
  font-weight: 800;
  transition: background-color 0.3s, color 0.3s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hs-tile:nth-child(odd) .hs-tile__node { rotate: -5deg; }
.hs-tile:nth-child(even) .hs-tile__node { rotate: 5deg; }
.hs-tile.is-on .hs-tile__node { background: var(--tc); transform: scale(1.12); }
.hs-tile--build.is-on .hs-tile__node { color: #fff; }

.hs-tile__card {
  grid-row: 1;
  max-width: 24rem;
  padding: 1.1rem 1.3rem;
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  background: #fff;
  box-shadow: 5px 5px 0 var(--ink);
}
html.js .hs-tile__card[data-inview] {
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), background-color 0.4s;
}
.hs-tile.is-on .hs-tile__card { background: color-mix(in srgb, var(--tc) 22%, #fff); }
.hs-tile:nth-child(odd) .hs-tile__card { grid-column: 1; justify-self: end; text-align: right; }
.hs-tile:nth-child(even) .hs-tile__card { grid-column: 3; justify-self: start; }
.hs-tile__card time { color: var(--hs-coral); font-family: var(--font-hand); font-weight: 700; }
.hs-tile__card h3 {
  margin: 0.15rem 0 0.3rem;
  font-family: var(--font-hs);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.hs-tile__card p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.45; }

.hs-board__token {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 96px;
  pointer-events: none;
  filter: drop-shadow(3px 5px 0 rgba(23, 19, 15, 0.22));
  will-change: transform;
}

@media (max-width: 759px) {
  .hs-tile { grid-template-columns: 56px 1fr; column-gap: 1rem; }
  .hs-tile__node { grid-column: 1; width: 48px; height: 48px; font-size: 0.95rem; }
  .hs-tile:nth-child(n) .hs-tile__card { grid-column: 2; justify-self: stretch; text-align: left; }
  .hs-board__token { width: 58px; }
}

/* ---------- Prizes: holographic trading cards ---------- */

.hs-prizes .hs-head { margin-inline: auto; text-align: center; }
.hs-prizes__podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: clamp(1rem, 3vw, 2.5rem);
  max-width: 62rem;
  margin: 0 auto;
}
.hs-prizes__podium > :nth-child(2) { margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.hs-prizes__more {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  max-width: 62rem;
  margin: clamp(3rem, 6vw, 5rem) auto 0;
}

.hs-prize { --pc: var(--hs-gold); perspective: 900px; }
.hs-prize--sky { --pc: var(--hs-sky); }
.hs-prize--coral { --pc: var(--hs-coral); }
.hs-prize--green { --pc: #3fae7a; }
.hs-prize--pink { --pc: var(--hs-pink); }

html.js .hs-prize[data-inview] {
  transform: translateY(90px) rotate(var(--tilt));
  transition: opacity 0.6s ease, transform 1s cubic-bezier(0.34, 1.35, 0.64, 1);
  transition-delay: var(--d, 0ms);
}
html.js .hs-prize[data-inview].is-in { transform: none; }

.hs-prize__card {
  --mx: 50%;
  --my: 50%;
  --rx: 0deg;
  --ry: 0deg;
  --holo: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.8rem;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--pc);
  box-shadow: 6px 6px 0 var(--ink);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.6s var(--ease-out), box-shadow 0.3s;
}
.hs-prize.is-active .hs-prize__card {
  transition: transform 0.08s linear, box-shadow 0.3s;
  box-shadow: 10px 12px 0 var(--ink);
}
.hs-prize__top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.hs-prize__top span {
  padding: 0.12rem 0.5rem;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: #fff;
  font-family: "Silkscreen", monospace;
  font-size: 0.7rem;
}
.hs-prize__top strong { font-family: var(--font-hs); font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 800; letter-spacing: -0.03em; }
.hs-prize__art {
  display: grid;
  place-items: center;
  flex: none;
  aspect-ratio: 5 / 4;
  margin: 0.6rem 0 0.7rem;
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.9) 0 22%, transparent 62%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0.35) 0 10deg, transparent 10deg 20deg),
    var(--pc);
}
.hs-prize__art svg { width: 44%; height: auto; }
.hs-prize__title {
  margin: 0;
  font-family: var(--font-hs);
  font-size: clamp(1rem, 1.7vw, 1.45rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.hs-prize__text { margin: 0.3rem 0 0.6rem;font-size: clamp(0.72rem, 0.9vw, 0.85rem); line-height: 1.35; }
.hs-prize__foot {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.4rem;
  border-top: 2px dashed rgba(23, 19, 15, 0.35);
  font-family: "Silkscreen", monospace;
  font-size: 0.58rem;
  opacity: 0.75;
}
/* Rainbow foil + a glare that follow the pointer. */
.hs-prize__shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: color-dodge;
  opacity: calc(var(--holo) * 0.6);
  background: repeating-linear-gradient(115deg, #ff7eb3 0%, #ffd56b 7%, #7dffb0 14%, #6ec8ff 21%, #c58cff 28%, #ff7eb3 35%);
  background-size: 300% 300%;
  background-position: var(--mx) var(--my);
  transition: opacity 0.3s;
}
.hs-prize__glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: var(--holo);
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 45%);
  transition: opacity 0.3s;
}
/* The grand prize shimmers on its own. */
.hs-prize--big.hs-prize--gold .hs-prize__shine { opacity: max(0.2,calc(var(--holo) * 0.6)); animation: hs-holo 6s linear infinite; }
.hs-prize--big.hs-prize--gold.is-active .hs-prize__shine { animation: none; }
@keyframes hs-holo { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }

@media (max-width: 759px) {
  .hs-prizes__podium { grid-template-columns: minmax(0, 20rem); justify-content: center; }
  .hs-prizes__podium > :nth-child(2) { order: -1; margin-bottom: 0; }
  .hs-prizes__more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- FAQ: group chat ---------- */

.hs-faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2.5rem, 6vw, 5rem);
  max-width: 76rem;
  margin: 0 auto;
}
.hs-faq .hs-head { position: sticky; top: calc(var(--nav-h) + 2rem); margin-bottom: 0; }
.hs-faq__mail { margin: 1.5rem 0 0; font-family: var(--font-hand); font-size: 1.05rem; }
.hs-faq__mail a,
.hs-partners__ask a {
  color: var(--hs-coral);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.hs-chat {
  display: flex;
  flex-direction: column;
  height: min(640px, 78vh);
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 28px;
  background: #fff;
  box-shadow: 8px 8px 0 var(--ink);
}
.hs-chat__top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 2.5px solid var(--ink);
  background: var(--hs-sky);
}
.hs-chat__top img {
  width: 46px;
  height: 46px;
  padding: 3px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
}
.hs-chat__top strong { display: block; font-family: var(--font-hs); font-weight: 800; }
.hs-chat__top span { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; }
.hs-chat__top span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px #fff; }

.hs-chat__tabs {
  display: flex;
  gap: 0.4rem;
  padding: 0.7rem;
  overflow-x: auto;
  border-bottom: 2px dashed rgba(23, 19, 15, 0.2);
  scrollbar-width: none;
}
.hs-chat__tabs button {
  flex: none;
  padding: 0.35rem 0.8rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-hs);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background-color 0.2s, color 0.2s;
}
.hs-chat__tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }

.hs-chat__log {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--paper);
  background-image: radial-gradient(rgba(23, 19, 15, 0.08) 1px, transparent 1px);
  background-size: 18px 18px;
}
.hs-msg {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  max-width: 86%;
  animation: hs-msg-in 0.35s var(--ease-out) both;
}
.hs-msg p {
  margin: 0;
  padding: 0.7rem 1rem;
  border: 2px solid var(--ink);
  border-radius: 18px;
  font-size: 0.97rem;
  line-height: 1.45;
}
.hs-msg--me { align-self: flex-end; }
.hs-msg--me p { border-bottom-right-radius: 4px; background: var(--hs-gold); font-weight: 600; }
.hs-msg--bot p { border-bottom-left-radius: 4px; background: #fff; }
.hs-msg--bot img {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 2px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--hs-sky);
  object-fit: contain;
}
.hs-msg--typing p { display: flex; gap: 4px; padding: 0.9rem 1rem; }
.hs-msg--typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
  animation: hs-dot 1s infinite;
}
.hs-msg--typing i:nth-child(2) { animation-delay: 0.15s; }
.hs-msg--typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes hs-msg-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } }
@keyframes hs-dot { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-4px); } }

.hs-chat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-height: 4.6rem;
  padding: 0.9rem;
  border-top: 2.5px solid var(--ink);
}
.hs-chip {
  padding: 0.5rem 0.9rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  box-shadow: 2px 2px 0 var(--ink);
  font-family: var(--font-hs);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  transition: background-color 0.2s, translate 0.2s, box-shadow 0.2s;
}
.hs-chip:hover:not(:disabled) { background: var(--hs-gold); translate: -1px -1px; box-shadow: 3px 3px 0 var(--ink); }
.hs-chip:disabled { opacity: 0.5; cursor: default; }
.hs-chip--next { background: var(--hs-pink); }
.hs-chat__done { margin: 0; font-family: var(--font-hand); }

@media (max-width: 899px) {
  .hs-faq__inner { grid-template-columns: minmax(0, 1fr); }
  .hs-faq .hs-head { position: static; }
}

/* ---------- Partners: laptop lid ---------- */

.hs-laptop { width: min(100%, 52rem); margin: 0 auto; perspective: 1600px; perspective-origin: 50% 100%; }
.hs-laptop__lid {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 3px solid var(--ink);
  border-radius: 26px 26px 10px 10px;
  background: linear-gradient(160deg, #3d4248, #22262a);
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.05);
  transform-origin: 50% 100%;
  will-change: transform;
}
.hs-laptop__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17%;
  translate: -50% -50%;
  filter: drop-shadow(0 0 22px rgba(125, 205, 240, 0.45));
}
.hs-laptop__base {
  position: relative;
  height: clamp(14px, 2.2vw, 22px);
  margin: 0 -6%;
  border: 3px solid var(--ink);
  border-radius: 4px 4px 22px 22px;
  background: #c9ccd1;
}
.hs-laptop__base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 16%;
  height: 45%;
  translate: -50% 0;
  border-radius: 0 0 10px 10px;
  background: #a9adb3;
}
.hs-laptop__stickers { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.hs-lsticker {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 0.3rem;
  border: 4px solid #fff;
  color: var(--ink);
  font-family: var(--font-hs);
  font-size: clamp(0.62rem, 1.3vw, 0.95rem);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 8px 14px -6px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: scale(1.8) rotate(calc(var(--r) + 25deg));
  transition: opacity 0.15s, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--d);
}
.hs-laptop.is-open .hs-lsticker { opacity: 1; transform: rotate(var(--r)); }
.hs-lsticker a { display: contents; }
.hs-lsticker img { max-width: 80%; max-height: 70%; }
.hs-lsticker--rect { width: 17%; aspect-ratio: 4 / 3; border-radius: 12px; }
.hs-lsticker--pill { width: 21%; aspect-ratio: 3 / 1; border-radius: 999px; }
.hs-lsticker--round { width: 13%; aspect-ratio: 1; border-radius: 50%; }
.hs-lsticker--gold { background: var(--hs-gold); }
.hs-lsticker--sky { background: var(--hs-sky); }
.hs-lsticker--pink { background: var(--hs-pink); }
.hs-lsticker--coral { background: var(--hs-coral); color: #fff; }
.hs-lsticker--green { background: var(--hs-green); color: #fff; }
.hs-lsticker--white { background: #fff; }
.hs-partners__ask { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; font-family: var(--font-hand); font-size: 1.15rem; text-align: center; }

/* ---------- Team: yearbook ---------- */

.hs-yearbook {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(2rem, 3.5vw, 3rem) clamp(1rem, 2.5vw, 2.25rem);
  max-width: 62rem;
  margin: 0 auto;
}
.hs-pol-slot { will-change: transform; }
.hs-pol {
  position: relative;
  margin: 0;
  padding: 0.75rem 0.75rem 1.1rem;
  border: 1px solid rgba(23, 19, 15, 0.14);
  background: #fff;
  box-shadow: 0 16px 26px -16px rgba(23, 19, 15, 0.55);
  rotate: var(--r);
}
html.js .hs-pol[data-inview] {
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), rotate 0.4s var(--ease-out), scale 0.4s var(--ease-out);
  transition-delay: var(--d, 0ms), var(--d, 0ms), 0s, 0s;
}
.hs-pol:hover { rotate: 0deg; scale: 1.04; }
.hs-pol-slot:nth-child(3n + 1) .hs-pol::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 84px;
  height: 26px;
  translate: -50% 0;
  rotate: 3deg;
  background: rgba(255, 183, 3, 0.55);
}
.hs-pol__photo { aspect-ratio: 1; overflow: hidden; background: #eee; }
.hs-pol__photo img { width: 100%; height: 100%; object-fit: cover; }
.hs-pol__ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--tint);
  font-family: var(--font-hs);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}
.hs-pol figcaption { display: flex; flex-direction: column; gap: 0.1rem; padding-top: 0.8rem; }
.hs-pol strong { font-family: var(--font-hand); font-size: 1.2rem; font-weight: 700; }
.hs-pol__role { color: var(--ink-soft); font-family: var(--font-hs); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.hs-pol__note { margin-top: 0.35rem; color: var(--hs-coral); font-family: var(--font-hand); font-size: 0.9rem; line-height: 1.25; }

@media (max-width: 999px) {
  .hs-yearbook { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .hs-yearbook { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Final call ---------- */

.hs-cta {
  position: relative;
  padding: clamp(6rem, 14vw, 11rem) var(--gutter);
  overflow: hidden;
  border-top: 2.5px solid var(--ink);
  background-color: var(--hs-gold);
  background-image: radial-gradient(rgba(23, 19, 15, 0.14) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  text-align: center;
}
.hs-cta__title {
  margin: 0;
  font-family: var(--font-hs);
  font-size: clamp(3rem, 10vw, 9rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.05em;
}
.hs-cta__title span {
  color: #fff;
  text-shadow:
    -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink),
    0 -2px 0 var(--ink), 0 2px 0 var(--ink), -2px 0 0 var(--ink), 2px 0 0 var(--ink),
    6px 6px 0 var(--ink);
}
.hs-cta__text { margin: 1.5rem 0 2rem; font-family: var(--font-hand); font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 600; }
.hs-cta__btn { height: 64px; padding: 0 2rem; background: #fff; font-size: 1.2rem; }


/* ---------- Custom cursor: a sticker arrow that wobbles, plus click confetti (js/event-hs-cursor.js) ---------- */

html.hs-cursor-on,
html.hs-cursor-on * { cursor: none !important; }
html.hs-cursor-on input,
html.hs-cursor-on textarea { cursor: text !important; }
.hs-cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity 0.25s; }
.hs-cursor.is-on { opacity: 1; }
.hs-cursor.is-text { opacity: 0; }
/* Pivot at the arrow's tip so it leans and grows from where you're pointing. */
.hs-cursor__arrow {
  position: absolute;
  top: -3px;
  left: -4px;
  transform-origin: 4px 3px;
  transition: scale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(2px 3px 0 rgba(23, 19, 15, 0.25));
}
.hs-cursor__arrow svg { display: block; width: 34px; height: 37px; max-width: none; overflow: visible; }
.hs-cursor__edge { fill: #fff; stroke: #fff; stroke-width: 5; stroke-linejoin: round; }
.hs-cursor__fill { fill: var(--hs-coral); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; transition: fill 0.25s; }
.hs-cursor.is-link .hs-cursor__arrow { scale: 1.25; }
.hs-cursor.is-link .hs-cursor__fill { fill: var(--hs-gold); }
.hs-cursor.is-grab .hs-cursor__fill { fill: var(--hs-sky); }
.hs-cursor.is-down .hs-cursor__arrow { scale: 0.85 0.75; }
.hs-cursor.is-link.is-down .hs-cursor__arrow { scale: 1.05 0.95; }
.hs-confetti {
  position: fixed;
  z-index: 9998;
  width: 8px;
  height: 8px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.hs-confetti--dot { border-radius: 50%; }
.hs-confetti--square { border-radius: 2px; }
.hs-confetti--tri { clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 10px; height: 9px; }
.hs-confetti--bar { width: 11px; height: 4px; border-radius: 2px; }

/* ---------- Preloader: stickers pop onto graph paper, then the sheet peels away ---------- */

@property --hs-n { syntax: "<integer>"; inherits: false; initial-value: 0; }

.hs-pre {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);
  background-size: 28px 28px;
  transform-origin: 0 0;
  transition: transform 0.85s cubic-bezier(0.7, 0, 0.2, 1), border-radius 0.85s, visibility 0s 0.85s;
}
body.is-ready .hs-pre {
  opacity: 1;
  border-radius: 0 0 48px 48px;
  transform: translateY(-112%) rotate(-5deg);
  box-shadow: 0 30px 60px rgba(23, 19, 15, 0.18);
}
.hs-pre__inner { position: relative; display: grid; justify-items: center; gap: 0.9rem; padding: 3rem; }
.hs-pre__badge {
  display: grid;
  place-items: center;
  width: clamp(120px, 22vw, 160px);
  aspect-ratio: 1;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--hs-gold);
  box-shadow: 0 0 0 6px #fff, 4px 6px 0 6px rgba(23, 19, 15, 0.18);
  animation: hs-pre-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both, hs-pre-wobble 1.4s ease-in-out 0.6s infinite;
}
.hs-pre__badge img { width: 78%; }
.hs-pre__count {
  margin: 0.6rem 0 0;
  color: var(--ink);
  font-family: var(--font-hs);
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  counter-reset: n var(--hs-n);
  animation: hs-pre-count 1.05s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.hs-pre__count::before { content: counter(n) "%"; }
.hs-pre__bar {
  width: 220px;
  height: 18px;
  padding: 3px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  box-shadow: 3px 4px 0 rgba(23, 19, 15, 0.18);
}
.hs-pre__bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: repeating-linear-gradient(-45deg, var(--hs-coral) 0 8px, #ff8a6e 8px 16px);
  background-size: 200% 100%;
  transform-origin: left;
  animation: pre-load 1.05s cubic-bezier(0.4, 0, 0.2, 1) forwards, hs-pre-stripes 0.6s linear infinite;
}
.hs-pre__note { margin: 0.2rem 0 0; color: var(--ink-soft); font-family: var(--font-hand); font-size: 1.05rem; }
.hs-pre__bit {
  position: absolute;
  width: 46px;
  height: 46px;
  overflow: visible;
  stroke: var(--ink);
  stroke-width: 1.8;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 0 #fff) drop-shadow(2px 3px 0 rgba(23, 19, 15, 0.18));
  animation: hs-pre-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.hs-pre__bit path,
.hs-pre__bit circle { paint-order: stroke; }
.hs-pre__bit--star { top: 0; left: -10px; fill: var(--hs-gold); rotate: -14deg; animation-delay: 0.15s; }
.hs-pre__bit--bolt { top: 18%; right: -18px; fill: var(--hs-coral); rotate: 12deg; animation-delay: 0.3s; }
.hs-pre__bit--heart { bottom: 22%; left: -28px; fill: var(--hs-pink); rotate: -8deg; animation-delay: 0.45s; }
.hs-pre__bit--dot { bottom: 4%; right: -6px; width: 34px; height: 34px; fill: var(--hs-sky); animation-delay: 0.6s; }
@keyframes hs-pre-pop { from { transform: scale(0); } to { transform: none; } }
@keyframes hs-pre-wobble { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
@keyframes hs-pre-count { to { --hs-n: 100; } }
@keyframes hs-pre-stripes { to { background-position: -22.6px 0; } }