/* =====================================================================
   HIGH-UP! 2026 — the event's own skin.
   Loaded after mobile.css on every /high-up/ page, and only there: the
   eight shared partials stay in their order, this one overrides the
   hux-* base in pages.css and adds the pieces the overview alone uses
   (the hero, the film panel, the mission band).

   The look is the 2026 poster as a page, with the mechanics of the
   Persona 3 Reload menus: warm brown-black ground, burnt orange, a tan
   "sand" hairline, warm white; heavy uppercase display type skewed
   like the game's italics (the site ships no italic cut), white words
   trailing orange echo copies like the poster's High-Up!; long
   tapered BLADES as the one repeated shape (framing the hero photo,
   behind the selected item, sweeping in as hover fills, cutting the
   corners of every panel and button); oversized ghost numerals
   marking the chapters. Motion is choreographed entrances and clip
   wipes, transform and opacity only, every piece of it behind
   prefers-reduced-motion with the final frame as the fallback.

   Custom-property glossary
     --hx-skew   the display slant (the whole page shares one angle)
     --hx-cut    the chamfer on buttons and small panels
     --hx-px/py  the hero pointer drift, [-1, 1], set by highup.js
     --hx-r/x    per-item tilt and shift in the Persona-style stacks
   ===================================================================== */

.page-highup {
  --hx-ink: #120d0a;
  --hx-ink-rgb: 18, 13, 10;
  --hx-bark: #2b1a12;
  --hx-bark-2: #3b2418;
  --hx-bark-rgb: 43, 26, 18;
  --hx-orange: #ef7a2c;
  --hx-orange-rgb: 239, 122, 44;
  --hx-orange-deep: #c9621e;
  --hx-sand: #f0b47a;
  --hx-sand-rgb: 240, 180, 122;
  --hx-paper: #f6efe6;
  --hx-paper-rgb: 246, 239, 230;
  --hx-skew: -9deg;
  --hx-cut: 12px;
  /* the two cuts everything shares: images and boxes get slanted sides
     (the slant scales with the element between a floor and a cap),
     the tall form panels a slanted top and bottom edge */
  --hx-slant: clamp(14px, 6%, 64px);
  --hx-box: clamp(14px, 2vw, 24px);
  --hx-lean: clamp(12px, 2vw, 26px);
  --hx-shape: polygon(
    var(--hx-slant) 0,
    100% 0,
    calc(100% - var(--hx-slant)) 100%,
    0 100%
  );
  --hx-shape-box: polygon(
    var(--hx-box) 0,
    100% 0,
    calc(100% - var(--hx-box)) 100%,
    0 100%
  );
  /* the selector's five cuts (all five-point, so one morphs into the
     next as the blade slides): left tip, slab, right tip, left-cut
     slab, notched slab */
  --hx-cur-1: polygon(0 50%, 10% 0, 100% 0, 92% 100%, 10% 100%);
  --hx-cur-2: polygon(8% 0, 100% 0, 100% 0, 92% 100%, 0 100%);
  --hx-cur-3: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
  --hx-cur-4: polygon(0 40%, 7% 0, 100% 0, 100% 100%, 7% 100%);
  --hx-cur-5: polygon(0 0, 100% 0, 100% 100%, 22% 100%, 0 45%);
  --hx-shape-lean: polygon(
    0 0,
    100% var(--hx-lean),
    100% 100%,
    0 calc(100% - var(--hx-lean))
  );
  --hx-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --hx-slam: cubic-bezier(0.7, 0, 0.2, 1);
  --hx-px: 0;
  --hx-py: 0;

  /* the site tokens, retinted warm: the footer, the buttons and
     every shared rule below pick these up without being touched */
  --bg: var(--hx-ink);
  --bg-rgb: var(--hx-ink-rgb);
  --surface: #1b120d;
  --surface-2: #241811;
  --line: rgba(240, 180, 122, 0.16);
  --txt: var(--hx-paper);
  --txt-rgb: var(--hx-paper-rgb);
  --txt-soft: #cdbfae;
  /* 5.1:1 on bark (#927f6c was 4.3:1, under AA for the small hints) */
  --txt-dim: #9e8b77;
  --signal-soft: var(--hx-sand);

  background: var(--hx-ink);
  color: var(--txt);
}
.page-highup ::selection {
  background: var(--hx-orange);
  color: var(--hx-ink);
}

/* ------------------------------------------------ shared type dress */
/* the display voice: uppercase Archivo, tight, slanted, with the
   poster's orange echo trailing down-right. text-shadow carries the
   echo (an extra glyph layer, no extra text for a screen reader) */
.page-highup h2.statement,
.page-highup .hx-title {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.92;
  font-size: clamp(2.1rem, 5.4vw, 4.4rem);
  transform: skewX(var(--hx-skew));
  transform-origin: left bottom;
  text-shadow: 0.045em 0.06em 0 rgba(var(--hx-orange-rgb), 0.92);
}
/* the stepped statement: each line its own block, walking right */
.hx-lines > span {
  display: block;
}
@media (min-width: 861px) {
  .hux-mission-title.hx-lines > span {
    white-space: nowrap;
  }
}
.hx-lines > span:nth-child(2) {
  margin-left: 0.55em;
}
.hx-lines > span:nth-child(3) {
  margin-left: 0.22em;
}
.hx-lines > span:nth-child(4) {
  margin-left: 0.7em;
}

/* the chapter head: a ghost numeral behind, a bladed kicker, the title */
.hx-head {
  position: relative;
  isolation: isolate;
  padding-top: clamp(30px, 5vh, 58px);
}
.hx-num {
  position: absolute;
  z-index: -1;
  left: -0.06em;
  top: -0.1em;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(6.5rem, 17vw, 15rem);
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--hx-sand-rgb), 0.3);
  transform: skewX(var(--hx-skew));
  user-select: none;
  pointer-events: none;
}
.hx-head-center {
  text-align: center;
}
.hx-nobr {
  white-space: nowrap;
}
.hx-head-center .hx-num {
  left: 50%;
  transform: translateX(-56%) skewX(var(--hx-skew));
}
.hx-head-center .hx-title,
.hx-head-center h2.statement {
  transform-origin: center bottom;
}
.hx-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--hx-orange);
  letter-spacing: 0.2em;
  font-size: 0.72rem;
}
.hx-kicker::before {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 9px;
  background: var(--hx-orange);
  clip-path: polygon(0 50%, 100% 0, 78% 100%);
}
.hx-head .hx-title,
.hx-head h2.statement {
  margin-top: 12px;
}
.page-highup .hux-note {
  color: var(--hx-sand);
}
.page-highup .hux-lede,
.page-highup .hux-why-lede {
  font-size: 1.02rem;
  color: var(--txt-soft);
}

/* ------------------------------------------------ the blade buttons */
/* one shape for every button: a slab with both ends cut on the slant.
   clip-path also clips outlines, so focus is an inset ring; the hover
   fill is a sweep from the left (::before) with the label flipping
   to the ink it lands on */
.page-highup .hux-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(
    var(--hx-cut) 0,
    100% 0,
    calc(100% - var(--hx-cut)) 100%,
    0 100%
  );
  padding: 0 28px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition:
    color 0.26s var(--hx-snap),
    background 0.26s var(--hx-snap),
    transform 0.26s var(--hx-snap);
}
.page-highup .hux-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateX(-104%) skewX(-14deg);
  transition: transform 0.34s var(--hx-snap);
}
.page-highup .hux-btn:not(:disabled):hover::before {
  transform: translateX(0) skewX(0);
}
.page-highup .hux-btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: none;
}
.page-highup .hux-btn:not(:disabled):active {
  transform: none;
}
.page-highup .hux-btn:focus-visible,
.page-highup .hux-register .hux-btn:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 2px var(--hx-sand),
    inset 0 0 0 4px var(--hx-ink);
}
.page-highup .hux-btn-sm {
  padding: 0 20px;
  font-size: 0.78rem;
}
.page-highup .hux-btn-lg {
  height: 54px;
  padding: 0 34px;
  font-size: 0.95rem;
}
.page-highup .hux-btn-primary {
  background: var(--hx-paper);
  color: var(--hx-ink);
}
.page-highup .hux-btn-primary::before {
  background: var(--hx-orange);
}
.page-highup .hux-btn-quiet {
  background: rgba(var(--hx-paper-rgb), 0.09);
  color: var(--hx-paper);
  border: 0;
  box-shadow: none;
}
.page-highup .hux-btn-quiet::before {
  background: var(--hx-paper);
}
.page-highup .hux-btn-quiet:hover {
  color: var(--hx-ink);
  background: rgba(var(--hx-paper-rgb), 0.09);
  border: 0;
}
.page-highup .hux-btn-dark {
  background: var(--hx-ink);
  color: var(--hx-paper);
}
.page-highup .hux-btn-dark::before {
  background: var(--hx-paper);
}
.page-highup .hux-btn-dark:hover {
  color: var(--hx-ink);
}
.page-highup .hux-btn-line {
  background: rgba(var(--hx-ink-rgb), 0.16);
  color: var(--hx-ink);
  border: 0;
  box-shadow: none;
}
.page-highup .hux-btn-line::before {
  background: var(--hx-ink);
}
.page-highup .hux-btn-line:hover {
  color: var(--hx-paper);
  background: rgba(var(--hx-ink-rgb), 0.16);
  box-shadow: none;
}

/* ------------------------------------------------ the header */
.page-highup .hux-nav {
  background: rgba(var(--hx-ink-rgb), 0.74);
  border-bottom: 1px solid rgba(var(--hx-sand-rgb), 0.14);
}
.page-highup .hux-nav-logo {
  height: 20px;
}
.page-highup .hux-nav-links {
  gap: clamp(6px, 1.4vw, 14px);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
/* every link is a slanted slab: a lighter fill under the pointer or
   focus, orange under the current page. Nothing travels. */
.page-highup .hux-nav-links a {
  position: relative;
  display: inline-block;
  padding: 7px 18px;
  color: rgba(var(--hx-paper-rgb), 0.74);
  background: transparent;
  clip-path: var(--hx-cur-2);
  transform: skewX(var(--hx-skew));
  transition:
    color 0.2s var(--hx-snap),
    background 0.2s var(--hx-snap);
}
.page-highup .hux-nav-links a:nth-child(1) {
  clip-path: var(--hx-cur-1);
}
.page-highup .hux-nav-links a:nth-child(3) {
  clip-path: var(--hx-cur-3);
}
.page-highup .hux-nav-links a:nth-child(4) {
  clip-path: var(--hx-cur-4);
}
.page-highup .hux-nav-links a:nth-child(5) {
  clip-path: var(--hx-cur-5);
}
.page-highup .hux-nav-links a:hover,
.page-highup .hux-nav-links a:focus-visible {
  color: var(--hx-paper);
  background: rgba(var(--hx-paper-rgb), 0.16);
}
.page-highup .hux-nav:not(.open) .hux-nav-links .hux-nav-register {
  display: none;
}
.page-highup .hux-nav-links a[aria-current="page"],
.page-highup .hux-nav-links a[aria-current="page"]:hover {
  color: var(--hx-ink);
  background: var(--hx-orange);
}
.page-highup .hux-nav-links a:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--hx-sand);
}
.page-highup .hux-nav > .hux-btn-quiet {
  background: var(--hx-orange);
  color: var(--hx-ink);
}
.page-highup .hux-nav > .hux-btn-quiet::before {
  background: var(--hx-paper);
}
.page-highup .hux-nav-toggle {
  color: var(--hx-paper);
}
/* the award page's link: the one iridescent word in the orange skin,
   the same band the award page itself uses (ioty.css). Under the
   pointer or on the page itself the slab takes the band and the
   label turns ink */
.page-highup .hux-nav-links .hux-nav-ioty span {
  background: linear-gradient(
    100deg,
    #ff9ee6,
    #b9a4ff 25%,
    #7fdcff 50%,
    #8ff5c9 75%,
    #ffe89a
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-highup .hux-nav-links .hux-nav-ioty[aria-current="page"],
.page-highup .hux-nav-links .hux-nav-ioty[aria-current="page"]:hover {
  background: linear-gradient(
    100deg,
    #ff9ee6,
    #b9a4ff 25%,
    #7fdcff 50%,
    #8ff5c9 75%,
    #ffe89a
  );
}
.page-highup .hux-nav-links .hux-nav-ioty[aria-current="page"] span {
  background: none;
  color: #000;
}
/* the bar runs out of room between the phone menu and a wide screen:
   there the link says "Inspirer" alone */
@media (min-width: 701px) and (max-width: 1180px) {
  .page-highup .hux-nav:not(.open) .hux-nav-ioty-long {
    display: none;
  }
}

/* ------------------------------------------------ the hero */
/* the poster: tagline up top, the wordmark with its echoes, the
   rooftop photo cut on the slant and framed by blades, the date slab
   and the button riding its bottom edge, the built-by row underneath */
.hx-hero {
  /* what the hero holds besides the photo panel (nav gap, return link,
     word, Slush line, built-by row, paddings), and the panel's
     width-to-height ratio; .hx-hero-frame turns the height left over
     into the panel's width with these, so the hero fits one screen */
  --hx-hero-rest: 560px;
  --hx-panel-ratio: 2.625;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(var(--svh) * 100);
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: calc(78px + 3vh) 0 clamp(20px, 3vh, 36px);
  background:
    radial-gradient(
      120% 80% at 50% 110%,
      rgba(var(--hx-orange-rgb), 0.16),
      transparent 60%
    ),
    var(--hx-ink);
}
.hx-hero-blades {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  z-index: -1;
  pointer-events: none;
  transform: translate(
    calc(var(--hx-px) * 14px),
    calc(var(--hx-py) * 10px)
  );
}
.hx-hero-front {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  z-index: 2;
  pointer-events: none;
  transform: translate(
    calc(var(--hx-px) * -22px),
    calc(var(--hx-py) * -14px)
  );
}
.hx-hero-blades polygon,
.hx-hero-front polygon {
  stroke: rgba(var(--hx-sand-rgb), 0.6);
  stroke-width: 1.2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
}
.hx-b-bark {
  fill: var(--hx-bark);
}
.hx-b-deep {
  fill: #1a100b;
}
.hx-b-orange {
  fill: var(--hx-orange);
}
.hx-b-sand {
  fill: var(--hx-sand);
  stroke: none;
}
.hx-hero-inner {
  position: relative;
  z-index: 1;
  margin-block: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
/* the three claims as a Persona stack laid on its side: tilted slabs
   in the three fills, each a number and its word */
.hx-claims {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 12px 10px;
}
.hx-claims-band {
  margin-top: clamp(36px, 6vh, 64px);
  padding-top: clamp(22px, 3.5vh, 32px);
  border-top: 1px solid rgba(var(--hx-sand-rgb), 0.16);
}
.hx-claim {
  --hx-r: -3deg;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 18px 6px 14px;
  background: var(--hx-bark);
  color: var(--hx-paper);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transform: rotate(var(--hx-r));
}
.hx-claim strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.2vw, 1.9rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  transform: skewX(var(--hx-skew));
}
.hx-claim .mono {
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  opacity: 0.85;
}
.hx-claim-hot {
  --hx-r: 2.5deg;
  background: var(--hx-orange);
  color: var(--hx-ink);
  translate: 0 5px;
}
.hx-claim-sand {
  --hx-r: -1.5deg;
  background: var(--hx-sand);
  color: var(--hx-ink);
  translate: 0 -3px;
}
/* the wordmark: three copies of the traced paths (highup.js used to
   tear them; now they stack). Two orange echoes fly out to sit above
   and below the white word, the poster's exact move */
.hx-wordmark {
  /* capped by the viewport's height as well as its width, so a wide,
     short window (a laptop with the browser bar) gets a word that
     leaves room for the photo and the built-by row below */
  --hu-mark-w: clamp(16rem, min(58vw, 70vh), 52rem);
  position: relative;
  display: block;
  width: var(--hu-mark-w);
  margin: clamp(14px, 2.4vh, 26px) auto 0;
  line-height: 0;
  transform: rotate(-3deg);
}
.hx-wordmark .hu-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.hu-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hx-wordmark .hu-mark {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.hx-wm-echo {
  position: absolute;
  inset: 0;
  fill: var(--hx-orange);
}
.hx-wm-echo-a {
  transform: translate(-1.6%, -14%);
}
.hx-wm-echo-b {
  fill: var(--hx-orange-deep);
  transform: translate(1.6%, 14%);
}
.hx-wm-main {
  position: relative;
  fill: var(--hx-paper);
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.45));
}
.hx-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
  margin-top: clamp(14px, 2.6vh, 26px);
}
.hx-hero-venue {
  color: var(--hx-sand);
  letter-spacing: 0.2em;
}
/* the official badge: holographic foil, its sheen sliding with the
   pointer (and slowly on its own), the Slush mark inverted to ink */
