/* wild-meme skeleton: structure only. Colour, type, ornament and motion are the
   variant's (variants/*.css); everything here paints from --v-* tokens or nothing.

   The hero is one grid (marquee / stage / crawl). The stage is a second grid whose
   blocks (desk = link icons, screen = the art, copy = headline + calls to action,
   stack = small dialogs/cards) a skin arranges by turning these knobs, never the grid
   properties themselves, so the phone breakpoint at the bottom always wins:

     --wm-top-h                  top bar height
     --wm-hero-inset / -radius   space and corners around the hero (a TV bezel)
     --wm-stage-cols / -rows / -areas   the stage grid (area names: desk screen copy stack)
     --wm-stage-pad / -gap       stage padding and gap
     --wm-<block>-area           which area a block sits in (two blocks may share one)
     --wm-<block>-align/-justify its alignment inside that area
     --wm-screen-w               the screen's width inside its area
     --wm-glass-ar               the picture's aspect ratio (auto = fill the area)
     --wm-copy-maxw / -margin    the headline block's width and offset
     --wm-stack-maxw / -margin / -dir / -gap
     --wm-desk-display           show the link icons (flex) or not (none) */

:root { --wm-top-h: 44px; }

.wm-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

.wm-app { min-height: 100vh; display: flex; flex-direction: column; }
.wm-main { flex: 1 0 auto; min-width: 0; }

