/* ==================================================================
   HERO v2: nav, menus and hero. Every value is taken from
   ~/projects/wif-hero-v2/reference/hero.html, the source of truth.
   From 1286 wide the stage is scaled as one unit by fit() (the inline
   script after the hero), so these values are design px at 1440.
   Everything is scoped under .wh with wh- classes, except the page
   polish at the top, so nothing here reaches the sections below and
   main.css cannot reach in.
   ================================================================== */

/* --- page: one ground under everything, no seam below the hero ------ */
:root { --ground: #0E0E0B; }
html { background-color: #0E0E0B; overscroll-behavior: none; }
body { background: #0E0E0B; overscroll-behavior: none; }
::selection { background: rgba(237, 228, 207, 0.24); color: #EDE4CF; }
::-moz-selection { background: rgba(237, 228, 207, 0.24); color: #EDE4CF; }

/* main.css sets border-box on everything and line-height 1.5 on body.
   The reference uses browser defaults, so the hero puts those back and
   names border-box only where the reference does. */
.wh, .wh *, .wh *::before, .wh *::after { box-sizing: content-box; }

.wh {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 560px;
  min-height: max(560px, 100vh);
  min-height: max(560px, 100svh);
  overflow: hidden;
  background: #0E0E0B;
  color: #EDE4CF;
  font-family: "WIF Par", ui-monospace, monospace;
  font-size: 16px;
  line-height: normal;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

.wh [hidden] { display: none !important; }
.wh [hidden-pending] { visibility: hidden; }

.wh a { color: #EDE4CF; text-decoration: none; transition: color .16s ease-out, background-color .16s ease-out; }
.wh a:hover { color: #CFEF5B; }
.wh button { margin: 0; }

.wh a:focus-visible,
.wh button:focus-visible,
.wh [role="menuitem"]:focus-visible {
  outline: 1px solid rgba(237, 228, 207, 0.6);
  outline-offset: 2px;
}
/* the framed elements draw the same ring on the cut shape (below) */
.wh .wh-cut:focus-visible { outline: none; }

/* tap targets of 44px where the reference draws them smaller (the
   wordmark is 30px tall, a judge 26px): an invisible hit area, the way
   the hackathon site grows its small links, so nothing moves */
.wh .wh-mark, .wh .wh-judge { position: relative; }
.wh-mark::before, .wh-judge::before { content: ""; position: absolute; left: 0; right: 0; }
.wh-mark::before { top: -7px; bottom: -7px; }
.wh-judge::before { top: -9px; bottom: -9px; }

/* --- background: the banknote engraving ------------------------------
   The ground, the engraving (hero.js draws it on the GPU at the screen's
   real pixel size and shows it once drawn), and the still grain over it:
   grain.png, a 240px tile at 0.16. */
.wh-ground { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; background: #0E0E0B; }
.wh-engrave { position: absolute; left: 0; top: 0; display: block; visibility: hidden; }
.wh-engrave.is-drawn { visibility: visible; }
.wh-grain {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("../hero/grain.png"); background-size: 240px 240px; opacity: 0.16;
}

/* --- the diagonal cut, our signature shape ------------------------------
   Every framed element is square with its top-left and bottom-right
   corners cut at 45 degrees: 14px on the card, 10px on the dropdown, 8px
   on everything else. The line is cream at 0.34, 1.5px.
   ::before is the fill (the glass and the hover tone), clipped to the cut
   shape, behind the content. ::after is the line, and with keyboard focus
   the ring 2px outside it, on the same cut. Both layers are 4px larger
   than the element on every side, so the focus ring fits. hero.js
   (snapFrames) places them on whole device pixels and writes the shapes
   in device pixels: straight sides land exactly on pixel rows, the line
   is a whole number of device pixels wide (1.5px scaled and rounded) and
   the diagonals are the same width measured across. The polygons written
   here are the same shapes, unsnapped, for the moment before it runs. */
.wh-cut {
  position: relative; isolation: isolate; border-radius: 0;
  --wh-c: 8px;
  /* the edges of the element inside its layers, which start 4px out */
  --wh-x0: 4px; --wh-y0: 4px; --wh-x1: calc(100% - 4px); --wh-y1: calc(100% - 4px);
}
.wh-cut--m { --wh-c: 10px; }
.wh-cut--l { --wh-c: 14px; }
.wh-cut::before,
.wh-cut::after {
  content: ""; position: absolute; pointer-events: none; border-radius: 0;
  left: var(--wh-lx, -4px); top: var(--wh-ly, -4px);
  width: var(--wh-lw, calc(100% + 8px)); height: var(--wh-lh, calc(100% + 8px));
}
.wh-cut::before {
  z-index: -1; background-color: transparent;
  transition: background-color .18s ease-out;
  clip-path: var(--wh-shape, polygon(
    calc(var(--wh-x0) + var(--wh-c)) var(--wh-y0), var(--wh-x1) var(--wh-y0),
    var(--wh-x1) calc(var(--wh-y1) - var(--wh-c)), calc(var(--wh-x1) - var(--wh-c)) var(--wh-y1),
    var(--wh-x0) var(--wh-y1), var(--wh-x0) calc(var(--wh-y0) + var(--wh-c))));
}
/* the line: the outer shape, and inside it the same shape 1.5px in, its
   diagonal 1.5 x sqrt 2 = 2.1213px further along each side */
.wh-line::after {
  background-color: rgba(237, 228, 207, 0.34);
  clip-path: var(--wh-ring, polygon(evenodd,
    calc(var(--wh-x0) + var(--wh-c)) var(--wh-y0), var(--wh-x1) var(--wh-y0),
    var(--wh-x1) calc(var(--wh-y1) - var(--wh-c)), calc(var(--wh-x1) - var(--wh-c)) var(--wh-y1),
    var(--wh-x0) var(--wh-y1), var(--wh-x0) calc(var(--wh-y0) + var(--wh-c)),
    calc(var(--wh-x0) + var(--wh-c)) var(--wh-y0),
    calc(var(--wh-x0) + var(--wh-c) + 0.6213px) calc(var(--wh-y0) + 1.5px),
    calc(var(--wh-x0) + 1.5px) calc(var(--wh-y0) + var(--wh-c) + 0.6213px),
    calc(var(--wh-x0) + 1.5px) calc(var(--wh-y1) - 1.5px),
    calc(var(--wh-x1) - var(--wh-c) - 0.6213px) calc(var(--wh-y1) - 1.5px),
    calc(var(--wh-x1) - 1.5px) calc(var(--wh-y1) - var(--wh-c) - 0.6213px),
    calc(var(--wh-x1) - 1.5px) calc(var(--wh-y0) + 1.5px),
    calc(var(--wh-x0) + var(--wh-c) + 0.6213px) calc(var(--wh-y0) + 1.5px)));
}
/* keyboard focus: the line brightens to the ring's 0.6 and the ring
   follows the cut 2px outside it, 1px wide. Until hero.js has measured
   (.wh-snapped), the usual outline stands in. */
.wh.wh-snapped .wh-cut:focus-visible::after { background-color: rgba(237, 228, 207, 0.6); clip-path: var(--wh-ring-focus); }
.wh:not(.wh-snapped) .wh-cut:focus-visible { outline: 1px solid rgba(237, 228, 207, 0.6); outline-offset: 2px; }

/* --- stage: nav and hero content, scaled as one from 1286 ------------ */
.wh-stage { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; transform-origin: 0 0; }
.wh-stage > .wh-nav,
.wh-stage > .wh-main { width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; box-sizing: border-box; }

/* --- nav ------------------------------------------------------------- */
.wh-nav { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 108px; padding: 0 40px; }
.wh-mark { display: inline-flex; align-items: center; gap: 12px; font-size: 30px; letter-spacing: 0.01em; justify-self: start; white-space: nowrap; }

/* the glass, retuned for the engraving: the nav capsules, "own $wif"
   and the hero buttons. The reference's 1px border is the line now, so
   its width moves into the padding and every box keeps its size. */
.wh-cap { display: flex; align-items: center; }
.wh-cap::before,
.wh .wh-own::before,
.wh .wh-cta::before {
  background-color: rgba(20, 20, 17, 0.42);
  -webkit-backdrop-filter: blur(12px) brightness(1.25); backdrop-filter: blur(12px) brightness(1.25);
}
.wh-cluster { gap: 2px; padding: 5px; }
.wh-right { justify-self: end; display: flex; align-items: center; gap: 8px; }
/* "own $wif on pons" is its own capsule, the link filling it, so its
   hover covers it to the cut */
.wh-cap--own { display: flex; }
.wh-cap--menu { display: none; padding: 5px; }

.wh .wh-item {
  display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 18px;
  border: 0; border-radius: 4px; background: transparent;
  color: rgba(237, 228, 207, 0.82); font: inherit; font-size: 15px; letter-spacing: 0.08em;
  cursor: pointer; transition: background-color .18s ease-out, color .18s ease-out;
}
.wh .wh-item:hover { background: rgba(237, 228, 207, 0.1); color: #EDE4CF; }
.wh .wh-item.on { background: rgba(237, 228, 207, 0.14); color: #EDE4CF; }
.wh-px--chev svg { transition: transform .2s ease-out; }
.wh-item.on .wh-px--chev svg { transform: rotate(180deg); }

.wh .wh-own {
  display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 23px;
  box-sizing: border-box; background: transparent;
  font-size: 15px; letter-spacing: 0.08em; white-space: nowrap;
}
.wh a.wh-own { color: #CFEF5B; }
.wh a.wh-own:hover { color: #CFEF5B; }
/* the reference's hover, cream at 0.1 over the glass, as one tone */
.wh .wh-own:hover::before { background-color: rgba(65.4, 63.51, 56.75, 0.478); }
.wh-ownarw { display: inline-flex; margin-left: 2px; color: #CFEF5B; transition: transform .18s ease-out; }
.wh-own:hover .wh-ownarw { transform: translateX(var(--wh-nudge, 3px)); }

/* --- the dropdown ------------------------------------------------------
   The hackathon site's floating panel (wif-hackathon web/assets/css/
   base.css, .dd): it hangs from the nav, moves and resizes between the
   two menus over 340ms, the old menu sliding 40px out to one side as the
   new one slides in from the other. Opening, it fades in over 200ms and
   rises 6px from 98.5% over 300ms; closing, it fades over 150ms and sinks
   back over 200ms. Placed where the reference places it: 98px from the
   top of the stage, 8px of it a bridge for the pointer, then the glass,
   offset from the nav's centre by the panel's data-x. hero.js sets its
   width, height and offset (a margin, not a transform, so at rest it
   sits on the device pixels hero.js snaps its line to). */
.wh-dd {
  position: absolute; z-index: 20; top: 98px; left: 50%;
  width: 0; height: 0; padding-top: 8px;
  visibility: hidden; pointer-events: none;
  transition: width 340ms cubic-bezier(0.22, 1, 0.36, 1), height 340ms cubic-bezier(0.22, 1, 0.36, 1),
              margin-left 340ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 220ms;
}
.wh-dd[data-open="true"] {
  visibility: visible; pointer-events: auto;
  transition: width 340ms cubic-bezier(0.22, 1, 0.36, 1), height 340ms cubic-bezier(0.22, 1, 0.36, 1),
              margin-left 340ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
.wh-dd[data-still] { transition: none; }

/* the view moves and fades as one; the glass, the reference's panel
   material, is its ::before and the line its ::after, beside the menus as
   in the reference. The menus slide inside a clip of their own. */
.wh-dd-view {
  position: absolute; top: 8px; left: 0; right: 0; bottom: 0;
  opacity: 0; transform: translateY(-6px) scale(0.985); transform-origin: 50% 0;
  transition: opacity 150ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.wh-dd-view::before,
.wh-sheet::before {
  background-color: rgba(18, 18, 15, 0.86);
  -webkit-backdrop-filter: blur(22px) brightness(1.2); backdrop-filter: blur(22px) brightness(1.2);
}
.wh-dd-clip { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }
.wh-dd[data-open="true"] .wh-dd-view {
  opacity: 1; transform: none;
  transition: opacity 200ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* each menu, on the glass's box */
.wh-panel {
  position: absolute; top: 0; left: 0; box-sizing: border-box; padding: 8px;
  opacity: 0; transform: translateX(40px);
  transition: opacity 200ms ease, transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}
#menu-built { width: 760px; }
#menu-community { width: 320px; }
.wh-panel[data-state="left"] { transform: translateX(-40px); }
.wh-panel[data-state="in"] {
  opacity: 1; transform: none;
  transition: opacity 260ms ease 60ms, transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}
.wh-panel[data-still] { transition: none; }

.wh-phead { padding: 10px 16px 6px; font-size: 11px; letter-spacing: 0.14em; color: rgba(237, 228, 207, 0.55); }
#menu-built .wh-phead { display: flex; justify-content: space-between; align-items: center; }

.wh-tile {
  width: 56px; height: 56px;
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
}
.wh-tile::before { background-color: rgba(237, 228, 207, 0.06); }

.wh-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 4px; }
.wh .wh-row { transition: background-color .16s ease-out; }
.wh-dd .wh-row:hover { background: rgba(237, 228, 207, 0.07); }
.wh-pfoot {
  display: flex; justify-content: space-between; align-items: center; margin-top: 4px; padding: 14px 16px;
  font-size: 13px; letter-spacing: 0.06em; border-top: 1px solid rgba(237, 228, 207, 0.1);
}
.wh .wh-pfoot { color: rgba(237, 228, 207, 0.82); }
.wh .wh-pfoot:hover { color: #CFEF5B; }
.wh-pfoot:hover .wh-go { color: #CFEF5B; transform: translateX(var(--wh-nudge, 3px)); }
.wh-rtext { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wh-rtitle { display: flex; align-items: center; gap: 10px; }
.wh-rname { font-size: 16px; }
.wh-chip { font-size: 10px; letter-spacing: 0.1em; color: #0E0E0B; background: #CFEF5B; padding: 3px 7px; border-radius: 2px; }
.wh-status { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: 0.1em; color: rgba(237, 228, 207, 0.75); }
.wh-rdesc { font-size: 12px; color: rgba(237, 228, 207, 0.65); }
.wh-rend { display: flex; align-items: center; gap: 14px; }
.wh-stat { font-size: 13px; color: rgba(237, 228, 207, 0.65); }

.wh-crow { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px; border-radius: 4px; }
.wh .wh-crow { transition: background-color .16s ease-out; }
.wh-dd .wh-crow:hover { background: rgba(237, 228, 207, 0.07); }
.wh-cname { font-size: 15px; }

.wh-go { color: rgba(237, 228, 207, 0.5); transition: color .16s ease-out, transform .16s ease-out; display: inline-flex; }
.wh-crow:hover .wh-go, .wh-row:hover .wh-go, .wh-srow:hover .wh-go { color: #CFEF5B; transform: translateX(var(--wh-nudge, 3px)); }

/* --- hero ------------------------------------------------------------ */
/* padding-bottom is 120 when there is room; fit() shrinks it to 48 */
.wh-main {
  position: relative; flex: 1 1 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 64px; align-items: end;
  padding: 32px 40px 120px;
}
/* the headline block sits 80px above the line the card ends on */
.wh-copy { display: flex; flex-direction: column; gap: 40px; padding-bottom: 80px; }
.wh-words { display: flex; flex-direction: column; gap: 28px; }
.wh-h1 { margin: 0; font-size: 100px; line-height: 0.96; font-weight: 400; letter-spacing: -0.01em; white-space: nowrap; }
.wh-lede { margin: 0; font-size: 22px; line-height: 1.5; color: rgba(237, 228, 207, 0.85); }
.wh-ctas { display: flex; align-items: center; gap: 14px; }

.wh-cta {
  display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 21px;
  box-sizing: border-box; border: 0; background: transparent;
  color: #EDE4CF; font: inherit; font-size: 14px; letter-spacing: 0.06em; cursor: pointer;
}
.wh .wh-cta:hover { color: #CFEF5B; }
.wh .wh-cta:hover::before { background-color: rgba(237, 228, 207, 0.1); }
.wh .wh-cta.wh-join { color: #CFEF5B; }
.wh .wh-cta.wh-join:hover { color: #E2F78F; }
.wh-a { display: inline-flex; transition: transform .18s ease-out; }
.wh-cta:hover .wh-a, .wh-txt:hover .wh-a { transform: translateX(var(--wh-nudge, 3px)); }

.wh-txt { display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 6px; font-size: 14px; letter-spacing: 0.06em; }
.wh .wh-txt { color: rgba(237, 228, 207, 0.75); transition: color .18s ease-out; }
.wh .wh-txt:hover { color: #EDE4CF; }
.wh .wh-txt.wh-idea { color: #CFEF5B; }
.wh .wh-txt.wh-idea:hover { color: #E2F78F; }

/* --- the hackathon card: still, no tilt or float; hover lifts its tone.
   The banner sits inside the frame line, its own 1.5px divider in the
   banner's black along the bottom. The card's line is drawn over it. */
.wh-card {
  box-sizing: border-box;
  padding: 0 33px 33px; display: flex; flex-direction: column; gap: 24px;
}
.wh-card::before {
  background-color: rgba(20, 20, 17, 0.46);
  -webkit-backdrop-filter: blur(18px) brightness(1.25); backdrop-filter: blur(18px) brightness(1.25);
  transition: background-color .25s ease-out;
}
.wh-card:hover::before { background-color: rgba(32, 32, 27, 0.54); }
.wh-card::after { z-index: 3; }
.wh-ban {
  position: relative; flex: none; margin: 1.5px -31.5px 0; height: 199.5px;
  clip-path: polygon(13.6px 0, 100% 0, 100% 100%, 0 100%, 0 13.6px);
  background: url("../images/hackathon-bridge@1x.webp") 50% 46% / auto 350px no-repeat;
  background-image: image-set(url("../images/hackathon-bridge@1x.webp") 1x, url("../images/hackathon-bridge@2x.webp") 2x);
}
.wh-ban::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--line-1, 1.5px); background: #090A07; }
.wh-tag { position: absolute; z-index: 4; top: 16px; display: inline-flex; align-items: center; font-size: 10px; letter-spacing: 0.1em; }
.wh-tag--l { left: 18px; }
.wh-tag--r { right: 18px; padding: 4px 8px; background: rgba(14, 14, 11, 0.82); color: #CFEF5B; }
.wh-tag b { font-weight: 400; padding: 4px 8px; background: #CFEF5B; color: #0E0E0B; }
.wh-tag i { font-style: normal; padding: 4px 8px; background: rgba(14, 14, 11, 0.82); color: rgba(237, 228, 207, 0.75); }
.wh-card-head { position: relative; display: flex; flex-direction: column; gap: 14px; margin-top: -4px; }
.wh-card-title { margin: 0; font-size: 44px; line-height: 1.04; font-weight: 400; }
.wh-card-lead { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(237, 228, 207, 0.82); }

.wh-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wh-fact { display: flex; flex-direction: column; gap: 10px; }
.wh-label { font-size: 11px; letter-spacing: 0.1em; color: rgba(237, 228, 207, 0.55); }
.wh-value { font-size: 24px; line-height: 1; }

.wh-judging { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wh-judging > .wh-label { margin-right: 6px; }
.wh-judges { display: contents; }
/* plain squares: no cut, no line, no radius */
.wh-judge { padding: 7px 11px; border-radius: 0; font-size: 12px; white-space: nowrap; }
.wh .wh-judge { background: rgba(237, 228, 207, 0.08); color: #EDE4CF; transition: background-color .16s ease-out, color .16s ease-out; }
.wh .wh-judge:hover { background: rgba(237, 228, 207, 0.16); color: #CFEF5B; }

.wh-card-ctas { display: flex; flex-wrap: wrap; gap: 10px; }

/* --- pixel icons -------------------------------------------------------
   Each icon is one merged path per layer (the still pixels, then one per
   animation frame). Its box keeps the reference's size in the layout;
   hero.js (snapIcons) draws the icon in it at a whole number of device
   pixels per icon pixel, centred, on the device pixel grid. */
.wh-px { position: relative; display: inline-block; flex: none; vertical-align: top; }
.wh-px > svg {
  position: absolute; display: block; overflow: visible;
  left: var(--wh-ix, 0); top: var(--wh-iy, 0); width: var(--wh-iw, 100%); height: var(--wh-ih, 100%);
  transform-origin: var(--wh-io, 50% 50%);
}
.wh-px--arrow { width: 14px; height: 11px; }
.wh-px--chev { width: 12px; height: 7px; }
.wh-px--ownarw { width: 13px; height: 13px; }
.wh-px--hack { width: 39px; height: 33px; }
.wh-px--fair { width: 39px; height: 36px; }
.wh-px--flat { width: 39px; height: 33px; }
.wh-lime { fill: #CFEF5B; }
/* the live mark, a level meter: 5 x 6 cells, 2px a cell, 1.5px in the menu's 10px tag. Each bar steps
   through 3, 6, 4, 2, 5, 3 cells from the bottom, 0.5s a step, with no fade; bar 2 starts 1s later, bar 3
   2s later. Still under reduced motion: 3, 6, 4 */
.wh-px--live { width: 10px; height: 12px; }
.wh-status .wh-px--live { width: 7.5px; height: 9px; }
.wh-la, .wh-lb, .wh-lc { transform-origin: 0 6px; }
.wh-la { transform: scaleY(0.5); }
.wh-lb { transform: none; }
.wh-lc { transform: scaleY(0.66667); }
@keyframes wh-level {
  0% { transform: scaleY(0.5); }
  16.6667% { transform: none; }
  33.3333% { transform: scaleY(0.66667); }
  50% { transform: scaleY(0.33333); }
  66.6667% { transform: scaleY(0.83333); }
  83.3333%, 100% { transform: scaleY(0.5); }
}
@media (prefers-reduced-motion: no-preference) {
  .wh-la, .wh-lb, .wh-lc { animation: wh-level 3s steps(1) infinite backwards; }
  .wh-lb { animation-delay: 1s; }
  .wh-lc { animation-delay: 2s; }
}
.wh-px--sheet, .wh-px--sheetfill { width: 18px; height: 18px; }
.wh-px--tick { width: 18px; height: 14px; }
.wh-px--menu { width: 14px; height: 11px; }
.wh-px--close { width: 12px; height: 12px; }

/* the animation frames */
.wh-blink { animation: wh-blink 1.1s steps(1) infinite; }
@keyframes wh-blink { 50% { opacity: 0; } }
.wh-fa { animation: wh-fa 1.6s steps(1) infinite; }
@keyframes wh-fa { 0% { opacity: 1; } 50% { opacity: 0; } }
.wh-fb { animation: wh-fb 1.6s steps(1) infinite; }
@keyframes wh-fb { 0% { opacity: 0; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .wh-blink, .wh-fa, .wh-fb { animation: none; }
  .wh-fb { opacity: 0; }
  /* as on the hackathon site: the dropdown shows and hides */
  .wh-dd, .wh-dd * { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

/* --- menu sheet (1285 and below, and touch screens) ------------------ */
/* the dropdown's glass and line on the outside, and a scroller inside */
.wh-sheet { position: absolute; z-index: 20; top: 108px; left: 40px; right: 40px; box-sizing: border-box; }
.wh-sheet-scroll {
  box-sizing: border-box; padding: 9px;
  max-height: calc(100vh - 108px - 40px);
  max-height: calc(100svh - 108px - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* its rows take the cut too: the hover tone and the focus ring, no line */
.wh-sheet .wh-row, .wh-sheet .wh-crow, .wh-sheet .wh-srow { border-radius: 0; }
.wh-sheet .wh-cut:hover::before { background-color: rgba(237, 228, 207, 0.07); }
/* the rows without a tile ("the idea", "the flat map", "own $wif") are
   44px tall at least: 16 + 2 x 14 */
/* the community rows keep their 12px from the reference, but in one
   stacked list their tiles line up with the product tiles above */
.wh-sheet .wh-crow { padding: 12px 16px; }
.wh-divider { height: 1px; margin: 8px 16px; background: rgba(237, 228, 207, 0.1); }
.wh-srow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center;
  min-height: 16px; padding: 14px 16px; font-size: 15px;
}
.wh .wh-srow { transition: background-color .16s ease-out; }

.wh-sheet-bar, .wh-menu-bars { display: none; }
.wh a.wh-srow--own { color: #CFEF5B; display: none; }
.wh-srow--own .wh-go { color: #CFEF5B; }

html.wh-locked { overflow: hidden; }

/* the sheet is for the one-column layout only */
@media (min-width: 1286px) and (pointer: fine), (min-width: 1286px) and (pointer: none) {
  .wh-sheet { display: none !important; }
}

/* --- 1285 and below, and touch screens at every width: one column,
   fixed sizes. The scaled two-column layout is for a mouse: scaled down
   from 1286 to 1439 its 44px targets draw at 39 to 43px, and a finger
   needs them at full size. A touch screen (pointer: coarse) 1286 or
   wider gets this layout instead, at the 900 to 1285 sizes. ----------- */
@media (max-width: 1285px), (pointer: coarse) {
  .wh-main {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
    gap: 64px; padding: 120px 40px 72px;
  }
  .wh-copy { padding-bottom: 0; }
  .wh-h1 { font-size: 88px; }
  .wh-card { width: 100%; max-width: 720px; }
  /* The card is narrower than 560 below 640. Columns size to their
     content first, so no value ever breaks onto two lines. */
  .wh-facts { grid-template-columns: repeat(3, minmax(max-content, 1fr)); }
  .wh-value { white-space: nowrap; }
}

/* --- 1285 and below, and touch screens: the nav folds into the menu
   button. Unscaled, the full nav needs 1220px with no gap at all (40 +
   684 + 2 x 228 + 40), so it folds where the hero turns to one column. */
@media (max-width: 1285px), (pointer: coarse) {
  .wh-nav { display: flex; justify-content: space-between; }
  .wh-cluster, .wh-dd { display: none; }
  .wh-cap--menu { display: flex; }
}

/* --- under 768 (the brief's phone layout) ---------------------------- */
@media (max-width: 767px) {
  .wh-nav { height: 84px; padding: env(safe-area-inset-top) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }
  .wh-main { padding: 40px max(20px, env(safe-area-inset-right)) 56px max(20px, env(safe-area-inset-left)); gap: 48px; }

  /* "own $wif on pons" moves into the menu; the menu is a 44px button of three pixel bars */
  .wh-cap--own { display: none; }
  .wh a.wh-srow--own { display: grid; }
  .wh-cap--menu { padding: 0; }
  .wh .wh-cap--menu .wh-item { width: 44px; height: 44px; padding: 0; justify-content: center; gap: 0; }
  .wh-menu-word, .wh-menu-chev { display: none; }
  .wh-menu-bars { display: inline-flex; }

  /* the sheet takes the whole screen, on the page black */
  .wh-sheet { position: fixed; z-index: 50; top: 0; left: 0; right: 0; bottom: 0; background: #0E0E0B; }
  .wh-sheet.wh-cut::before, .wh-sheet.wh-cut::after { display: none; }
  /* the close bar on top and "own $wif on pons" at the foot stay put; the list between them scrolls */
  .wh-sheet-scroll {
    display: flex; flex-direction: column; height: 100%; box-sizing: border-box; max-height: none; overflow: hidden;
    padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  }
  .wh-sheet-bar { display: flex; justify-content: flex-end; flex: none; margin-bottom: 8px; }
  .wh-sheet-x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #EDE4CF; cursor: pointer; }
  .wh-sheet-x:hover { color: #CFEF5B; }
  .wh-sheet .wh-stat { display: none; }
  .wh-sheet .wh-rtitle { flex-wrap: wrap; row-gap: 6px; }
  .wh-sheet .wh-pfoot { display: none; }
  .wh-sheet .wh-rname { font-size: 17px; }
  .wh-sheet-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .wh a.wh-srow--own { flex: none; margin-top: 16px; min-height: 20px; justify-content: space-between; }
  .wh-sheet [data-sheet-community] { margin-bottom: 24px; }

  .wh-h1 { font-size: clamp(44px, 12.3vw, 100px); }
  .wh-lede { font-size: 17px; }
  .wh-copy { width: 100%; gap: 28px; }
  .wh-ctas { flex-direction: column; align-items: stretch; gap: 10px; }
  .wh-ctas .wh-cta, .wh-ctas .wh-txt { width: 100%; height: 48px; box-sizing: border-box; justify-content: space-between; }
  .wh-ctas .wh-txt { padding: 0 21px; }

  .wh-card { padding: 0 21px 25px; gap: 20px; }
  /* the banner: 160px tall, the same crop centre, the 1x file (it draws under 2 x at this size anyway) */
  .wh-ban { margin: 1.5px -19.5px 0; height: 160px; background-image: url("../images/hackathon-bridge@1x.webp"); background-size: auto 280px; }
  /* the tags share a row and wrap when they cannot: the right one grows after the deadline */
  .wh-ban { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6px; padding: 12px 10px 0 14px; box-sizing: border-box; }
  .wh-tag { position: static; }
  .wh-card-head { margin-top: 0; }
  .wh-card-title { font-size: 32px; }
  .wh-facts { grid-template-columns: auto auto auto; justify-content: space-between; gap: 12px; }
  .wh-value { white-space: normal; }
  .wh-judges { display: contents; }
  .wh-judging .wh-label { flex: 0 0 100%; margin: 0 0 4px; }
  .wh-card-ctas { flex-direction: column; }
  .wh-card-ctas .wh-cta { width: 100%; justify-content: space-between; }
}