.hx-official {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px 7px 14px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1a120c;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  background:
    linear-gradient(
      115deg,
      #f6efe6 0%,
      #ffd7a6 12%,
      #ffb1c6 26%,
      #cbb8ff 40%,
      #a9eeff 54%,
      #c6ffc8 66%,
      #fff1a6 78%,
      #f6efe6 100%
    );
  background-size: 260% 100%;
  background-position: 50% 50%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
.hx-official-logo {
  height: 13px;
  width: auto;
  filter: invert(1) brightness(0.15);
}
@media (prefers-reduced-motion: no-preference) {
  .hx-official {
    animation: hx-foil 7s ease-in-out infinite alternate;
  }
}
@keyframes hx-foil {
  from {
    background-position: 28% 50%;
  }
  to {
    background-position: 72% 50%;
  }
}
/* the sticker on the photo's shoulder */
.hx-free {
  position: absolute;
  z-index: 4;
  top: -18px;
  right: calc(var(--hx-slant) + 2%);
  display: grid;
  place-items: center;
  padding: 11px 24px 10px;
  background: var(--hx-orange);
  color: var(--hx-ink);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.4vw, 1.2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transform: rotate(6deg) skewX(var(--hx-skew));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
.hx-free::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(var(--hx-ink-rgb), 0.35);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
/* the photo panel, cut on the slant, with the date slab and the
   button riding its bottom edge */
.hx-hero-frame {
  position: relative;
  /* the panel's width sets its height through its ratio, so the last
     term keeps the whole hero inside one viewport: the height left over
     after everything else (--hx-hero-rest), turned into a width. The
     floor is where the band inside starts folding onto itself */
  width: min(
    1120px,
    100%,
    max(800px, calc((var(--svh) * 100 - var(--hx-hero-rest)) * var(--hx-panel-ratio)))
  );
  margin: clamp(18px, 3.2vh, 40px) auto 0;
}
.hx-hero-panel {
  position: relative;
  aspect-ratio: var(--hx-panel-ratio);
  clip-path: var(--hx-shape);
  background: var(--hx-bark);
}
.hx-hero-photo {
  position: absolute;
  inset: 0;
  margin: 0;
}
.hx-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}
.hx-hero-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      200deg,
      rgba(var(--hx-ink-rgb), 0) 45%,
      rgba(var(--hx-ink-rgb), 0.72) 100%
    ),
    linear-gradient(
      0deg,
      rgba(var(--hx-ink-rgb), 0.55) 0%,
      rgba(var(--hx-ink-rgb), 0) 38%
    );
  pointer-events: none;
}
.hx-hero-band {
  position: absolute;
  left: clamp(14px, 3vw, 40px);
  right: calc(clamp(14px, 3vw, 40px) + var(--hx-slant));
  bottom: clamp(16px, 3.4vh, 38px);
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  text-align: left;
}
.hx-stamp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.hx-stamp-date {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.9vw, 3.3rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--hx-paper);
  background: var(--hx-ink);
  padding: 0.16em 0.34em 0.12em 0.26em;
  clip-path: polygon(0.28em 0, 100% 0, calc(100% - 0.28em) 100%, 0 100%);
  transform: skewX(var(--hx-skew));
  text-shadow: 0.045em 0.06em 0 var(--hx-orange);
}
.hx-stamp-loc {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 0.6em;
  padding: 7px 18px 7px 12px;
  background: var(--hx-sand);
  color: var(--hx-ink);
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  transform: rotate(-1.5deg);
}
.hx-pin {
  flex: none;
  width: 18px;
  height: 18px;
  fill: var(--hx-orange-deep);
}
.hx-stamp-where {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}
.hx-stamp-where strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  transform: skewX(var(--hx-skew));
  transform-origin: left bottom;
}
.hx-stamp-where .mono {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  opacity: 0.8;
}
.page-highup .hu-ctas {
  margin: 0;
  justify-content: flex-end;
  gap: 10px;
}
/* the application countdown (highup-countdown.js): a sand tag for the
   label, then one slanted ink tile per unit with the figure in the
   display face (tabular digits, so nothing wobbles as they tick) and
   the orange offset shadow the date stamp wears. A digit that changes
   slides in from above (.is-tick, dropped under reduced motion). Once
   the clock is out the tiles give way to an orange CLOSED stamp. The
   hero wraps it with the buttons in .hx-hero-go; the register page
   carries the same component in its header (.hx-deadline-reg). */
.hx-hero-go {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.hx-hero .hx-deadline {
  filter: drop-shadow(0 10px 22px rgba(var(--hx-ink-rgb), 0.55));
}
.hx-deadline {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  color: var(--hx-paper);
  line-height: 1;
}
.hx-deadline-label {
  display: inline-block;
  padding: 6px 13px 5px 11px;
  background: var(--hx-sand);
  color: var(--hx-ink);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  transform: rotate(-1.5deg);
  transform-origin: right bottom;
}
.hx-deadline-time {
  display: inline-flex;
  align-items: stretch;
  gap: 7px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.hx-cd {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 3.1em;
  padding: 0.42em 0.5em 0.36em;
  background: var(--hx-ink);
  box-shadow: inset 0 0 0 1px rgba(var(--hx-sand-rgb), 0.22);
  clip-path: polygon(0.3em 0, 100% 0, calc(100% - 0.3em) 100%, 0 100%);
  transform: skewX(var(--hx-skew));
  overflow: hidden;
}
.hx-cd-n {
  display: block;
  font-size: 1.8em;
  line-height: 0.92;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0.045em 0.06em 0 var(--hx-orange);
}
.hx-cd-u {
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  color: var(--hx-sand);
}
@keyframes hx-cd-tick {
  from {
    transform: translateY(-0.5em);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.hx-cd-n.is-tick {
  animation: hx-cd-tick 0.3s var(--hx-snap);
}
/* the closed stamp */
.hx-deadline.is-closed .hx-deadline-time {
  display: inline-block;
  padding: 0.18em 0.5em 0.12em 0.42em;
  background: var(--hx-orange);
  color: var(--hx-ink);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
  clip-path: polygon(0.28em 0, 100% 0, calc(100% - 0.28em) 100%, 0 100%);
  transform: skewX(var(--hx-skew)) rotate(-2deg);
  transform-origin: right bottom;
  text-shadow: 0.04em 0.05em 0 var(--hx-paper);
}
/* on the register page the header is left-aligned, so is the clock */
.hx-deadline-reg {
  margin-top: 22px;
  align-items: flex-start;
}
.hx-deadline-reg .hx-deadline-label,
.hx-deadline-reg.is-closed .hx-deadline-time {
  transform-origin: left bottom;
}
.hx-deadline-reg .hx-deadline-time {
  font-size: 1.1rem;
}
@media (prefers-reduced-motion: reduce) {
  .hx-cd-n.is-tick {
    animation: none;
  }
}
/* the built-by row, carried over: the label in sand */
.hu-presented {
  position: relative;
  z-index: 1;
  color: var(--txt-dim);
  margin-top: clamp(22px, 4vh, 44px);
}
.hu-presented .backed-label {
  color: rgba(var(--hx-sand-rgb), 0.7);
  margin-bottom: 18px;
  letter-spacing: 0.22em;
}
.hu-presented .backers {
  --lg: 1;
  gap: 18px 34px;
}
.hu-presented .backers img {
  height: calc(30px * var(--lg));
  max-width: 100%;
  object-fit: contain;
}
.hu-presented .backers .hu-lg-stuhi {
  height: calc(24px * var(--lg));
}
.hu-presented .backers .hu-lg-fr8 {
  height: calc(28px * var(--lg));
}
.hu-presented .backers .hu-lg-founder {
  height: calc(27px * var(--lg));
}
@media (max-width: 1000px) {
  .hu-presented .backers {
    --lg: 0.84;
    gap: 16px 26px;
  }
}
@media (max-width: 860px) {
  .hu-presented .backers {
    --lg: 0.8;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
    align-items: center;
    gap: 22px 14px;
  }
}
@media (max-width: 560px) {
  .hu-presented .backers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 18px;
  }
}

/* the entrance. Start states hold until highup.js lands .is-in (two
   frames after load, so the start paints first); the transitions
   below then run in this order: blades slash in from their edges,
   the tagline wipes word by word, the wordmark drops in as its echoes
   fly out, the photo opens along its slant, the date slab slams in
   from the left, the button and the built-by row fade up. Reduced
   motion never sees a start state. */
@media (prefers-reduced-motion: no-preference) {
  .js .hx-hero-blades polygon,
  .js .hx-hero-front polygon {
    transition: transform 0.9s var(--hx-snap);
  }
  .js .hx-hero:not(.is-in) .hx-b1 {
    transform: translate(-60%, -20%);
  }
  .js .hx-hero:not(.is-in) .hx-b2 {
    transform: translate(50%, -40%);
  }
  .js .hx-hero:not(.is-in) .hx-b3 {
    transform: translate(70%, 10%);
  }
  .js .hx-hero:not(.is-in) .hx-b4 {
    transform: translate(-40%, 50%);
  }
  .js .hx-hero:not(.is-in) .hx-b5 {
    transform: translate(-70%, 30%);
  }
  .js .hx-hero:not(.is-in) .hx-b6 {
    transform: translate(60%, 40%);
  }
  .js .hx-hero:not(.is-in) .hx-f1 {
    transform: translate(-80%, 40%);
  }
  .js .hx-hero:not(.is-in) .hx-f2 {
    transform: translate(80%, -30%);
  }
  .js .hx-hero .hx-b2 {
    transition-delay: 0.06s;
  }
  .js .hx-hero .hx-b3 {
    transition-delay: 0.12s;
  }
  .js .hx-hero .hx-b4 {
    transition-delay: 0.05s;
  }
  .js .hx-hero .hx-b5 {
    transition-delay: 0.16s;
  }
  .js .hx-hero .hx-b6 {
    transition-delay: 0.1s;
  }
  .js .hx-hero .hx-f1 {
    transition-delay: 0.55s;
  }
  .js .hx-hero .hx-f2 {
    transition-delay: 0.62s;
  }
  .js .hx-free {
    transition:
      opacity 0.25s linear 1.25s,
      scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.25s;
  }
  .js .hx-hero:not(.is-in) .hx-free {
    opacity: 0;
    scale: 1.8;
  }
  .js .hx-wm-main {
    transition:
      opacity 0.5s var(--hx-snap) 0.3s,
      transform 0.7s var(--hx-snap) 0.3s;
  }
  .js .hx-wm-echo {
    transition:
      opacity 0.4s var(--hx-snap) 0.5s,
      transform 0.75s var(--hx-snap) 0.5s;
  }
  .js .hx-hero:not(.is-in) .hx-wm-main {
    opacity: 0;
    transform: scale(1.14);
  }
  .js .hx-hero:not(.is-in) .hx-wm-echo {
    opacity: 0;
    transform: translate(0, 0);
  }
  .js .hx-hero-meta {
    transition: opacity 0.5s var(--hx-snap) 0.7s;
  }
  .js .hx-hero:not(.is-in) .hx-hero-meta {
    opacity: 0;
  }
  .js .hx-hero-panel {
    transition: clip-path 0.85s var(--hx-snap) 0.62s;
  }
  .js .hx-hero:not(.is-in) .hx-hero-panel {
    clip-path: polygon(var(--hx-slant) 0, var(--hx-slant) 0, 0 100%, 0 100%);
  }
  .js .hx-stamp {
    transition:
      transform 0.5s var(--hx-slam) 1s,
      opacity 0.3s linear 1s;
  }
  .js .hx-hero:not(.is-in) .hx-stamp {
    opacity: 0;
    transform: translateX(-60px);
  }
  .js .hx-hero .hx-hero-go,
  .js .hx-hero .hu-presented {
    transition:
      opacity 0.5s var(--hx-snap) 1.15s,
      transform 0.6s var(--hx-snap) 1.15s;
  }
  .js .hx-hero .hu-presented {
    transition-delay: 1.3s;
  }
  .js .hx-hero:not(.is-in) .hx-hero-go,
  .js .hx-hero:not(.is-in) .hu-presented {
    opacity: 0;
    transform: translateY(18px);
  }
}

/* ------------------------------------------------ scroll reveals */
/* html.hx-motion is set by highup.js only when an observer will
   deliver .is-seen (and motion is welcome): nothing here can hide
   content from anyone else */
.hx-motion [data-hx-reveal] {
  transition:
    opacity 0.6s var(--hx-snap),
    transform 0.75s var(--hx-snap),
    clip-path 0.75s var(--hx-snap);
}
.hx-motion [data-hx-reveal]:not(.is-seen) {
  opacity: 0;
}
.hx-motion [data-hx-reveal="rise"]:not(.is-seen) {
  transform: translateY(28px);
}
.hx-motion [data-hx-reveal="slash"]:not(.is-seen) {
  transform: translateX(-36px) skewX(-6deg);
}
/* the wipe collapses an inner wrapper (.hx-wipe), never the observed
   box itself: Chromium's IntersectionObserver reports a box whose own
   clip-path has no area as never intersecting, so a reveal keyed on
   its own clip would never fire */
.hx-motion [data-hx-reveal="wipe"]:not(.is-seen) {
  opacity: 1;
}
.hx-motion [data-hx-reveal="wipe"] > .hx-wipe {
  clip-path: polygon(-1% 0, 101% 0, 101% 100%, -1% 100%);
  transition: clip-path 0.8s var(--hx-snap);
}
.hx-motion [data-hx-reveal="wipe"]:not(.is-seen) > .hx-wipe {
  clip-path: polygon(-1% 0, -1% 0, -1% 100%, -1% 100%);
}
.hx-motion .hx-media::before {
  transition:
    transform 0.8s var(--hx-snap) 0.1s,
    opacity 0.4s linear 0.1s;
}
.hx-motion .hx-media:not(.is-seen)::before {
  opacity: 0;
  transform: translateX(-40px);
}
.hx-motion [data-hx-delay="1"] {
  transition-delay: 0.09s;
}
.hx-motion [data-hx-delay="2"] {
  transition-delay: 0.18s;
}
.hx-motion [data-hx-delay="3"] {
  transition-delay: 0.27s;
}
.hx-motion [data-hx-delay="4"] {
  transition-delay: 0.36s;
}

/* ------------------------------------------------ the film */
.hux-film {
  position: relative;
  z-index: 2;
  padding: clamp(10px, 2vh, 28px) 0 0;
}
.hux-film-frame {
  position: relative;
  isolation: isolate;
  margin: 0 auto;
  max-width: 1100px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--hx-bark);
  clip-path: var(--hx-shape);
}
.hux-film-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.hx-film-tab {
  position: absolute;
  top: 0;
  left: var(--hx-slant);
  z-index: 2;
  padding: 8px 24px 8px 14px;
  background: var(--hx-orange);
  color: var(--hx-ink);
  letter-spacing: 0.2em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  pointer-events: none;
}
.hux-film-ctl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  padding: clamp(12px, 2vw, 22px) calc(clamp(22px, 3vw, 40px) + var(--hx-slant))
    clamp(12px, 2vw, 22px) clamp(22px, 3vw, 40px);
  background: linear-gradient(
    180deg,
    rgba(var(--hx-ink-rgb), 0) 0%,
    rgba(var(--hx-ink-rgb), 0.6) 100%
  );
  pointer-events: none;
}
.hux-film-ctl .hux-btn {
  pointer-events: auto;
  background: rgba(var(--hx-ink-rgb), 0.55);
}
.hux-film-play {
  min-width: 6.4em;
}
.hux-film-sound {
  min-width: 8.4em;
}
.hux-film.is-native .hux-film-ctl {
  display: none;
}
.hux-film.is-native .hux-film-video {
  cursor: default;
}

/* ------------------------------------------------ the mission */
/* the statement in stepped lines beside the photo cut into a
   parallelogram, a bark blade standing behind it for depth */
.hux-mission {
  position: relative;
  padding: clamp(72px, 12vh, 140px) 0 clamp(56px, 9vh, 100px);
  background: linear-gradient(
    180deg,
    var(--hx-ink) 0%,
    #19110c 30%,
    #19110c 70%,
    var(--hx-ink) 100%
  );
}

.hux-mission-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
}
.hux-mission-copy {
  position: relative;
  isolation: isolate;
}
.hux-mission-copy .hx-num {
  top: -0.32em;
}
.hux-mission-title {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 3.9vw, 3.4rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
  margin: 14px 0 0;
  transform: skewX(var(--hx-skew));
  transform-origin: left bottom;
  text-shadow: 0.045em 0.06em 0 rgba(var(--hx-orange-rgb), 0.92);
}
.hux-mission-sub {
  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  line-height: 1.6;
  max-width: 46ch;
  margin: 26px 0 0 0.3em;
  color: var(--txt-soft);
  border-left: 2px solid var(--hx-orange);
  padding-left: 18px;
}
.hx-media {
  position: relative;
  isolation: isolate;
}
.hx-media::before {
  content: "";
  position: absolute;
  inset: -7% -4% 9% 7%;
  z-index: -1;
  background: var(--hx-orange);
  clip-path: var(--hx-shape);
}
.hux-mission-photo {
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--hx-bark);
  clip-path: var(--hx-shape);
}
.hux-mission-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