/* ---- top bar */
.wm-top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  height: var(--wm-top-h);
  padding: 0 var(--wm-top-pad, 14px);
  min-width: 0;
}
.wm-brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; text-decoration: none; }
.wm-brand__mark { width: 26px; height: 26px; object-fit: cover; flex: none; }
.wm-brand__name, .wm-brand__tick { white-space: nowrap; }
.wm-brand__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wm-brand__tick { flex: none; }
.wm-top__nav { flex: 1 1 0; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.wm-top__nav::-webkit-scrollbar { display: none; }
.wm-top__nav .wl-nav__link { flex: none; white-space: nowrap; text-decoration: none; }
.wm-top__status { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.wm-led { flex: none; width: 8px; height: 8px; border-radius: 50%; }

/* ---- hero */
.wm-hero {
  position: relative; isolation: isolate; overflow: hidden;
  margin: var(--wm-hero-inset, 0px);
  border-radius: var(--wm-hero-radius, 0px);
  min-height: calc(100vh - var(--wm-top-h) - 2 * var(--wm-hero-inset, 0px));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.wm-hero__bg, .wm-rain { position: absolute; inset: 0; pointer-events: none; }
.wm-hero__bg { z-index: -1; }
.wm-rain { z-index: 1; overflow: hidden; }

.wm-alarm { grid-row: 1; position: relative; z-index: 9; min-width: 0; }
.wm-crawl { grid-row: 3; position: relative; z-index: 9; display: flex; align-items: stretch; min-width: 0; }
.wm-crawl__label { flex: none; display: flex; align-items: center; white-space: nowrap; }
.wm-crawl__track { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }

.wm-stage {
  grid-row: 2;
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: var(--wm-stage-cols, minmax(0, 1fr) minmax(0, 1fr));
  grid-template-rows: var(--wm-stage-rows, minmax(0, 1fr) auto);
  grid-template-areas: var(--wm-stage-areas, "copy screen" "copy stack");
  gap: var(--wm-stage-gap, 24px);
  padding: var(--wm-stage-pad, 32px);
  min-width: 0; min-height: 0;
}

/* desk: the project links laid out as desktop icons */
.wm-desk {
  grid-area: var(--wm-desk-area, desk);
  display: var(--wm-desk-display, none);
  align-self: start;
  min-width: 0;
}
.wm-desk .wl-links { display: flex; flex-direction: column; flex-wrap: nowrap; }

/* screen: the art (a window, a monitor, a TV tube) */
.wm-screen {
  grid-area: var(--wm-screen-area, screen);
  align-self: var(--wm-screen-align, center);
  justify-self: var(--wm-screen-justify, center);
  width: var(--wm-screen-w, 100%);
  margin: 0;
  position: relative; z-index: 3;
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
}
.wm-screen__bar { flex: none; display: flex; align-items: center; gap: 8px; min-width: 0; }
.wm-screen__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-screen__glass { position: relative; flex: 1 1 auto; aspect-ratio: var(--wm-glass-ar, auto); overflow: hidden; min-height: 0; }
.wm-screen__blur, .wm-media, .wm-fx, .wm-fx > i { position: absolute; inset: 0; }
.wm-media .wl-hero-img { width: 100%; height: 100%; object-fit: cover; }
.wm-crack { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wm-fx { pointer-events: none; }
.wm-osd, .wm-bug { position: absolute; pointer-events: none; }
.wm-bug__img { display: block; }

/* copy: kicker, headline, subhead, calls to action */
.wm-copy {
  grid-area: var(--wm-copy-area, copy);
  align-self: var(--wm-copy-align, center);
  justify-self: var(--wm-copy-justify, stretch);
  max-width: var(--wm-copy-maxw, none);
  margin: var(--wm-copy-margin, 0);
  position: relative; z-index: 5;
  min-width: 0;
}
.wm-copy__bar { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wm-kicker { margin: 0; min-width: 0; }
.wm-copy__body { display: flex; flex-wrap: wrap; align-items: flex-start; min-width: 0; }
.wm-copy__icon { flex: none; }
.wm-copy__text { flex: 1 1 0; min-width: 0; }
.wm-headline {
  margin: 0;
  font-family: var(--v-font-display);
  font-weight: var(--v-display-weight);
  letter-spacing: var(--v-display-tracking);
  line-height: var(--v-display-lh);
  text-transform: var(--v-display-case);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.wm-subhead { margin: 0; text-wrap: pretty; }
.wm-cta { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }

/* stack: small dialogs / cards around the art */
.wm-stack {
  grid-area: var(--wm-stack-area, stack);
  align-self: var(--wm-stack-align, start);
  justify-self: var(--wm-stack-justify, end);
  max-width: var(--wm-stack-maxw, 360px);
  margin: var(--wm-stack-margin, 0);
  position: relative; z-index: 4;
  display: flex; flex-direction: var(--wm-stack-dir, column); gap: var(--wm-stack-gap, 12px);
  min-width: 0;
}
.wm-dialog { position: relative; min-width: 0; }
.wm-dialog__bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wm-dialog__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-dialog__body { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.wm-dialog__icon { flex: none; }
.wm-dialog__text { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.wm-dialog__foot { display: flex; justify-content: center; gap: 8px; }
.wm-winbtns { flex: none; }


/* ---- sections + footer (tilted windows may lean out; the page never scrolls sideways) */
.wm-flow { position: relative; overflow-x: clip; }
.wm-footer { position: relative; }
.wm-footer__inner { padding: 32px var(--v-pad-x) 44px; }

/* ---- phone */
@media (max-width: 860px) {
  :root { --wm-top-h: 52px; }
  .wm-top__nav { display: none; }
  .wm-hero { min-height: 0; margin: var(--wm-hero-inset-phone, 0px); }
  .wm-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "screen" "copy" "stack";
    gap: 22px;
    padding: 22px 16px 30px;
  }
  .wm-desk { display: none; }
  .wm-screen { grid-area: screen; align-self: start; justify-self: stretch; width: 100%; }
  .wm-screen__glass { flex: none; aspect-ratio: var(--wm-glass-ar-phone, 1); }
  .wm-copy { grid-area: copy; align-self: start; justify-self: stretch; max-width: none; margin: 0; }
  .wm-stack { grid-area: stack; align-self: start; justify-self: stretch; max-width: none; margin: 0; }
}