/* ------------------------------------------------ why attend */
/* the four points as the Persona menu: heavy tilted words stacked
   with a stagger, the selected one carrying a white blade with an
   orange twin pulsing behind it and going ink on top; the photo
   beside them wipes over on the diagonal when the point changes */
.page-highup .hux-why,
.page-highup .hux-speakers,
.page-highup .hux-mentors,
.page-highup .hux-agenda,
.page-highup .hux-sponsors {
  padding: clamp(48px, 9vh, 104px) 0;
  scroll-margin-top: 70px;
}
/* the mentors under the speakers: same grid, the sign-up link as a
   lined button under it for the founder reading over a student's shoulder */
.page-highup .hux-mentors-cta {
  margin: clamp(26px, 4vh, 40px) 0 0;
}
/* phones get the first four mentors and a button for the rest; the
   fold is a class highup.js sets, so without script every card shows */
.page-highup .hux-mentors-more {
  display: none;
  margin: clamp(26px, 4vh, 40px) 0 0;
}
@media (max-width: 860px) {
  .page-highup .hux-mentors.is-folded .hux-speaker-grid > :nth-child(n + 5) {
    display: none;
  }
  .page-highup .hux-mentors.is-folded .hux-mentors-more {
    display: block;
  }
  .page-highup .hux-mentors.is-folded .hux-mentors-cta {
    margin-top: 14px;
  }
}
.page-highup .hux-why-lede {
  max-width: 54ch;
  margin: 22px auto 0;
}
.page-highup .hux-why-grid {
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(26px, 4vw, 64px);
  margin-top: clamp(40px, 6vh, 72px);
  align-items: center;
}
.page-highup .hux-why-media {
  min-height: 400px;
  background: var(--hx-bark);
  clip-path: var(--hx-shape);
}
.hux-why-stage {
  position: absolute;
  inset: 0;
}
.page-highup .hux-why-media .hux-why-pane {
  opacity: 1;
  z-index: 0;
  border-radius: 0;
  clip-path: polygon(-30% 0, -30% 0, 0 100%, 0 100%);
  transition: none;
}
.page-highup .hux-why-media .hux-why-pane.is-prev {
  z-index: 1;
  clip-path: polygon(-30% 0, 130% 0, 130% 100%, 0 100%);
}
.page-highup .hux-why-media .hux-why-pane.is-active {
  z-index: 2;
  clip-path: polygon(-30% 0, 130% 0, 130% 100%, 0 100%);
  transition: clip-path 0.62s var(--hx-snap);
}
.page-highup .hux-why-list {
  display: flex;
  flex-direction: column;
  padding: 10px 0 10px 4%;
}
.page-highup .hux-why-item {
  --hx-r: -3deg;
  --hx-x: 0;
  position: relative;
  border: 0;
  padding: 4px 0 12px;
}
.page-highup .hux-why-item:nth-child(2) {
  --hx-r: -1.5deg;
  --hx-x: 7%;
}
.page-highup .hux-why-item:nth-child(3) {
  --hx-r: -3.5deg;
  --hx-x: 2%;
}
.page-highup .hux-why-item:nth-child(4) {
  --hx-r: -2deg;
  --hx-x: 9%;
}
.page-highup .hux-why-item + .hux-why-item {
  margin-top: -6px;
}
.page-highup .hux-why-head {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 6px 0.5em 6px 0.3em;
  margin-left: var(--hx-x);
  transform: rotate(var(--hx-r));
  transform-origin: left center;
}
.page-highup .hux-why-item h3 {
  font-size: clamp(1.5rem, 2.7vw, 2.15rem);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1;
}
.page-highup .hux-why-item h3 button {
  color: var(--hx-sand);
  padding: 8px 0;
  transform: skewX(var(--hx-skew));
  transition: color 0.25s var(--hx-snap);
}
.page-highup .hux-why-item:hover h3 button {
  color: var(--hx-paper);
}
.page-highup .hux-why-item.is-active h3 button,
.page-highup .hux-why-item.is-active:hover h3 button {
  color: var(--hx-ink);
}
.page-highup .hux-why-item h3 button:focus-visible {
  outline: 2px solid var(--hx-sand);
  outline-offset: 4px;
}
.page-highup .hux-why-head::before,
.page-highup .hux-why-head::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -4%;
  bottom: -4%;
  left: -12%;
  right: -34%;
  clip-path: polygon(0 50%, 9% 0, 72% 0, 100% 38%, 70% 100%, 9% 100%);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition:
    transform 0.4s var(--hx-snap),
    opacity 0.2s linear;
}
.page-highup .hux-why-head::before {
  background: var(--hx-paper);
}
.page-highup .hux-why-head::after {
  z-index: -2;
  right: -42%;
  top: -2%;
  bottom: -6%;
  background: var(--hx-orange);
  clip-path: polygon(0 50%, 9% 0, 66% 4%, 100% 44%, 62% 100%, 9% 100%);
}
.page-highup .hux-why-item.is-active .hux-why-head::before,
.page-highup .hux-why-item.is-active .hux-why-head::after {
  transform: scaleX(1);
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .page-highup .hux-why-item.is-active .hux-why-head::after {
    animation: hx-pulse 1.3s ease-in-out infinite alternate;
  }
}
@keyframes hx-pulse {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(1.06);
  }
}
.page-highup .hx-has-cursor .hux-why-head::before,
.page-highup .hx-has-cursor .hux-why-head::after {
  display: none;
}
.page-highup .hx-has-cursor .hux-why-item {
  z-index: 1;
}
.page-highup .hux-why-item.is-hot h3 button,
.page-highup .hux-why-item.is-hot:hover h3 button {
  color: var(--hx-ink);
}
.page-highup .hx-has-cursor .hux-why-item.is-active:not(.is-hot) h3 button {
  color: var(--hx-sand);
}
.page-highup .hx-has-cursor .hux-why-item.is-active:not(.is-hot):hover h3 button {
  color: var(--hx-paper);
}
.page-highup .hux-why-item.is-hot .hux-why-run i {
  background: rgba(var(--hx-ink-rgb), 0.22);
}
.page-highup .hux-why-item.is-hot .hux-why-run i.is-on {
  background: var(--hx-ink);
}
.page-highup .hx-has-cursor .hux-why-item:not(.is-hot) .hux-why-run i {
  background: rgba(var(--hx-paper-rgb), 0.2);
}
.page-highup .hx-has-cursor .hux-why-item:not(.is-hot) .hux-why-run i.is-on {
  background: var(--hx-orange);
}
.page-highup .hux-why-item p {
  margin: 6px 0 0 calc(var(--hx-x) + 0.5em);
  max-width: 44ch;
  font-size: 0.95rem;
  color: var(--txt-soft);
  opacity: 0.7;
  transition: opacity 0.3s var(--hx-snap);
}
.page-highup .hux-why-item.is-active p {
  opacity: 1;
}
/* the rotation runner: four small blades filling orange */
.page-highup .hux-why-run {
  gap: 5px;
  transform: skewX(var(--hx-skew));
}
.page-highup .hux-why-run i {
  width: 12px;
  height: 7px;
  background: rgba(var(--hx-ink-rgb), 0.22);
  clip-path: polygon(0 50%, 100% 0, 78% 100%);
}
.page-highup .hux-why-run i.is-on {
  background: var(--hx-ink);
}

/* ------------------------------------------------ speakers */
/* portraits cut into parallelograms leaning alternately, straightening
   when you land on them; the name slanted, a blade rule growing under */
.page-highup .hux-speaker-grid {
  gap: 30px 18px;
  margin-top: clamp(32px, 5vh, 56px);
}
.page-highup .hux-speaker {
  position: relative;
}
.page-highup .hux-speaker img {
  border-radius: 0;
  clip-path: var(--hx-shape);
  filter: saturate(0.85);
  transition: filter 0.4s var(--hx-snap);
}
.page-highup .hux-speaker:hover img,
.page-highup .hux-speaker:focus-within img {
  filter: none;
}
.page-highup .hux-speaker figcaption {
  margin-top: 12px;
  padding-left: 4px;
  gap: 4px;
}
.page-highup .hux-speaker figcaption strong {
  position: relative;
  display: inline-block;
  align-self: flex-start;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 1.05rem;
  line-height: 1;
  padding-bottom: 6px;
  transform: skewX(var(--hx-skew));
}
.page-highup .hux-speaker figcaption strong::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: var(--hx-orange);
  clip-path: polygon(0 50%, 100% 0, 92% 100%);
  transform: scaleX(0.28);
  transform-origin: left center;
  transition: transform 0.4s var(--hx-snap);
}
.page-highup .hux-speaker:hover figcaption strong::after {
  transform: scaleX(1);
}
.page-highup .hux-speaker figcaption .mono {
  color: var(--hx-sand);
  font-size: 0.66rem;
}
.page-highup .hux-ph {
  border: 1px dashed rgba(var(--hx-sand-rgb), 0.35);
  border-radius: 0;
  color: var(--hx-sand);
  clip-path: var(--hx-shape);
  background: repeating-linear-gradient(
    -45deg,
    rgba(var(--hx-sand-rgb), 0.07) 0 14px,
    transparent 14px 28px
  );
}
.page-highup .hux-ph-speaker {
  aspect-ratio: 3 / 4;
}
@media (min-width: 861px) {
  .page-highup .hux-speaker-grid > :nth-child(4n + 2),
  .page-highup .hux-speaker-grid > :nth-child(4n + 4) {
    transform: translateY(28px);
  }
}

/* ------------------------------------------------ agenda */
.page-highup .hux-ag-meta {
  margin-top: 30px;
}
.page-highup .hux-ag-legend {
  color: var(--txt-soft);
}
.page-highup .hux-ag-hint {
  color: var(--hx-sand);
}
.page-highup .hux-ag-days {
  margin-top: clamp(34px, 5vh, 56px);
}
.page-highup .hux-ag-day + .hux-ag-day {
  border-left-color: rgba(var(--hx-sand-rgb), 0.2);
}
.page-highup .hux-ag-dayhead {
  align-items: flex-end;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--hx-orange);
}
.page-highup .hux-ag-dayhead h2,
.page-highup .hux-ag-dayhead h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  transform: skewX(var(--hx-skew));
  transform-origin: left bottom;
  text-shadow: 0.045em 0.06em 0 rgba(var(--hx-orange-rgb), 0.92);
}
.page-highup .hux-ag-date {
  color: var(--hx-sand);
}
.page-highup .hux-ag-row {
  border-top-color: rgba(var(--hx-sand-rgb), 0.14);
}
.page-highup .hux-ag-row:first-child {
  border-top: 0;
}
/* the row: the time first as a bold sand column, the title beside it;
   an orange blade sweeps in from the left on hover and the words go ink */
.page-highup .hux-ag-open {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 6.2em minmax(0, 1fr);
  align-items: baseline;
  column-gap: 14px;
  padding: 13px 12px 13px 10px;
}
.page-highup .hux-ag-open::before {
  content: "";
  position: absolute;
  inset: 3px -6px 3px -14px;
  z-index: -1;
  background: var(--hx-orange);
  clip-path: polygon(0 50%, 2.5% 0, 100% 0, 98% 100%, 2.5% 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s var(--hx-snap);
}
.page-highup .hux-ag-open:hover::before,
.page-highup .hux-ag-open:focus-visible::before {
  transform: scaleX(1);
}
.page-highup .hux-ag-open:focus-visible {
  outline: none;
}
.page-highup .hux-ag-time {
  order: -1;
  margin: 0;
  gap: 8px;
  color: var(--hx-sand);
  font-weight: 600;
  letter-spacing: 0.08em;
  transition: color 0.25s var(--hx-snap);
}
.page-highup .hux-ag-title {
  font-size: 0.98rem;
  transition: color 0.25s var(--hx-snap);
}
.page-highup .hux-ag-open:hover .hux-ag-title,
.page-highup .hux-ag-open:hover .hux-ag-time,
.page-highup .hux-ag-open:focus-visible .hux-ag-title,
.page-highup .hux-ag-open:focus-visible .hux-ag-time,
.page-highup .hux-ag-open.is-hot .hux-ag-title,
.page-highup .hux-ag-open.is-hot .hux-ag-time {
  color: var(--hx-ink);
}
.page-highup .hux-ag-open:hover .hux-ag-dot,
.page-highup .hux-ag-open:focus-visible .hux-ag-dot,
.page-highup .hux-ag-open.is-hot .hux-ag-dot {
  background: var(--hx-ink);
}
.page-highup .hx-has-cursor .hux-ag-open::before {
  display: none;
}
.page-highup .hx-has-cursor .hux-ag-open:hover:not(.is-hot) .hux-ag-title,
.page-highup .hx-has-cursor .hux-ag-open:hover:not(.is-hot) .hux-ag-time {
  color: inherit;
}
.page-highup .hx-has-cursor > .hux-ag-row {
  position: relative;
  z-index: 1;
}
.page-highup .hx-has-cursor .hux-ag-open.is-hot .hux-ag-chip {
  color: var(--hx-ink);
  background: rgba(var(--hx-ink-rgb), 0.16);
}
.page-highup .hux-ag-dot {
  width: 11px;
  height: 7px;
  border-radius: 0;
  clip-path: polygon(0 50%, 100% 0, 78% 100%);
  background: rgba(var(--hx-paper-rgb), 0.4);
}
/* the legend's arrows keep their track colours: this skin's gray rule
   above outranks the single-class colour hooks in pages.css */
.page-highup .hux-ag-dot-b {
  background: var(--track-b);
}
.page-highup .hux-ag-dot-s {
  background: var(--track-s);
}
.page-highup .hux-agenda {
  --track-b: var(--hx-orange);
  --track-b-rgb: var(--hx-orange-rgb);
}
.page-highup .hux-ag-toggle {
  border: 0;
  border-radius: 0;
  background: rgba(var(--hx-paper-rgb), 0.07);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.page-highup .hux-ag-toggle button {
  border-radius: 0;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
}
.page-highup .hux-ag-toggle button[aria-pressed="true"] {
  background: var(--hx-paper);
  color: var(--hx-ink);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.page-highup .hux-ag-toggle button:focus-visible {
  outline: 2px solid var(--hx-sand);
  outline-offset: -3px;
}

/* the event modal: a bark panel with two cut corners and an orange
   blade across its top edge */
.page-highup .hux-modal-backdrop {
  background: rgba(var(--hx-ink-rgb), 0.7);
}
.page-highup .hux-modal {
  border: 0;
  border-radius: 0;
  background: var(--hx-bark);
  padding: 44px calc(34px + var(--hx-box)) 32px;
  clip-path: var(--hx-shape-box);
}
.page-highup .hux-modal::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--hx-box);
  width: 46%;
  height: 7px;
  background: var(--hx-orange);
  clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%);
}
.page-highup .hux-modal-close {
  border-radius: 0;
  border-color: rgba(var(--hx-sand-rgb), 0.35);
  color: var(--hx-sand);
  top: 18px;
  right: 18px;
}
.page-highup .hux-modal-close:hover {
  color: var(--hx-ink);
  background: var(--hx-orange);
  border-color: var(--hx-orange);
}
.page-highup .hux-modal-kicker {
  color: var(--hx-sand);
}
.page-highup .hux-modal h3 {
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.98;
  transform: skewX(var(--hx-skew));
  transform-origin: left bottom;
  padding-right: 20px;
  margin-top: 12px;
}
@media (prefers-reduced-motion: no-preference) {
  .page-highup .hux-modal {
    animation: hx-modal-in 0.34s var(--hx-snap);
  }
}
@keyframes hx-modal-in {
  from {
    opacity: 0;
    transform: translate(-22px, 10px) skewX(-6deg);
  }
}

/* ------------------------------------------------ partners */
.page-highup .hux-sps-tierhead {
  border-bottom-color: rgba(var(--hx-sand-rgb), 0.2);
  padding-bottom: 10px;
  margin-bottom: 16px;
}
.page-highup .hux-sps-tiername {
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  transform: skewX(var(--hx-skew));
  transform-origin: left bottom;
}
.page-highup .hux-sps-tiername .mono {
  color: var(--hx-orange);
  vertical-align: 3px;
}
/* the cards: square, a corner clipped off, an orange sweep behind
   the label on hover */
.page-highup .hux-sps-card {
  --brand: var(--hx-orange);
  --brand-rgb: var(--hx-orange-rgb);
  border-radius: 0;
  border: 0;
  background: rgba(var(--hx-bark-rgb), 0.8);
  isolation: isolate;
  overflow: hidden;
  clip-path: var(--hx-shape-box);
}
.page-highup .hux-sps-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(var(--brand-rgb), 0.18);
  transform: translateX(-102%) skewX(-12deg);
  transition: transform 0.45s var(--hx-snap);
}
.page-highup .hux-sps-card:hover::before {
  transform: translateX(0) skewX(0);
}
.page-highup .hux-sps-card:hover {
  background: rgba(var(--hx-bark-rgb), 0.8);
  transform: translateY(-2px);
}
.page-highup .hux-sps-card:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--hx-sand);
}
/* an open slot: the stripes alone say empty, no dashed frame */
.page-highup .hux-sps-open {
  border: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(var(--hx-sand-rgb), 0.06) 0 14px,
    transparent 14px 28px
  );
}
.page-highup .hux-sps-open:hover {
  background: repeating-linear-gradient(
    -45deg,
    rgba(var(--hx-sand-rgb), 0.06) 0 14px,
    transparent 14px 28px
  );
}
.page-highup .hux-sps-openlabel {
  color: var(--hx-sand);
}
.page-highup .hux-sps-open:hover .hux-sps-openlabel,
.page-highup .hux-sps-open:hover .hux-sps-plus {
  color: var(--hx-paper);
}

/* ------------------------------------------------ the register band */
/* the poster's orange as one big slanted panel, the headline stacked
   in stepped lines, the globe still poking out of the corner */
.page-highup .hux-register {
  margin-top: clamp(30px, 6vh, 64px);
}
.page-highup .hux-register-card {
  border-radius: 0;
  background: var(--hx-orange);
  color: var(--hx-ink);
  clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);
  padding: clamp(52px, 9vh, 96px) clamp(24px, 4.5vw, 64px);
  min-height: clamp(300px, 32vw, 420px);
}
.page-highup .hux-register-kicker {
  color: rgba(var(--hx-ink-rgb), 0.78);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.page-highup .hux-register-kicker::before {
  content: "";
  width: 26px;
  height: 9px;
  background: var(--hx-ink);
  clip-path: polygon(0 50%, 100% 0, 78% 100%);
}
.page-highup .hux-register h2 {
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.9;
  font-size: clamp(2rem, 4.2vw, 3.7rem);
  max-width: none;
  transform: skewX(var(--hx-skew));
  transform-origin: left bottom;
  text-shadow: 0.04em 0.055em 0 rgba(var(--hx-paper-rgb), 0.6);
}
.page-highup .hux-register-copy {
  max-width: min(68%, 46ch);
}
.page-highup .hux-register-globe canvas {
  filter: contrast(1.05);
}

/* ------------------------------------------------ the partner card */
.page-highup .hux-partner-card {
  border-radius: 0;
  border: 0;
  background: var(--hx-bark);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  clip-path: var(--hx-shape-box);
  padding-inline: calc(clamp(22px, 4.5vw, 56px) + var(--hx-box) / 2);
}
.page-highup .hux-partner-copy {
  position: relative;
  isolation: isolate;
}
.page-highup .hux-partner-copy .hx-num {
  top: -0.5em;
  -webkit-text-stroke-color: rgba(var(--hx-sand-rgb), 0.2);
}
.page-highup .hux-partner-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--hx-orange);
}
.page-highup .hux-partner-kicker::before {
  content: "";
  width: 26px;
  height: 9px;
  background: var(--hx-orange);
  clip-path: polygon(0 50%, 100% 0, 78% 100%);
}
.page-highup .hux-partner h2 {
  margin: 14px 0 18px;
  font-size: clamp(1.9rem, 4vw, 3.4rem);
}
.page-highup .hux-partner-lede {
  border-left: 2px solid var(--hx-orange);
  padding-left: 18px;
}
.page-highup .faq-aside h2,
.page-highup .faq-aside h3 {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.92rem;
  color: var(--hx-sand);
}
.page-highup .faq-aside + .faq-aside {
  border-top-color: rgba(var(--hx-sand-rgb), 0.16);
}
.page-highup .faq-aside-link {
  position: relative;
  padding: 2px 4px;
  margin-left: -4px;
  color: var(--hx-paper);
  box-shadow: inset 0 -2px 0 var(--hx-orange);
  transition:
    color 0.25s var(--hx-snap),
    box-shadow 0.25s var(--hx-snap);
}
.page-highup .faq-aside-link:hover {
  color: var(--hx-ink);
  box-shadow: inset 0 -1.6em 0 var(--hx-orange);
}

/* ------------------------------------------------ the footer */
.page-highup footer .f-title {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hx-sand);
}
.page-highup footer .footer-frame {
  border-left: 0;
  border-right: 0;
  border-color: rgba(var(--hx-sand-rgb), 0.16);
}

/* =====================================================================
   a wide but short window (a laptop with the browser's bar, 1366x768
   and the like): the photo goes flatter (21:6 instead of 21:8) so it
   can stay wide enough for the band to lie in one row, and the gaps
   between the hero's rows close up
   ===================================================================== */
@media (min-width: 861px) and (max-height: 820px) {
  .hx-hero {
    --hx-hero-rest: 520px;
    --hx-panel-ratio: 3.5;
    padding-bottom: 16px;
  }
  .hx-wordmark {
    margin-top: 12px;
  }
  .hx-hero-meta {
    margin-top: 12px;
  }
  .hx-hero-frame {
    margin-top: 18px;
  }
  .hx-hero .hu-presented {
    margin-top: 20px;
  }
  .hx-hero .hu-presented .backed-label {
    margin-bottom: 12px;
  }
  /* the band on the flatter, narrower panel: a smaller date stamp that
     never breaks its line, tighter gaps, slightly smaller tiles */
  .hx-hero-band {
    gap: 12px 18px;
  }
  .hx-stamp-date {
    font-size: clamp(1.7rem, 2.9vw, 2.6rem);
    white-space: nowrap;
  }
  .hx-hero-go {
    gap: 10px;
  }
  .hx-hero .hx-deadline-time {
    font-size: 0.9rem;
  }
  .hx-hero .hu-ctas .hux-btn-lg {
    height: 46px;
    padding: 0 22px;
    font-size: 0.9rem;
  }
}

/* =====================================================================
   tablets
   ===================================================================== */
@media (max-width: 860px) {
  .page-highup {
    --hx-skew: -7deg;
  }
  .hx-hero-panel {
    aspect-ratio: 16 / 9;
  }
  .page-highup .hux-why-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .page-highup .hux-why-media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .page-highup .hux-why-list {
    padding-left: 2%;
  }
  .page-highup .hux-speaker-grid {
    gap: 22px 14px;
  }
  .hx-num {
    font-size: clamp(5.5rem, 22vw, 9rem);
  }
}

/* =====================================================================
   phones: the poster stacks. The photo panel keeps its slant, the
   date slab and the button drop under it in flow, the tilts ease
   off so the stacked words stay inside the screen, and the menu
   becomes the Persona stack: giant tilted words sliding in from the
   right one after another
   ===================================================================== */
@media (max-width: 700px) {
  .page-highup {
    --hx-skew: -6deg;
    --hx-cut: 10px;
  }
  .hx-hero {
    padding-top: 74px;
    padding-bottom: 18px;
  }
  .hx-wordmark {
    --hu-mark-w: min(21rem, 88vw);
    margin-top: 16px;
  }
  .hx-hero-meta {
    margin-top: 14px;
    font-size: 0.62rem;
  }
  .hx-hero-frame {
    margin-top: 20px;
  }
  .hx-hero-panel {
    aspect-ratio: 4 / 3;
  }
  .hx-hero-band {
    position: static;
    flex-direction: column;
    align-items: stretch;
    margin-top: 14px;
    gap: 14px;
  }
  .hx-hero-go {
    align-items: stretch;
  }
  .hx-deadline {
    align-items: flex-start;
  }
  .hx-deadline-label {
    transform-origin: left bottom;
  }
  .hx-deadline-time {
    width: 100%;
    font-size: 1.1rem;
  }
  .hx-cd {
    flex: 1 1 0;
    min-width: 0;
  }
  .hx-deadline.is-closed .hx-deadline-time {
    width: auto;
    transform-origin: left bottom;
  }
  .hx-stamp {
    align-items: flex-start;
  }
  .hx-stamp-date {
    font-size: clamp(1.7rem, 9vw, 2.3rem);
  }
  .page-highup .hu-ctas {
    justify-content: stretch;
    flex-direction: column;
  }
  .page-highup .hu-ctas .hux-btn {
    width: 100%;
    height: 52px;
    min-width: 0;
    padding: 0 20px;
    font-size: 0.95rem;
  }
  .hu-presented {
    margin-top: 26px;
  }
  /* the blades parallax is a pointer thing; the front slivers still
     sit over the panel */
  .hx-hero-blades {
    transform: none;
  }
  .hx-hero-front {
    display: none;
  }

  .hx-head {
    padding-top: 22px;
  }
  .hx-num {
    font-size: clamp(4.6rem, 26vw, 7rem);
    top: -0.2em;
  }
  .page-highup h2.statement,
  .page-highup .hx-title {
    font-size: clamp(2rem, 9.6vw, 2.8rem);
  }
  .hx-lines > span:nth-child(2) {
    margin-left: 0.3em;
  }
  .hx-lines > span:nth-child(3) {
    margin-left: 0.12em;
  }
  .hx-film-tab {
    font-size: 9px;
    padding: 6px 18px 6px 10px;
  }
  .hux-film-ctl {
    padding: 12px 22px 14px;
  }
  .hux-mission {
    padding-top: 40px;
  }
  .hux-mission-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .hx-media {
    order: -1;
    margin: 0 4% 12px 0;
  }
  .hux-mission-photo {
    aspect-ratio: 16 / 11;
  }
  .hux-mission-title {
    font-size: clamp(1.75rem, 8.6vw, 2.5rem);
  }
  .hux-mission-sub {
    margin-left: 0;
  }
  .page-highup .hux-why-item {
    --hx-r: -2deg;
    --hx-x: 0;
  }
  .page-highup .hux-why-item:nth-child(2) {
    --hx-r: -1deg;
    --hx-x: 3%;
  }
  .page-highup .hux-why-item:nth-child(3) {
    --hx-r: -2.5deg;
    --hx-x: 1%;
  }
  .page-highup .hux-why-item:nth-child(4) {
    --hx-r: -1.5deg;
    --hx-x: 4%;
  }
  .page-highup .hux-why-item h3 {
    font-size: clamp(1.3rem, 6.4vw, 1.7rem);
  }
  .page-highup .hux-why-head::before,
  .page-highup .hux-why-head::after {
    left: -8%;
    right: -18%;
  }
  .page-highup .hux-why-head::after {
    right: -24%;
  }
  .page-highup .hux-why-item p {
    font-size: 0.92rem;
  }
  .page-highup .hux-speaker figcaption strong {
    font-size: 0.92rem;
  }
  .page-highup .hux-ag-open {
    grid-template-columns: 1fr;
    row-gap: 4px;
    padding: 12px 10px 12px 8px;
  }
  .page-highup .hux-ag-dayhead h3 {
    font-size: clamp(1.7rem, 8vw, 2.2rem);
  }
  .page-highup .hux-register-card {
    clip-path: polygon(0 0, 100% 3%, 100% 100%, 0 97%);
    padding-top: 48px;
    padding-bottom: 160px;
  }
  .page-highup .hux-register h2 {
    font-size: clamp(2rem, 9.4vw, 2.6rem);
  }
  .page-highup .hux-register-copy {
    max-width: 100%;
  }

  /* the phone menu: the Persona stack */
  .page-highup .hux-nav.open {
    background: rgba(var(--hx-ink-rgb), 0.9);
  }
  .page-highup .hux-nav.open .hux-nav-links {
    padding: 100px 22px calc(28px + env(safe-area-inset-bottom)) 26px;
    gap: 0;
    align-items: flex-start;
    text-transform: uppercase;
    animation: none;
  }
  .page-highup .hux-nav.open .hux-nav-links a {
    --hx-r: -5deg;
    --hx-x: 0;
    --hx-i: 0;
    width: auto;
    max-width: 92%;
    padding: 6px 16px 6px 12px;
    margin: -3px 0;
    font-size: clamp(2.1rem, 10.5vw, 2.9rem);
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--hx-sand);
    transform: rotate(var(--hx-r)) translateX(var(--hx-x)) skewX(-6deg);
    transform-origin: left center;
  }
  .page-highup .hux-nav.open .hux-nav-links a:nth-child(2) {
    --hx-r: -2deg;
    --hx-x: 12%;
    --hx-i: 1;
  }
  .page-highup .hux-nav.open .hux-nav-links a:nth-child(3) {
    --hx-r: -6deg;
    --hx-x: 4%;
    --hx-i: 2;
  }
  .page-highup .hux-nav.open .hux-nav-links a:nth-child(4) {
    --hx-r: -3deg;
    --hx-x: 16%;
    --hx-i: 3;
  }
  .page-highup .hux-nav.open .hux-nav-links a:nth-child(5) {
    --hx-r: -4.5deg;
    --hx-x: 7%;
    --hx-i: 4;
  }
  .page-highup .hux-nav.open .hux-nav-links a:nth-child(6) {
    --hx-r: -2.5deg;
    --hx-x: 3%;
    --hx-i: 5;
  }
  .page-highup .hux-nav.open .hux-nav-links a {
    padding: 6px 22px 6px 16px;
  }
  .page-highup .hux-nav.open .hux-nav-links a:hover,
  .page-highup .hux-nav.open .hux-nav-links a:focus-visible {
    color: var(--hx-paper);
    background: rgba(var(--hx-paper-rgb), 0.12);
  }
  .page-highup .hux-nav.open .hux-nav-links a[aria-current="page"] {
    color: var(--hx-ink);
    background: var(--hx-paper);
  }
  .page-highup .hux-nav.open .hux-nav-links .hux-nav-register {
    --hx-i: 6;
    width: 100%;
    max-width: none;
    margin-top: auto;
    padding: 17px 22px;
    border-radius: 0;
    background: var(--hx-orange);
    color: var(--hx-ink);
    font-family: var(--display);
    font-size: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transform: none;
    clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  }
  @media (prefers-reduced-motion: no-preference) {
    .page-highup .hux-nav.open .hux-nav-links a {
      animation: hx-menu-in 0.55s var(--hx-snap) both;
      animation-delay: calc(var(--hx-i) * 55ms);
    }
  }
}
@keyframes hx-menu-in {
  from {
    opacity: 0;
    translate: 70px 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* =====================================================================
   a short landscape viewport (a phone on its side): the hero can't
   afford a full screen of poster, so it packs
   ===================================================================== */
@media (max-height: 560px) and (orientation: landscape) {
  .hx-hero {
    min-height: 0;
    padding-top: 70px;
  }
  .hx-wordmark {
    --hu-mark-w: min(24rem, 40vw);
    margin-top: 8px;
  }
  .hx-hero-meta {
    margin-top: 8px;
  }
  .hx-hero-frame {
    margin-top: 14px;
  }
  .hx-hero-panel {
    aspect-ratio: 21 / 6;
  }
  .hx-stamp-date {
    font-size: 1.7rem;
  }
  .hu-presented {
    margin-top: 18px;
  }
}

/* =====================================================================
   reduced motion: every transition and animation this file adds is
   off, the final frame is the only frame
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .page-highup .hux-btn,
  .page-highup .hux-btn::before,
  .page-highup .hux-nav-links a,
  .page-highup .hux-nav-links a::before,
  .page-highup .hux-why-head::before,
  .page-highup .hux-why-head::after,
  .page-highup .hux-why-media .hux-why-pane.is-active,
  .page-highup .hux-why-item h3 button,
  .page-highup .hux-why-item p,
  .page-highup .hux-speaker img,
  .page-highup .hux-speaker figcaption strong::after,
  .page-highup .hux-ag-open::before,
  .page-highup .hux-sps-card,
  .page-highup .hux-sps-card::before,
  .page-highup .faq-aside-link,
  .hx-hero-blades,
  .hx-hero-front {
    transition: none;
    animation: none;
  }
  /* the hover sweeps (::before) keep their parked transform: with it
     reset they sit over the label in the label's own colour, and every
     button reads as a blank slab. Only the elements themselves lose
     their motion transforms. */
  .page-highup .hux-btn,
  .page-highup .hux-nav-links a,
  .page-highup .hux-why-media .hux-why-pane.is-active,
  .page-highup .hux-why-item h3 button,
  .page-highup .hux-why-item p,
  .page-highup .hux-speaker img,
  .page-highup .hux-speaker figcaption strong::after,
  .page-highup .hux-sps-card,
  .page-highup .faq-aside-link,
  .hx-hero-blades,
  .hx-hero-front {
    transform: none;
  }
  .page-highup .hux-why-head::before,
  .page-highup .hux-why-head::after {
    transform: scaleX(0);
  }
  .page-highup .hux-why-item.is-active .hux-why-head::before,
  .page-highup .hux-why-item.is-active .hux-why-head::after {
    transform: scaleX(1);
  }
}

/* =====================================================================
   the sub-pages: their own sections keep their layouts, but the voice
   is the overview's. Banner titles, group and chapter heads and the
   form titles go uppercase and slanted with the orange echo; the
   banner kicker wears the blade. On the agenda page the track chip
   wraps under the time inside its column instead of running into the
   title.
   ===================================================================== */
.page-highup .hux-sp-title,
.page-highup .hux-sps-groupname,
.page-highup .hux-vol-introtitle,
.page-highup .hux-vol-h,
.page-highup .hux-reg-title {
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.92;
  transform: skewX(var(--hx-skew));
  text-shadow: 0.045em 0.06em 0 rgba(var(--hx-orange-rgb), 0.92);
}
.page-highup .hux-sp-title {
  transform-origin: center bottom;
  margin-top: 16px;
}
.page-highup .hux-sps-groupname,
.page-highup .hux-vol-introtitle,
.page-highup .hux-vol-h,
.page-highup .hux-reg-title {
  transform-origin: left bottom;
}
.page-highup .hux-vol-h {
  font-size: 1.5rem;
}
.page-highup .hux-vol-h .mono {
  color: var(--hx-orange);
  vertical-align: 4px;
}
.page-highup .hux-sp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--hx-orange);
  letter-spacing: 0.2em;
}
.page-highup .hux-sp-kicker::before {
  content: "";
  width: 26px;
  height: 9px;
  background: var(--hx-orange);
  clip-path: polygon(0 50%, 100% 0, 78% 100%);
}
.page-highup .hux-ag-time {
  flex-wrap: wrap;
  row-gap: 4px;
}
.page-highup .hux-ag-chip {
  margin-left: 0;
  border-radius: 0;
  padding: 2px 8px;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

/* =====================================================================
   no square boxes anywhere on the event pages. The same two cuts the
   overview uses reach the sub-pages: every card, meter, badge and pill
   is a blade (slanted sides, no frame, the fill does the work), every
   photo is the same slanted-side cut, and the two tall form panels
   slant their top and bottom edges instead, the register band's move.
   ===================================================================== */

/* ---- partners page: the funding meter ---- */
.page-highup .hux-fund-meter {
  border: 0;
  border-radius: 0;
  background: var(--hx-bark);
  clip-path: var(--hx-shape-box);
  padding-inline: calc(clamp(18px, 3vw, 30px) + var(--hx-box) / 2);
}
.page-highup .hux-fund-bar,
.page-highup .hux-fund-fill {
  border-radius: 0;
}
.page-highup .hux-fund-bar {
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
  box-shadow: none;
}

/* ---- volunteer page: the facts strip, the role cards, the mentors ---- */
.page-highup .hux-vol-facts {
  border-color: rgba(var(--hx-sand-rgb), 0.16);
}
.page-highup .hux-vol-factlist li + li {
  border-left: 0;
  position: relative;
}
.page-highup .hux-vol-factlist li + li::before {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 0;
  width: 1px;
  background: rgba(var(--hx-sand-rgb), 0.28);
  transform: skewX(var(--hx-skew));
}
.page-highup .hux-vol-factlist strong {
  transform: skewX(var(--hx-skew));
  transform-origin: left bottom;
  text-shadow: 0.045em 0.06em 0 rgba(var(--hx-orange-rgb), 0.92);
}
.page-highup .hux-vol-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.page-highup .hux-vol-photo {
  border: 0;
  background: var(--hx-bark);
  clip-path: var(--hx-shape);
}
.page-highup .hux-vol-body {
  padding-inline: 6px;
}
.page-highup .hux-vol-card h3 {
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  transform: skewX(var(--hx-skew));
  transform-origin: left bottom;
}
.page-highup .hux-vol-time {
  border-color: rgba(var(--hx-sand-rgb), 0.2);
}
.page-highup .hux-vol-note {
  border-left: 0;
  padding-left: 22px;
  position: relative;
}
.page-highup .hux-vol-note::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: 3px;
  background: var(--hx-orange);
  transform: skewX(var(--hx-skew));
}

/* ---- the forms (/register/, /volunteer/form/, /volunteer/status/) ---- */
.page-highup .hux-reg-banner {
  border: 0;
  border-radius: 0;
  background: var(--hx-bark);
  clip-path: var(--hx-shape);
}
.page-highup .hux-reg-banner::after {
  background: linear-gradient(
    to bottom,
    rgba(var(--hx-ink-rgb), 0),
    rgba(var(--hx-ink-rgb), 0.6)
  );
}
.page-highup .hux-reg-lede {
  border-left: 2px solid var(--hx-orange);
  padding-left: 16px;
}
.page-highup .hux-reg-when {
  color: var(--hx-sand);
}
.page-highup .hux-reg-deadline {
  color: var(--hx-orange);
}
/* the tall panels: slanted top and bottom edges, the fill is the frame */
.page-highup .hux-reg-card,
.page-highup .hux-reg-panel {
  border: 0;
  border-radius: 0;
  background: var(--hx-bark);
  clip-path: var(--hx-shape-lean);
  padding-top: var(--hx-lean);
  padding-bottom: var(--hx-lean);
}
.page-highup .hux-reg-panel.hux-reg-done {
  padding-top: calc(var(--hx-lean) + clamp(28px, 5vh, 44px));
  padding-bottom: calc(var(--hx-lean) + clamp(28px, 5vh, 44px));
}
.page-highup .hux-reg-selectnote,
.page-highup .hux-reg-sec + .hux-reg-sec {
  border-color: rgba(var(--hx-sand-rgb), 0.14);
}
.page-highup .hux-reg-secname {
  text-transform: uppercase;
  letter-spacing: -0.02em;
  transform: skewX(var(--hx-skew));
  transform-origin: left bottom;
}
.page-highup .hux-reg-secnum {
  color: var(--hx-orange);
}
/* fields: no frame, a slanted slab of lighter ground; focus and error
   ride an inset ring, since a clipped box shows no outline */
.page-highup .hux-reg-field input,
.page-highup .hux-reg-field textarea,
.page-highup .hux-reg-dobrow input {
  border: 0;
  border-radius: 0;
  background: rgba(var(--hx-paper-rgb), 0.07);
  padding: 11px 16px;
  transition: box-shadow 0.2s var(--hx-snap), background 0.2s var(--hx-snap);
}
.page-highup .hux-reg-field input:focus-visible,
.page-highup .hux-reg-field textarea:focus-visible,
.page-highup .hux-reg-dobrow input:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--hx-sand);
  background: rgba(var(--hx-paper-rgb), 0.1);
}
.page-highup .hux-reg-field input.is-bad,
.page-highup .hux-reg-field textarea.is-bad,
.page-highup .hux-reg-dobrow input.is-bad {
  box-shadow: inset 0 0 0 2px var(--danger);
  background: rgba(240, 133, 123, 0.09);
}
.page-highup .hux-reg-field > span,
.page-highup .hux-reg-blocklabel {
  color: var(--hx-sand);
}
.page-highup .hux-reg-opt {
  border: 0;
  border-radius: 0;
  background: rgba(var(--hx-paper-rgb), 0.1);
  color: var(--txt-soft);
  padding: 3px 9px 2px;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
/* the segmented rows (create account / sign in) and the pills */
.page-highup .hux-reg-authtabs,
.page-highup .hux-reg-pills button,
.page-highup .hux-reg-linkadd,
.page-highup .hux-reg-linkrm,
.page-highup .hux-reg-rankctl button,
.page-highup .hux-reg-rankitem,
.page-highup .hux-reg-track,
.page-highup .hux-reg-usecard,
.page-highup .hux-status-badge {
  border: 0;
  border-radius: 0;
}
.page-highup .hux-reg-authtabs {
  background: rgba(var(--hx-paper-rgb), 0.07);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.page-highup .hux-reg-authtabs button {
  border-radius: 0;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.page-highup .hux-reg-authtabs button[aria-pressed="true"] {
  background: var(--hx-paper);
  color: var(--hx-ink);
}
.page-highup .hux-reg-pills button {
  background: rgba(var(--hx-paper-rgb), 0.07);
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  padding: 10px 20px;
  transition:
    background 0.2s var(--hx-snap),
    color 0.2s var(--hx-snap),
    box-shadow 0.2s var(--hx-snap);
}
.page-highup .hux-reg-pills button:hover {
  color: var(--hx-paper);
  background: rgba(var(--hx-paper-rgb), 0.12);
}
.page-highup .hux-reg-pills button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--hx-sand);
}
.page-highup .hux-reg-pills button[aria-pressed="true"] {
  background: var(--hx-paper);
  color: var(--hx-ink);
}
.page-highup .hux-reg-track {
  background: rgba(var(--hx-paper-rgb), 0.05);
  clip-path: var(--hx-shape-box);
  padding: 20px calc(18px + var(--hx-box) / 2);
  transition:
    background 0.2s var(--hx-snap),
    box-shadow 0.2s var(--hx-snap),
    transform 0.2s var(--hx-snap);
}
.page-highup .hux-reg-track:hover {
  background: rgba(var(--hx-paper-rgb), 0.09);
}
.page-highup .hux-reg-track.is-on {
  background: var(--hx-orange);
  color: rgba(var(--hx-ink-rgb), 0.82);
}
.page-highup .hux-reg-track.is-on .hux-reg-trackname {
  color: var(--hx-ink);
}
.page-highup .hux-reg-track:focus-visible {
  outline: none;
  background: rgba(var(--hx-paper-rgb), 0.14);
}
.page-highup .hux-reg-track.is-on:focus-visible {
  background: var(--hx-sand);
}
.page-highup .hux-reg-trackname {
  text-transform: uppercase;
  letter-spacing: -0.02em;
  transform: skewX(var(--hx-skew));
  transform-origin: left bottom;
}
.page-highup .hux-reg-rankitem {
  background: rgba(var(--hx-paper-rgb), 0.06);
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  padding: 11px 22px;
}
.page-highup .hux-reg-rankitem.is-dragging {
  background: rgba(var(--hx-orange-rgb), 0.3);
}
.page-highup .hux-reg-rankctl button,
.page-highup .hux-reg-linkrm {
  background: rgba(var(--hx-paper-rgb), 0.07);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.page-highup .hux-reg-rankctl button:not(:disabled):hover,
.page-highup .hux-reg-linkrm:hover {
  color: var(--hx-paper);
  background: rgba(var(--hx-paper-rgb), 0.14);
}
.page-highup .hux-reg-rankctl button:focus-visible,
.page-highup .hux-reg-linkrm:focus-visible,
.page-highup .hux-reg-linkadd:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--hx-sand);
}
.page-highup .hux-reg-linkadd {
  background: repeating-linear-gradient(
    -45deg,
    rgba(var(--hx-sand-rgb), 0.08) 0 8px,
    transparent 8px 16px
  );
  color: var(--hx-sand);
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  padding: 0 20px;
}
.page-highup .hux-reg-linkadd:hover {
  color: var(--hx-paper);
}
.page-highup .hux-reg-usecard {
  background: rgba(var(--hx-paper-rgb), 0.05);
  clip-path: var(--hx-shape-box);
}
.page-highup .hux-status-badge {
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  background: rgba(var(--hx-orange-rgb), 0.18);
  color: var(--hx-sand);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.page-highup .hux-status[data-status="selected"] .hux-status-badge {
  background: rgba(74, 222, 128, 0.14);
}
.page-highup .hux-status[data-status="declined"] .hux-status-badge {
  background: rgba(var(--hx-paper-rgb), 0.08);
}
.page-highup .hux-status-h {
  text-transform: uppercase;
  letter-spacing: -0.02em;
  transform: skewX(var(--hx-skew));
  transform-origin: left bottom;
}
/* the solver's answer: the error on the left of a foot row under the
   box, the live count on the right */
.page-highup .hux-reg-ffoot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.page-highup .hux-reg-ffoot .hux-reg-ferr {
  flex: 1 1 auto;
  min-width: 0;
}
.page-highup .hux-reg-count {
  flex: 0 0 auto;
  margin: 6px 0 0 auto;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--txt-dim);
}
.page-highup .hux-reg-count.is-near {
  color: var(--hx-sand);
}
.page-highup .hux-reg-count.is-full {
  color: var(--danger);
}
/* the two Codes of Conduct over Submit: one slab per code, each wearing
   a tag that says what it covers, the whole slab the tap target */
.page-highup .hux-reg-codes {
  width: 100%;
  margin-bottom: 8px;
}
.page-highup .hux-reg-codes.is-locked input {
  opacity: 0.5;
}
.page-highup .hux-reg-codelist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.page-highup .hux-reg-code .hux-reg-check {
  min-height: 44px;
  margin: 0;
  padding: 13px 22px 13px 18px;
  background: rgba(var(--hx-paper-rgb), 0.06);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  color: var(--txt-soft);
  line-height: 1.45;
  transition:
    background 0.2s var(--hx-snap),
    box-shadow 0.2s var(--hx-snap);
}
.page-highup .hux-reg-code .hux-reg-check:hover {
  background: rgba(var(--hx-paper-rgb), 0.1);
}
.page-highup .hux-reg-code .hux-reg-check:has(input:checked) {
  background: rgba(var(--hx-orange-rgb), 0.16);
}
.page-highup .hux-reg-code .hux-reg-check:has(input:focus-visible) {
  box-shadow: inset 0 0 0 2px var(--hx-sand);
}
.page-highup .hux-reg-code .hux-reg-check:has(input.is-bad) {
  box-shadow: inset 0 0 0 2px var(--danger);
  background: rgba(240, 133, 123, 0.09);
}
.page-highup .hux-reg-code .hux-reg-check input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--hx-orange);
}
.page-highup .hux-reg-code .hux-reg-check input:focus-visible {
  outline: none;
}
.page-highup .hux-reg-code .hux-reg-check a {
  color: var(--hx-paper);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}
.page-highup .hux-reg-codetag {
  display: block;
  margin-bottom: 3px;
  color: var(--hx-sand);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.page-highup .hux-reg-code .hux-reg-ferr:not(:empty) {
  padding-left: 18px;
}
@media (prefers-reduced-motion: reduce) {
  .page-highup .hux-reg-code .hux-reg-check {
    transition: none;
  }
}
/* phones: the form runs edge to edge (pages.css); the slanted top and
   bottom edges stay, the side slant on the banner goes so the photo
   fills the screen */
@media (max-width: 700px) {
  .page-highup .hux-reg-banner {
    clip-path: none;
  }
  .page-highup .hux-reg-track {
    clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  }
}

/* =====================================================================
   the sliding selector (highup.js initCursors): one blade per group,
   absolutely placed by the script, sliding between items on a spring
   and morphing its cut as it goes (every cut is a five-point polygon).
   The container is its positioning box; the items stack above it.
   Each group wears a different blade: the header's cycles the five
   cuts link by link, the why-attend one is the big white blade with
   its orange twin, the agenda's a full-row slab, the FAQ's a slab
   with a left tip. Focus moves it too.
   ===================================================================== */
.hx-has-cursor {
  position: relative;
}
.hx-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  rotate: var(--hx-cr, 0deg);
  transform-origin: left center;
  transition:
    transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1),
    width 0.42s var(--hx-snap),
    height 0.42s var(--hx-snap),
    rotate 0.5s var(--hx-snap),
    opacity 0.22s linear;
}
.hx-cursor.is-on {
  opacity: 1;
}
.hx-cursor::before,
.hx-cursor::after {
  content: "";
  position: absolute;
  inset: 0;
  transition: clip-path 0.5s var(--hx-snap);
}
.hx-cursor::after {
  display: none;
}
/* the agenda: a slab the width of the row, ends cut, a tip on the left */
.hux-ag-list .hx-cursor::before {
  inset: 3px -6px 3px -14px;
  background: var(--hx-orange);
  clip-path: polygon(0 50%, 2.5% 0, 100% 0, 98% 100%, 2.5% 100%);
}
@media (prefers-reduced-motion: reduce) {
  .hx-cursor,
  .hx-cursor::before,
  .hx-cursor::after {
    transition: none;
    animation: none;
  }
}

/* =====================================================================
   the FAQ page in the dress: every question is its own bark slab in a
   stack (the Persona list), a shade lighter under the pointer, and
   the open one flips to paper with the answer in ink beside an orange
   rule. The category tag rides the question in sand.
   ===================================================================== */
.page-highup .hux-faq-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}
.page-highup .faq-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.page-highup .faq-item {
  border: 0;
  background: var(--hx-bark);
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  transition: background 0.22s var(--hx-snap);
}
.page-highup .faq-item:hover {
  background: var(--hx-bark-2);
}
.page-highup .faq-item[open] {
  background: var(--hx-paper);
  color: var(--hx-ink);
}
.page-highup .faq-q {
  padding: 18px 28px 18px 30px;
  font-size: clamp(0.98rem, 1.8vw, 1.15rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--hx-paper);
  transition: color 0.22s var(--hx-snap);
}
.page-highup .faq-q:hover,
.page-highup .faq-q:focus-visible {
  color: var(--hx-paper);
}
.page-highup .faq-q:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--hx-sand);
}
.page-highup .hux-faq-qtext {
  transform: skewX(var(--hx-skew));
  transform-origin: left bottom;
}
.page-highup .hux-faq-tag {
  color: var(--hx-sand);
}
.page-highup .faq-item[open] .faq-q,
.page-highup .faq-item[open] .faq-q:hover,
.page-highup .faq-item[open] .faq-q:focus-visible {
  color: var(--hx-ink);
}
.page-highup .faq-item[open] .hux-faq-tag,
.page-highup .faq-item[open] .faq-q:hover .hux-faq-tag {
  color: var(--hx-orange-deep);
}
.page-highup .faq-item[open] .faq-icon::before,
.page-highup .faq-item[open] .faq-q:hover .faq-icon::before {
  border-color: var(--hx-ink);
}
.page-highup .faq-a {
  margin: 0 28px 0 30px;
  padding: 0 30px 26px 0;
  border: 0;
  color: var(--txt-soft);
}
.page-highup .faq-item[open] .faq-a {
  color: #4a3a30;
}
.page-highup .faq-item[open] .faq-a a {
  color: var(--hx-ink);
}
.page-highup .hux-faq-still {
  border-top-color: rgba(var(--hx-sand-rgb), 0.16);
}
.page-highup .hux-faq-still h2 {
  text-transform: uppercase;
  letter-spacing: -0.03em;
  transform: skewX(var(--hx-skew));
  transform-origin: left bottom;
  text-shadow: 0.045em 0.06em 0 rgba(var(--hx-orange-rgb), 0.92);
}

/* =====================================================================
   the blade layers under the sections (data-hx-drift + .hx-deco): a
   few shapes near the edges, leaning against the pointer by their own
   depth (data-d, read into --d by the stylesheet's attr()), never over
   the copy. The section clips them; its content stacks above.
   ===================================================================== */
.page-highup [data-hx-drift]:not(.hx-hero) {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.page-highup [data-hx-drift]:not(.hx-hero) > .wrap {
  position: relative;
  z-index: 1;
}
.hx-deco {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}
.hx-deco polygon {
  --d: 20;
  transform-box: fill-box;
  transform-origin: center;
  transform: translate(
    calc(var(--hx-px) * var(--d) * 0.5px),
    calc(var(--hx-py) * var(--d) * 0.35px)
  );
  transition: transform 0.9s var(--hx-snap);
  stroke: rgba(var(--hx-sand-rgb), 0.4);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.hx-deco polygon[data-d="18"] { --d: 18; }
.hx-deco polygon[data-d="-30"] { --d: -30; }
.hx-deco polygon[data-d="-24"] { --d: -24; }
.hx-deco polygon[data-d="16"] { --d: 16; }
.hx-deco polygon[data-d="34"] { --d: 34; }
.hx-deco polygon[data-d="-20"] { --d: -20; }
.hx-deco polygon[data-d="28"] { --d: 28; }
.hx-deco polygon[data-d="22"] { --d: 22; }
.hx-deco polygon[data-d="-36"] { --d: -36; }
.hx-deco polygon[data-d="-18"] { --d: -18; }
.hx-deco polygon[data-d="26"] { --d: 26; }
.hx-deco polygon[data-d="-22"] { --d: -22; }
.hx-deco polygon[data-d="30"] { --d: 30; }
.hx-deco .hx-b-orange {
  fill: rgba(var(--hx-orange-rgb), 0.82);
}
.hx-deco .hx-b-sand {
  fill: rgba(var(--hx-sand-rgb), 0.7);
}
/* the register band and the partner card sit on their own wraps; the
   why-attend cursor blade may reach past the wrap on the right, so
   that section's wrap is not the clip */
@media (max-width: 700px) {
  .hx-deco {
    display: none;
  }
  .hx-claims {
    gap: 6px 4px;
    padding: 0 8px;
  }
  .hx-claim {
    padding: 6px 14px 5px 11px;
  }
  .hx-claim strong {
    font-size: 1rem;
  }
  .hx-official {
    font-size: 0.62rem;
    padding: 6px 14px 6px 11px;
  }
  .hx-hero-venue {
    font-size: 0.6rem;
  }
  .hx-free {
    top: -12px;
    right: 6%;
    padding: 8px 16px 7px;
    font-size: 1rem;
  }
  .page-highup .faq-q {
    padding: 16px 18px 16px 20px;
  }
  .page-highup .faq-a {
    margin: 0 18px 0 20px;
    padding: 0 10px 20px 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hx-official,
  .hx-free {
    animation: none;
  }
  .hx-deco polygon {
    transition: none;
    transform: none;
  }
}
/* the volunteer page's why wheel: its section clips the selector's
   tail like the overview's does, so the blade never widens the page */
.page-highup .hux-vol-why {
  position: relative;
  overflow: clip;
}

/* =====================================================================
   the volunteer page, styled: the intro title on its ghost numeral, the
   facts as tilted slabs, the three roles as poster cards (the photo
   fills the card, the words ride a scrim at its foot, the role as an
   orange tag on the shoulder, each card leaning its own way and
   straightening under the pointer), the chapter heads on ghost
   numerals of their own
   ===================================================================== */
.page-highup .hux-vol-intro {
  padding-top: clamp(48px, 8vh, 88px);
}
.page-highup .hux-vol-introgrid {
  align-items: end;
}
.page-highup .hux-vol-introtitle {
  position: relative;
  isolation: isolate;
  font-size: clamp(2.1rem, 4.8vw, 4.2rem);
}
.page-highup .hux-vol-lede {
  border-left: 2px solid var(--hx-orange);
  padding-left: 18px;
  font-size: 1.05rem;
}
.page-highup .hux-vol-fine {
  color: var(--hx-sand);
}
/* the facts: slabs, not a strip */
.page-highup .hux-vol-facts {
  border: 0;
  padding: clamp(10px, 2vh, 20px) 0 clamp(20px, 3vh, 34px);
}
.page-highup .hux-vol-factlist {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 10px;
}
.page-highup .hux-vol-factlist li {
  --hx-r: -2.5deg;
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
  padding: 10px 22px 9px 16px;
  background: var(--hx-bark);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transform: rotate(var(--hx-r));
}
.page-highup .hux-vol-factlist li:nth-child(2) {
  --hx-r: 2deg;
  background: var(--hx-sand);
  color: var(--hx-ink);
  translate: 0 4px;
}
.page-highup .hux-vol-factlist li:nth-child(3) {
  --hx-r: -1.5deg;
  background: var(--hx-orange);
  color: var(--hx-ink);
  translate: 0 -3px;
}
.page-highup .hux-vol-factlist li:nth-child(4) {
  --hx-r: 1.5deg;
  translate: 0 2px;
}
.page-highup .hux-vol-factlist li + li::before {
  display: none;
}
.page-highup .hux-vol-factlist strong {
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  color: inherit;
  text-shadow: none;
}
.page-highup .hux-vol-factlist .mono {
  color: inherit;
  opacity: 0.85;
}
/* chapter heads on ghost numerals */
.page-highup .hux-vol-h {
  position: relative;
  isolation: isolate;
  padding: clamp(26px, 4vh, 44px) 0 14px;
  margin-bottom: clamp(18px, 3vh, 28px);
  border-bottom-color: rgba(var(--hx-sand-rgb), 0.16);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
}
.page-highup .hux-vol-h .mono {
  position: absolute;
  z-index: -1;
  left: -0.06em;
  top: -0.08em;
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(5rem, 12vw, 9rem);
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--hx-sand-rgb), 0.28);
  vertical-align: baseline;
  pointer-events: none;
  user-select: none;
}
/* the poster cards */
.page-highup .hux-vol-grid {
  gap: 18px;
}
.page-highup .hux-vol-card {
  --hx-r: -1.4deg;
  position: relative;
  isolation: isolate;
  min-height: clamp(440px, 46vw, 560px);
  justify-content: flex-end;
  background: var(--hx-bark);
  clip-path: var(--hx-shape);
  overflow: hidden;
  transform: rotate(var(--hx-r));
  transition: transform 0.45s var(--hx-snap);
}
.page-highup .hux-vol-card:nth-child(2) {
  --hx-r: 1deg;
  translate: 0 12px;
}
.page-highup .hux-vol-card:nth-child(3) {
  --hx-r: -0.8deg;
}
.page-highup .hux-vol-card:hover,
.page-highup .hux-vol-card:focus-within {
  transform: rotate(0deg);
}
.page-highup .hux-vol-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  aspect-ratio: auto;
  clip-path: none;
  background: var(--hx-bark);
}
.page-highup .hux-vol-photo img {
  filter: saturate(0.7) brightness(0.9);
  transition:
    transform 0.7s var(--hx-snap),
    filter 0.5s var(--hx-snap);
}
.page-highup .hux-vol-card:hover .hux-vol-photo img,
.page-highup .hux-vol-card:focus-within .hux-vol-photo img {
  transform: scale(1.04);
  filter: none;
}
.page-highup .hux-vol-body {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  gap: 10px;
  padding: 120px clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 30px)
    calc(clamp(20px, 2.4vw, 28px) + var(--hx-slant) / 2);
  background: linear-gradient(
    180deg,
    rgba(var(--hx-ink-rgb), 0) 0%,
    rgba(var(--hx-ink-rgb), 0.82) 34%,
    rgba(var(--hx-ink-rgb), 0.96) 100%
  );
}
.page-highup .hux-vol-card .hux-vol-kicker {
  position: static;
  transform: none;
  align-self: flex-start;
  padding: 6px 14px 5px 10px;
  background: var(--hx-orange);
  color: var(--hx-ink);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  font-size: 0.62rem;
}
.page-highup .hux-vol-card h3 {
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  color: var(--hx-paper);
}
.page-highup .hux-vol-card p:not(.mono) {
  color: rgba(var(--hx-paper-rgb), 0.82);
  font-size: 0.9rem;
}
.page-highup .hux-vol-time {
  color: var(--hx-sand);
}
.page-highup .hux-vol-go {
  border-top-color: rgba(var(--hx-sand-rgb), 0.3);
  color: var(--hx-paper);
}
.page-highup .hux-vol-card:hover .hux-vol-go,
.page-highup .hux-vol-card:focus-within .hux-vol-go {
  color: var(--hx-sand);
}
.page-highup .hux-vol-note {
  margin-top: clamp(30px, 5vh, 48px);
}
@media (max-width: 860px) {
  .page-highup .hux-vol-card {
    min-height: 420px;
  }
  .page-highup .hux-vol-card:nth-child(2) {
    translate: 0;
  }
}
@media (max-width: 700px) {
  .page-highup .hux-vol-card,
  .page-highup .hux-vol-card:nth-child(2),
  .page-highup .hux-vol-card:nth-child(3) {
    --hx-r: 0deg;
    min-height: 380px;
  }
  .page-highup .hux-vol-body {
    padding-top: 90px;
  }
  .hx-claims-band {
    margin-top: 28px;
  }
  .hx-stamp-loc {
    margin-left: 0;
    padding: 6px 14px 6px 10px;
  }
  .hx-stamp-where strong {
    font-size: 0.74rem;
  }
  .hx-free {
    font-size: 0.82rem;
    padding: 8px 14px 7px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-highup .hux-vol-card,
  .page-highup .hux-vol-photo img,
  .page-highup .faq-item {
    transition: none;
  }
}

/* =====================================================================
   the volunteer page's menu screen (.hux-vol-stage): the pause menu's
   anatomy. The picked role's photo fills the left under a scrim, the
   title, lede and fact slabs sit on it; the three roles stack on the
   right as huge tilted words in the three fills, the picked one on
   the white blade with its orange twin; the command panel bottom-right
   carries the pitch and the button; the counter rides the far edge
   turned on its side; the key hints close the panel.
   ===================================================================== */
.page-highup .hux-vol-stage {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: calc(var(--svh) * 100 - 62px);
  display: flex;
  align-items: center;
  padding: clamp(36px, 6vh, 72px) 0 clamp(56px, 8vh, 96px);
  background: var(--hx-ink);
}
.hux-vs-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hux-vs-shot {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  clip-path: polygon(0 0, 62% 0, 46% 100%, 0 100%);
  transition: opacity 0.55s var(--hx-snap);
}
.hux-vs-shot.is-active {
  opacity: 1;
}
.hux-vs-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.7) brightness(0.6);
}
.hux-vs-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(var(--hx-ink-rgb), 0.55) 0%,
      rgba(var(--hx-ink-rgb), 0.2) 35%,
      rgba(var(--hx-ink-rgb), 0.9) 100%
    ),
    linear-gradient(
      90deg,
      rgba(var(--hx-ink-rgb), 0.35) 0%,
      rgba(var(--hx-ink-rgb), 0) 30%,
      rgba(var(--hx-ink-rgb), 0.6) 55%,
      var(--hx-ink) 64%
    );
}
/* a sand hairline along the photo's cut, the menu's frame */
.hux-vs-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(var(--hx-sand-rgb), 0.45);
  clip-path: polygon(62% 0, calc(62% + 1px) 0, calc(46% + 1px) 100%, 46% 100%);
}
.hux-vs-count {
  position: absolute;
  z-index: -1;
  right: clamp(12px, 2.5vw, 40px);
  top: 50%;
  translate: 0 -50%;
  writing-mode: vertical-rl;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(7rem, 26vh, 14rem);
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--hx-sand-rgb), 0.22);
  pointer-events: none;
  user-select: none;
}
.hux-vs-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: clamp(22px, 4vh, 40px) clamp(24px, 4vw, 64px);
  align-items: center;
  width: 100%;
}
.hux-vs-copy {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
}
.page-highup .hux-vs-copy .hux-vol-introtitle {
  margin-top: 12px;
  font-size: clamp(2rem, 4.2vw, 3.7rem);
}
.page-highup .hux-vs-copy .hux-vol-lede {
  margin-top: 22px;
  max-width: 42ch;
  font-size: 1rem;
}
.page-highup .hux-vs-copy .hux-vol-factlist {
  margin-top: clamp(22px, 4vh, 36px);
}
/* the options: a stack of words, each leaning its own way and
   overlapping the next like the pause menu's */
.hux-vs-menu {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 0 0 8%;
}
.hux-vs-opt {
  --hx-r: -4deg;
  --hx-x: 0;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 0 0 0 var(--hx-x);
  padding: 8px 0.7em 10px 0.45em;
  border: 0;
  background: none;
  font: inherit;
  color: var(--hx-sand);
  text-align: left;
  cursor: pointer;
  transform: rotate(var(--hx-r));
  transform-origin: left center;
  transition: color 0.25s var(--hx-snap);
}
.hux-vs-opt + .hux-vs-opt {
  margin-top: -18px;
}
.hux-vs-opt:nth-child(2) {
  --hx-r: -1.5deg;
  --hx-x: -4%;
  color: var(--hx-paper);
}
.hux-vs-opt:nth-child(3) {
  --hx-r: -5deg;
  --hx-x: 12%;
  color: var(--hx-orange);
}
.hux-vs-word {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.6rem, 5.2vw, 4.8rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  transform: skewX(var(--hx-skew));
  transform-origin: left bottom;
}
.hux-vs-sub {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  opacity: 0;
  translate: -8px 0;
  transition:
    opacity 0.25s var(--hx-snap),
    translate 0.3s var(--hx-snap);
}
.hux-vs-opt.is-active .hux-vs-sub {
  opacity: 0.9;
  translate: 0 0;
}
.hux-vs-opt::before,
.hux-vs-opt::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -4%;
  bottom: -4%;
  left: -12%;
  right: -30%;
  background: var(--hx-paper);
  clip-path: polygon(0 50%, 9% 0, 72% 0, 100% 38%, 70% 100%, 9% 100%);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition:
    transform 0.42s var(--hx-snap),
    opacity 0.2s linear;
}
.hux-vs-opt::after {
  z-index: -2;
  right: -38%;
  top: -2%;
  bottom: -6%;
  background: var(--hx-orange);
  clip-path: polygon(0 50%, 9% 0, 66% 4%, 100% 44%, 62% 100%, 9% 100%);
}
.hux-vs-opt.is-active {
  color: var(--hx-ink);
  z-index: 2;
}
.hux-vs-opt.is-active::before,
.hux-vs-opt.is-active::after {
  transform: scaleX(1);
  opacity: 1;
}
.hux-vs-opt:not(.is-active):hover {
  color: var(--hx-paper);
}
.hux-vs-opt:focus-visible {
  outline: 2px solid var(--hx-sand);
  outline-offset: 6px;
}
@media (prefers-reduced-motion: no-preference) {
  .hux-vs-opt.is-active::after {
    animation: hx-pulse 1.3s ease-in-out infinite alternate;
  }
}
/* the role's copy, under the title, swapping with the pick */
.hux-vs-command {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  width: min(100%, 480px);
}
.hux-vs-panel h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
}
.hux-vs-role {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--hx-orange);
  letter-spacing: 0.2em;
}
.hux-vs-role::before {
  content: "";
  width: 26px;
  height: 9px;
  background: var(--hx-orange);
  clip-path: polygon(0 50%, 100% 0, 78% 100%);
}
.hux-vs-panel {
  padding-top: 0;
}
.hux-vs-panel h3 {
  margin-top: 12px;
}
.hux-vs-panel[hidden] {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hux-vs-panel.is-active {
    animation: hx-vs-in 0.4s var(--hx-snap);
  }
}
@keyframes hx-vs-in {
  from {
    opacity: 0;
    translate: 18px 0;
  }
}
.hux-vs-panel h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  transform: skewX(var(--hx-skew));
  transform-origin: left bottom;
  text-shadow: 0.045em 0.06em 0 rgba(var(--hx-orange-rgb), 0.92);
}
.hux-vs-panel p:not(.mono) {
  margin-top: 12px;
  color: var(--txt-soft);
  font-size: 0.92rem;
  line-height: 1.6;
}
.page-highup .hux-vs-panel .hux-vol-time {
  margin-top: 14px;
  color: var(--hx-sand);
}
.hux-vs-panel .hux-btn {
  margin-top: 18px;
}
/* no JS: every panel shows, stacked */
html:not(.js) .hux-vs-panel[hidden] {
  display: block;
}
html:not(.js) .hux-vs-panel + .hux-vs-panel {
  margin-top: 22px;
}
/* the sticky button on phones reads the stage as its hero */
@media (max-width: 860px) {
  .page-highup .hux-vol-stage {
    min-height: 0;
    padding-top: 28px;
  }
  .hux-vs-shot {
    clip-path: polygon(0 0, 100% 0, 100% 48%, 0 64%);
  }
  .hux-vs-bg::before {
    display: none;
  }
  .hux-vs-bg::after {
    background: linear-gradient(
      180deg,
      rgba(var(--hx-ink-rgb), 0.5) 0%,
      rgba(var(--hx-ink-rgb), 0.75) 40%,
      var(--hx-ink) 62%
    );
  }
  .hux-vs-count {
    display: none;
  }
  .hux-vs-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .hux-vs-copy,
  .hux-vs-menu,
  .hux-vs-command {
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
    width: 100%;
  }
  .hux-vs-copy {
    order: 1;
  }
  .hux-vs-menu {
    order: 2;
    padding: 12px 0 0 2%;
  }
  .hux-vs-command {
    order: 3;
    padding: 0;
  }
  .hux-vs-word {
    font-size: clamp(2.2rem, 10.5vw, 3.4rem);
  }
  .hux-vs-opt + .hux-vs-opt {
    margin-top: -10px;
  }
  .hux-vs-opt:nth-child(2) {
    --hx-x: 8%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hux-vs-shot,
  .hux-vs-opt,
  .hux-vs-opt::before,
  .hux-vs-opt::after,
  .hux-vs-sub,
  .hux-vs-panel.is-active {
    transition: none;
    animation: none;
  }
}

/* the volunteer page below the stage: the overview's rhythm */
.page-highup .hux-vol {
  padding: clamp(48px, 9vh, 104px) 0 0;
}
.page-highup .hux-vol-why .hux-why-grid {
  margin-top: clamp(40px, 6vh, 72px);
}

/* =====================================================================
   the footer on the event pages: the site's columns and baseline in
   the event's dress. A bark band with a slanted top edge, the STUHI
   mark and the four columns in mono and display, and instead of the
   dither canvas the High-Up! wordmark ghosted large on the right with
   its orange echo. The apply CTA stays hidden by app.js as everywhere.
   ===================================================================== */
.page-highup footer {
  position: relative;
  margin-top: clamp(30px, 6vh, 70px);
  padding: clamp(44px, 7vh, 80px) 0 clamp(20px, 3vh, 32px);
  background: var(--hx-bark);
  clip-path: polygon(0 var(--hx-lean), 100% 0, 100% 100%, 0 100%);
}
.page-highup footer .footer-frame {
  border: 0;
  padding: 0;
  background: transparent;
}
.page-highup footer .f-head {
  border: 0;
  padding: 0 0 clamp(26px, 4vh, 40px);
}
.page-highup footer .f-location {
  color: var(--hx-sand);
}
.page-highup footer .f-mid {
  position: relative;
  isolation: isolate;
  border: 0;
  padding: clamp(26px, 4vh, 40px) 0;
  border-top: 1px solid rgba(var(--hx-sand-rgb), 0.16);
  border-bottom: 1px solid rgba(var(--hx-sand-rgb), 0.16);
}
.page-highup footer .f-cols {
  position: relative;
  z-index: 1;
}
.page-highup footer .f-title {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.82rem;
  color: var(--hx-sand);
  transform: skewX(var(--hx-skew));
  transform-origin: left bottom;
}
.page-highup footer .col a {
  color: rgba(var(--hx-paper-rgb), 0.82);
  transition: color 0.2s var(--hx-snap);
}
.page-highup footer .col a:hover {
  color: var(--hx-orange);
}
/* the shader panel becomes the ghost wordmark: two copies of the mark,
   the orange echo under the paper one, leaning out of the right edge */
.page-highup footer .f-shader {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 0;
  background: none;
  overflow: hidden;
  pointer-events: none;
}
.page-highup footer .f-shader canvas,
.page-highup footer .f-shader img {
  display: none;
}
.page-highup footer .f-shader::before,
.page-highup footer .f-shader::after {
  content: "";
  position: absolute;
  right: -3%;
  top: 50%;
  width: min(46%, 560px);
  aspect-ratio: 1356 / 317;
  translate: 0 -50%;
  background: url("../../images/brand/high-up-wordmark.png") center / contain no-repeat;
  transform: rotate(-4deg);
  opacity: 0.1;
}
.page-highup footer .f-shader::after {
  translate: 1.5% calc(-50% + 12%);
  opacity: 0.05;
}
.page-highup footer .baseline {
  border: 0;
  padding-top: clamp(18px, 3vh, 26px);
  color: var(--txt-dim);
}
.page-highup footer .baseline p {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.8;
}
.page-highup footer .f-social {
  border: 0;
  gap: 6px;
}
.page-highup footer .f-social li,
.page-highup footer .f-social li + li {
  border: 0;
}
.page-highup footer .f-social a {
  border: 0;
  border-radius: 0;
  min-width: 56px;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  background: rgba(var(--hx-paper-rgb), 0.07);
  transition: background 0.2s var(--hx-snap);
}
.page-highup footer .f-social a:hover {
  background: var(--hx-orange);
}
.page-highup footer .f-social a:hover img {
  filter: invert(1);
}
@media (max-width: 700px) {
  .page-highup footer .f-shader::before,
  .page-highup footer .f-shader::after {
    display: none;
  }
}
/* the agenda's segmented row wraps before it widens a 320px screen */
.page-highup .hux-ag-toggle {
  flex-wrap: wrap;
  max-width: 100%;
}
@media (max-width: 360px) {
  .page-highup .hux-ag-toggle button {
    padding: 8px 12px;
    font-size: 0.74rem;
  }
}
/* tablets and phones on their side: the link row and the corner button
   share a narrow bar, so both tighten */
@media (min-width: 701px) and (max-width: 1000px) {
  .page-highup .hux-nav {
    gap: 10px;
    padding-inline: 16px;
  }
  .page-highup .hux-nav-links {
    gap: 0;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
  }
  .page-highup .hux-nav-links a {
    padding: 6px 10px;
  }
  .page-highup .hux-nav > .hux-btn-sm {
    padding: 0 12px;
    font-size: 0.7rem;
  }
  .page-highup .hux-nav-logo {
    height: 16px;
  }
}

/* =====================================================================
   phones: the hero, tidied. Only the two top blades stay (the lower
   ones ran behind the date and the buttons), the sticker moves to the
   photo's lower shoulder, the sign-up button is the one slab and the
   film link a quiet underlined line under it.
   ===================================================================== */
@media (max-width: 700px) {
  .hx-hero-blades .hx-b3,
  .hx-hero-blades .hx-b4,
  .hx-hero-blades .hx-b5,
  .hx-hero-blades .hx-b6 {
    display: none;
  }
  .hx-hero {
    background: var(--hx-ink);
  }
  /* the frame also holds the date and buttons on phones, so the
     sticker is pinned to the photo's foot by the panel's own height
     (the wrap's inner width at a 4:3 aspect) */
  .hx-free {
    top: calc((100vw - 48px) * 0.75 - 36px);
    bottom: auto;
    right: 10px;
    padding: 8px 14px 7px;
    font-size: 0.8rem;
    transform: rotate(-4deg) skewX(var(--hx-skew));
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  }
  .hx-hero-band {
    margin-top: 18px;
    gap: 18px;
  }
  .hx-stamp {
    gap: 10px;
  }
  .hx-stamp-date {
    font-size: clamp(2rem, 11vw, 2.6rem);
  }
  .page-highup .hu-ctas {
    gap: 6px;
    align-items: stretch;
  }
  .page-highup .hu-ctas .hux-btn-primary {
    height: 54px;
    font-size: 0.95rem;
  }
  .page-highup .hu-ctas .hux-btn-quiet {
    height: 46px;
    background: transparent;
    color: var(--hx-sand);
    clip-path: none;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-decoration: underline;
    text-decoration-color: var(--hx-orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }
  .page-highup .hu-ctas .hux-btn-quiet::before {
    display: none;
  }
  .page-highup .hu-ctas .hux-btn-quiet:hover,
  .page-highup .hu-ctas .hux-btn-quiet:focus-visible {
    color: var(--hx-paper);
    background: transparent;
    box-shadow: none;
    outline: 2px solid var(--hx-sand);
    outline-offset: 2px;
  }
  .hu-presented {
    margin-top: 30px;
  }
}

/* the role words are links: no underline, the pointer they already had */
.hux-vs-opt {
  text-decoration: none;
}

/* phones: the two hero buttons must not sink into the ground. Sign up
   goes orange, the film link a paper-tinted slab; the photo zooms a
   quarter in so the rooftop fills the small panel */
@media (max-width: 700px) {
  .page-highup .hu-ctas .hux-btn-primary {
    background: var(--hx-orange);
    color: var(--hx-ink);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  }
  .page-highup .hu-ctas .hux-btn-primary::before {
    background: var(--hx-paper);
  }
  .page-highup .hu-ctas .hux-btn-quiet {
    height: 50px;
    background: rgba(var(--hx-paper-rgb), 0.14);
    color: var(--hx-paper);
    clip-path: polygon(var(--hx-cut) 0, 100% 0, calc(100% - var(--hx-cut)) 100%, 0 100%);
    text-decoration: none;
    font-size: 0.86rem;
    letter-spacing: 0.05em;
  }
  .page-highup .hu-ctas .hux-btn-quiet:hover,
  .page-highup .hu-ctas .hux-btn-quiet:focus-visible {
    background: rgba(var(--hx-paper-rgb), 0.22);
    outline: none;
    box-shadow:
      inset 0 0 0 2px var(--hx-sand),
      inset 0 0 0 4px var(--hx-ink);
  }
  .hx-hero-photo img {
    transform: scale(1.25);
    transform-origin: 50% 55%;
  }
}

/* the stacked words overlap and the picked one's blade reaches over its
   neighbours, so the pointer kept landing on the picked link: only the
   words themselves take the pointer, the blades and the boxes let it
   through. Clicks on the words still follow the link. */
.hux-vs-opt {
  pointer-events: none;
}
.hux-vs-opt > * {
  pointer-events: auto;
}
.hux-vs-word {
  padding: 4px 0.1em;
}

/* phones: no photo in the hero. The panel goes, the sticker steps
   into the flow above the date as a tilted tag, and the date, campus
   and buttons sit straight under the wordmark. */
@media (max-width: 700px) {
  .hx-hero-panel {
    display: none;
  }
  .hx-hero-frame {
    margin-top: 26px;
    text-align: left;
  }
  .hx-free {
    position: static;
    display: inline-grid;
    margin: 0 0 16px 4px;
    top: auto;
    right: auto;
    transform: rotate(-3deg) skewX(var(--hx-skew));
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  }
  .hx-hero-band {
    margin-top: 0;
  }
}

/* =====================================================================
   phones: the sections breathe. The tilted, stepped Why list becomes
   a straight stack of full-width slabs (the picked one in paper with
   an orange edge, no blade reaching past the screen), the mission
   chips sit in a two-by-two grid instead of a tilted heap, the
   outline numerals shrink behind the kickers, the partner "how to
   join" card wraps its label, and the small links grow a thumb-sized
   hit area.
   ===================================================================== */
@media (max-width: 700px) {
  /* -- section heads: the numeral is a whisper, not a wall -- */
  .hx-num,
  .hux-mission-copy .hx-num {
    font-size: clamp(3.4rem, 18vw, 4.6rem);
    top: -0.35em;
    -webkit-text-stroke-color: rgba(var(--hx-sand-rgb), 0.22);
  }
  .hx-head {
    padding-top: 16px;
  }
  .hx-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
  }
  .page-highup .hux-lede,
  .page-highup .hux-why-lede {
    font-size: 1rem;
  }

  /* -- the mission chips: two by two, straight -- */
  .hx-claims {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
  }
  .hx-claim,
  .hx-claim-hot,
  .hx-claim-sand {
    --hx-r: 0deg;
    translate: 0 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    padding: 12px 16px 11px 14px;
  }
  .hx-claim strong {
    font-size: 1.3rem;
  }
  .hx-claim .mono {
    font-size: 0.6rem;
    letter-spacing: 0.14em;
  }
  /* three chips on a two-column grid: the odd one out takes the full row */
  .hx-claims > .hx-claim:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* -- the Why list: a straight stack of slabs -- */
  .page-highup .hux-why-grid {
    gap: 18px;
  }
  .page-highup .hux-why-list {
    padding: 0;
    gap: 6px;
  }
  .page-highup .hux-why-item,
  .page-highup .hux-why-item:nth-child(2),
  .page-highup .hux-why-item:nth-child(3),
  .page-highup .hux-why-item:nth-child(4) {
    --hx-r: 0deg;
    --hx-x: 0;
    padding: 0;
  }
  .page-highup .hux-why-item + .hux-why-item {
    margin-top: 0;
  }
  .page-highup .hux-why-head {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 12px;
    margin-left: 0;
    padding: 0;
    transform: none;
  }
  .page-highup .hux-why-item h3 {
    font-size: clamp(1.15rem, 5.6vw, 1.4rem);
  }
  .page-highup .hux-why-item h3 button {
    flex: 1 1 auto;
    text-align: left;
    padding: 14px 92px 13px 16px;
    min-height: 48px;
    transform: none;
  }
  .page-highup .hux-why-run {
    position: absolute;
    right: 16px;
    top: 50%;
    translate: 0 -50%;
    transform: none;
  }
  /* the slab: full width, both ends cut, the orange twin a thin edge
     below it instead of a second blade */
  .page-highup .hux-why-head::before,
  .page-highup .hux-why-head::after,
  .page-highup .hx-has-cursor .hux-why-head::before,
  .page-highup .hx-has-cursor .hux-why-head::after {
    display: block;
    inset: 0;
    clip-path: polygon(var(--hx-cut) 0, 100% 0, calc(100% - var(--hx-cut)) 100%, 0 100%);
    transform: none;
    animation: none;
    opacity: 1;
  }
  .page-highup .hux-why-head::before {
    background: rgba(var(--hx-paper-rgb), 0.07);
  }
  .page-highup .hux-why-head::after {
    top: auto;
    bottom: -4px;
    height: 4px;
    background: transparent;
  }
  .page-highup .hux-why-item.is-active .hux-why-head::before {
    background: var(--hx-paper);
  }
  .page-highup .hux-why-item.is-active .hux-why-head::after {
    background: var(--hx-orange);
  }
  .page-highup .hux-why-item h3 button,
  .page-highup .hux-why-item:hover h3 button,
  .page-highup .hx-has-cursor .hux-why-item.is-active:not(.is-hot) h3 button {
    color: var(--hx-sand);
  }
  .page-highup .hux-why-item.is-active h3 button,
  .page-highup .hux-why-item.is-active:hover h3 button,
  .page-highup .hx-has-cursor .hux-why-item.is-active:not(.is-hot) h3 button {
    color: var(--hx-ink);
  }
  .page-highup .hux-why-item p {
    margin: 12px 0 14px;
    padding: 0 4px;
    max-width: none;
    font-size: 0.95rem;
    opacity: 1;
  }
  .page-highup .hux-why-item:not(.is-active) p {
    opacity: 0.75;
  }

  /* -- the agenda: the legend wraps before it widens the screen -- */
  .page-highup .hux-ag-meta {
    margin-top: 22px;
    gap: 14px;
  }
  .page-highup .hux-ag-legend {
    flex-wrap: wrap;
    gap: 8px 16px;
  }
  .page-highup .hux-ag-hint {
    margin-top: 14px;
  }

  /* -- the partners: an odd last card takes the whole row, the join
     card wraps its line -- */
  .page-highup ul.hux-sps-grid[data-tier="premier"] > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .page-highup .hux-sps-join {
    padding: 18px 16px;
    gap: 8px;
  }
  .page-highup .hux-sps-join .hux-sps-openlabel {
    max-width: 100%;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0.1em;
    overflow-wrap: anywhere;
  }
  .page-highup .hux-sps-plus {
    font-size: 1.8rem;
  }

  /* -- the small links take a thumb -- */
  .page-highup .faq-aside-link {
    display: inline-block;
    padding: 8px 4px;
  }
  .page-highup .hux-nav-brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* =====================================================================
   phones: the whole hero on one screen, bars and all. The stack was
   about 700px tall, more than an iPhone shows with Safari's bars up
   (664px) or a small Android (640px). The logos go three a row, the
   date and the gaps tighten, the film link loses a little height.
   Very short screens (the SE with its bars, landscape) also drop the
   sticker and shrink the wordmark.
   ===================================================================== */
@media (max-width: 700px) {
  .hx-hero {
    padding-top: 70px;
    padding-bottom: 12px;
  }
  .hx-wordmark {
    --hu-mark-w: min(19rem, 80vw);
    margin-top: 6px;
  }
  .hx-hero-meta {
    margin-top: 10px;
  }
  .hx-hero-frame {
    margin-top: 16px;
  }
  .hx-free {
    margin: 0 0 10px 4px;
    padding: 7px 12px 6px;
    font-size: 0.74rem;
  }
  .hx-hero-band {
    gap: 12px;
  }
  .hx-stamp {
    gap: 6px;
  }
  .hx-stamp-date {
    font-size: clamp(1.7rem, 9vw, 2.1rem);
  }
  .hx-stamp-loc {
    padding: 5px 12px 5px 9px;
  }
  .page-highup .hu-ctas .hux-btn-primary {
    height: 52px;
  }
  .page-highup .hu-ctas .hux-btn-quiet {
    height: 44px;
    font-size: 0.82rem;
  }
  .hu-presented {
    margin-top: 18px;
  }
  .hu-presented .backed-label {
    margin-bottom: 12px;
    font-size: 0.62rem;
  }
  .hu-presented .backers {
    --lg: 0.7;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 12px;
  }
}
@media (max-width: 700px) and (max-height: 600px) {
  .hx-hero {
    padding-top: 64px;
  }
  .hx-wordmark {
    --hu-mark-w: min(15rem, 66vw);
    margin-top: 0;
  }
  .hx-free {
    display: none;
  }
  .hx-hero-frame {
    margin-top: 10px;
  }
  .hx-stamp-date {
    font-size: 1.5rem;
  }
  .hu-presented {
    margin-top: 12px;
  }
  .hu-presented .backers {
    --lg: 0.6;
    gap: 10px 10px;
  }
}

/* tall phones have the room: the wordmark and the gaps grow back so the
   foot of the screen is not one empty band above the logos */
@media (max-width: 700px) and (min-height: 800px) {
  .hx-wordmark {
    --hu-mark-w: min(21rem, 88vw);
    margin-top: 16px;
  }
  .hx-hero-meta {
    margin-top: 14px;
  }
  .hx-hero-frame {
    margin-top: 26px;
  }
  .hx-free {
    margin-bottom: 16px;
  }
  .hx-hero-band {
    gap: 18px;
  }
  .hx-stamp {
    gap: 10px;
  }
  .hx-stamp-date {
    font-size: clamp(2rem, 11vw, 2.6rem);
  }
  .hu-presented {
    margin-top: 30px;
  }
  .hu-presented .backers {
    --lg: 0.8;
    gap: 20px 14px;
  }
}

/* =====================================================================
   phones: the hero is one left-aligned column, as tall as its content.
   Centring the stack in a full-screen box left a dead band between
   the buttons and the logos and put the pieces on three alignments
   (badge centred, date left, logos centred). Now the wordmark, the
   badge, the sticker, the date, the venue, the buttons and the logos
   share the left edge, the tilts go (the slant of the cuts is the
   poster's move on a phone), and the film peeks in underneath.
   ===================================================================== */
@media (max-width: 700px) {
  .hx-hero {
    min-height: 0;
    padding-bottom: 34px;
    text-align: left;
  }
  .hx-hero-inner,
  .hx-hero > .wrap {
    width: 100%;
    margin-block: 0;
    align-self: stretch;
    align-items: stretch;
  }
  .hx-wordmark {
    --hu-mark-w: min(20rem, 84vw);
    margin: 18px auto 0 0;
    transform: rotate(-2deg);
    transform-origin: left center;
  }
  .hx-hero-meta {
    justify-content: flex-start;
    margin-left: 2px;
  }
  .hx-free {
    margin-left: 2px;
    transform: skewX(var(--hx-skew));
  }
  .hx-stamp-loc {
    margin-left: 2px;
    transform: none;
  }
  .hu-presented {
    text-align: left;
  }
  .hu-presented .backers {
    justify-items: start;
  }
}

/* ----- "Return to STUHI site" in the hero's top-left corner: a plain
   text link, only for visitors who came from the STUHI site
   (stuhi-return.js unhides it). It sits in the hero's flow above the
   wordmark, so it never overlaps the title at any width. ----- */
.hx-return {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-bottom: 14px;
  text-align: left;
}
.stuhi-return {
  display: inline-block;
  padding-block: 6px;
  font-size: 14px;
  color: #e9dccb;
  text-decoration: underline;
  text-decoration-color: rgba(233, 220, 203, 0.4);
  text-underline-offset: 3px;
}
.stuhi-return:hover {
  color: #fff;
  text-decoration-color: currentColor;
}
.stuhi-return:focus-visible {
  outline: 2px solid #ef7a2c;
  outline-offset: 2px;
}

/* =====================================================================
   phones, 4 Oct 2026: a calmer first screen. The date and the film
   link step out (the countdown and the campus say when and where, and
   the film is one scroll away), and the hero fills the screen again,
   so the "Built by" logos (inside the hero) sit at its foot. The
   campus, countdown and sign-up group is centred in the room under
   the badge, so the space spreads out instead of pooling in one band.
   ===================================================================== */
@media (max-width: 700px) {
  .hx-stamp-date,
  .page-highup .hu-ctas .hx-film-cta {
    display: none;
  }
  .hx-hero {
    min-height: calc(var(--svh, 1vh) * 100);
  }
  .hx-hero-inner {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
  }
  .hx-hero-frame {
    margin-block: auto;
    padding-top: 24px;
  }
  .hx-hero-band {
    gap: clamp(14px, 2.6vh, 26px);
  }
}

/* ---- partners page: sponsoring under the funding meter. A blade like
   the meter; the copy and the Sponsor us button on the left, the QR code
   on the right on its own white tile (a scanner needs the light quiet
   zone the SVG carries), under the copy on narrow screens ---- */
.page-highup .hux-donate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px clamp(24px, 4vw, 48px);
  margin-top: 14px;
  background: var(--hx-bark);
  clip-path: var(--hx-shape-box);
  padding: clamp(20px, 3vw, 28px) calc(clamp(18px, 3vw, 30px) + var(--hx-box) / 2);
}
.page-highup .hux-donate-copy {
  flex: 1 1 auto;
  min-width: 0;
}
.page-highup .hux-donate-title {
  color: var(--signal);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  font-weight: 400;
  margin: 0;
}
.page-highup .hux-donate-lede {
  margin: 10px 0 0;
  max-width: 52ch;
  color: var(--txt);
  font-size: 1rem;
}
.page-highup .hux-donate-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 18px;
}
.page-highup .hux-donate-act .hux-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.page-highup .hux-donate-how {
  margin: 0;
  max-width: 40ch;
  color: var(--txt-soft);
  font-size: 0.85rem;
}
.page-highup .hux-donate-qr {
  flex: none;
  display: block;
  width: 164px;
  height: 164px;
  background: #fff;
}
@media (max-width: 640px) {
  .page-highup .hux-donate {
    flex-direction: column;
    align-items: flex-start;
  }
  .page-highup .hux-donate-qr {
    width: 148px;
    height: 148px;
  }
}

/* ---- teachers (/high-up/teachers/ and its link on /register/) ----
   The callout at the top of the teacher form says the one thing a
   teacher must pass on: every student signs up on their own, with the
   same school name. The register page's head carries a quiet link the
   other way, outside [data-reg-stage] so the portal's embed leaves it
   behind. */
.page-highup .hux-reg-callout {
  color: var(--txt-soft);
}
.page-highup .hux-reg-callout p {
  margin: 0;
  max-width: 60ch;
}
.page-highup .hux-reg-callout .hux-reg-callout-title {
  margin-bottom: 6px;
  color: var(--hx-orange);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}
.page-highup .hux-reg-callout a,
.page-highup .hux-reg-teacherlink a {
  color: var(--txt);
  text-decoration: underline;
  text-decoration-color: var(--hx-orange);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.page-highup .hux-reg-field-num input {
  max-width: 12ch;
}
.page-highup .hux-reg-donelink {
  margin: 16px auto 0;
  padding: 10px 14px;
  max-width: 100%;
  width: fit-content;
  background: rgba(var(--hx-paper-rgb), 0.07);
  color: var(--txt);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
  user-select: all;
}
.page-highup .hux-reg-copied {
  min-height: 1.4em;
  margin: 12px 0 0;
  color: var(--txt-soft);
  font-size: 0.85rem;
  text-align: center;
}
.page-highup .hux-reg-teacherlink {
  margin: 14px 0 0;
  color: var(--txt-soft);
  font-size: 0.92rem;
}
.page-highup .hux-reg-teacherlink a {
  display: inline-block;
  padding: 6px 0;
}
.page-highup .hux-reg-bothdays {
  margin: 0 0 18px;
}

/* ---- suggestions as you type (the teacher form's school, city and
   subjects; highup-teacher.js builds the panel). A chevron at the
   input's end, a dark slab of rows under it, the active row washed in
   orange. The list only suggests, so free text stays valid. ---- */
.page-highup .hux-combo {
  position: relative;
  min-width: 0;
}
.page-highup .hux-combo.is-enhanced input {
  padding-right: 48px;
}
.page-highup .hux-combo-btn {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--txt-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.page-highup .hux-combo-btn::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: -5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s var(--hx-snap), margin 0.2s var(--hx-snap);
}
.page-highup .hux-combo-btn:hover,
.page-highup .hux-combo.is-open .hux-combo-btn {
  color: var(--hx-orange);
}
.page-highup .hux-combo.is-open .hux-combo-btn::before {
  margin-top: 5px;
  transform: rotate(225deg);
}
.page-highup .hux-combo-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  background: #120d0a;
  border: 1px solid rgba(var(--hx-sand-rgb), 0.22);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.7);
}
@media (prefers-reduced-motion: no-preference) {
  .page-highup .hux-combo-pop {
    animation: hux-combo-drop 0.16s var(--hx-snap) both;
  }
}
@keyframes hux-combo-drop {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
.page-highup .hux-combo-list {
  margin: 0;
  padding: 6px 0;
  list-style: none;
  /* five and a half rows, so the half row says there is more; the
     script shortens it to the room above the on-screen keyboard */
  max-height: 254px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--hx-sand-rgb), 0.3) transparent;
}
.page-highup .hux-combo-opt {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  color: var(--txt-soft);
  font-size: 0.95rem;
  line-height: 1.3;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.page-highup .hux-combo-opt::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--hx-orange);
  opacity: 0;
}
.page-highup .hux-combo-opt.is-active {
  background: rgba(239, 122, 44, 0.14);
  color: var(--txt);
}
.page-highup .hux-combo-opt.is-current {
  color: var(--txt);
}
.page-highup .hux-combo-opt.is-active::after,
.page-highup .hux-combo-opt.is-current::after {
  opacity: 1;
}
.page-highup .hux-combo-opt mark {
  background: none;
  color: var(--txt);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--hx-orange);
  text-underline-offset: 0.2em;
}
.page-highup .hux-combo-note {
  margin: 0;
  padding: 10px 16px 12px;
  border-top: 1px solid rgba(var(--hx-sand-rgb), 0.12);
  color: var(--txt-dim);
  font-size: 0.82rem;
  line-height: 1.4;
}
.page-highup .hux-combo-list[hidden] + .hux-combo-note {
  border-top: 0;
}