/* cute-meme skeleton: structure only. Colour, type and ornament are the variant's
   (variants/*.css); everything here paints from --v-* tokens or not at all.
   Layout knobs a variant may turn (it sets the knob, never the grid property, so the
   breakpoints at the bottom keep winning):
     --cm-top-h, --cm-bar-h, --cm-top-pos     top strip height, the bar inside it, sticky|static
     --cm-page-maxw, --cm-page-mx, --cm-page-my, --cm-page-overflow   the page as a sheet (unset = full bleed)
     --cm-hero-cols, --cm-hero-rows, --cm-hero-areas     hero grid; areas: word, copy, stage
     --cm-hero-areas-phone   hero order on a phone      --cm-hero-peek  ribbon showing under the hero
     --cm-word-display       block shows the giant name wordmark (area "word")
     --cm-h1-xs|s|m|l|xl     headline size by headline length (app.js sets .cm-len-*)
     --cm-stage-h(-phone), --cm-stage-place, --cm-stage-pad   the art stage (height, where the box sits)
     --cm-box-w, --cm-box-maxw, --cm-box-r   the boxed art
     --cm-window-ratio       the art window             --cm-s1..4-{x,y,w,r}  stickers (percent of box / stage)
     --cm-intro-cols         portrait | story
     --cm-features-cols, --cm-gallery-cols, --cm-shot1-col, --cm-shot1-row, --cm-shot1-pos,
     --cm-quotes-cols, --cm-facts-cols, --cm-faq-cols, --cm-donut-cols */

:root {
  --cm-top-h: 84px;
  --cm-h1-s: clamp(3.1rem, 7.6vw, 7rem);
  --cm-h1-m: clamp(2.8rem, 6.2vw, 5.8rem);
  --cm-h1-l: clamp(2.4rem, 4.9vw, 4.6rem);
  --cm-h1-xl: clamp(2.1rem, 3.9vw, 3.7rem);
}

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

.cm-page {
  position: relative;
  width: min(var(--cm-page-maxw, 100%), calc(100% - 2 * var(--cm-page-mx, 0px)));
  margin: var(--cm-page-my, 0px) auto;
  overflow-x: var(--cm-page-overflow, clip);
}

/* ---- top strip + bar */
.cm-top {
  position: var(--cm-top-pos, sticky);
  top: 0;
  z-index: 40;
  height: var(--cm-top-h);
  padding: 0 var(--v-pad-x);
  display: flex;
  align-items: center;
  pointer-events: none;
}
.cm-top__bar {
  pointer-events: auto;
  flex: 1;
  min-width: 0;
  height: var(--cm-bar-h, 60px);
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 26px);
}
/* a long name gives way (ellipsis) before the bar runs off a narrow screen */
.cm-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; text-decoration: none; }
.cm-brand__mark { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; }
.cm-brand__name { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cm-brand__tick { white-space: nowrap; flex: none; }
.cm-top__nav {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: safe center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cm-top__nav::-webkit-scrollbar { display: none; }
.cm-top__nav .wl-nav__link { white-space: nowrap; text-decoration: none; }
.cm-top__nav .wl-nav__link:nth-child(n+6), .cm-top__nav .cm-nav-hide { display: none; }
.cm-top__get { flex: none; margin-left: auto; white-space: nowrap; text-decoration: none; }

/* ---- hero */
.cm-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--cm-hero-cols, minmax(0, 1fr) minmax(0, 1fr));
  grid-template-rows: var(--cm-hero-rows, minmax(0, 1fr));
  grid-template-areas: var(--cm-hero-areas, "copy stage");
  align-items: center;
  column-gap: var(--cm-hero-gap, clamp(24px, 4vw, 60px));
  row-gap: var(--cm-hero-row-gap, 8px);
  min-height: calc(100svh - var(--cm-top-h) - var(--cm-hero-peek, 0px) - 2 * var(--cm-page-my, 0px));
  padding: var(--cm-hero-pad, clamp(16px, 3vw, 36px) var(--v-pad-x) clamp(28px, 4vw, 52px));
}
.cm-hero__deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.cm-doodle { position: absolute; width: var(--s, 80px); height: var(--s, 80px); overflow: visible; }

.cm-hero__word { grid-area: word; display: var(--cm-word-display, none); margin: 0; min-width: 0; position: relative; z-index: 2; }
.cm-word { display: block; width: 100%; }

.cm-hero__copy { grid-area: copy; position: relative; z-index: 3; min-width: 0; }
.cm-hero__kicker { margin: 0 0 var(--cm-kicker-gap, 22px); }
.cm-chip { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; }
.cm-hero__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);
  font-size: var(--cm-h1-m);
  text-wrap: balance;
}
.cm-len-xs .cm-hero__headline { font-size: var(--cm-h1-xs, var(--cm-h1-s)); }
.cm-len-s .cm-hero__headline { font-size: var(--cm-h1-s); }
.cm-len-l .cm-hero__headline { font-size: var(--cm-h1-l); }
.cm-len-xl .cm-hero__headline { font-size: var(--cm-h1-xl); }
.cm-hero__subhead { margin: var(--cm-sub-gap, 24px) 0 0; max-width: 33rem; font-size: clamp(1.05rem, 1.35vw, 1.28rem); line-height: 1.5; text-wrap: pretty; }
.cm-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--cm-cta-gap, 32px); }
.cm-hero__cta .wl-btn__ca { display: none; } /* the tags row carries the address */
.cm-tags { list-style: none; margin: var(--cm-tags-gap, 24px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cm-tag { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cm-tag code { font-family: var(--v-font-mono); }

/* the stage: the boxed art in the middle, stickers around it */
.cm-hero__stage {
  grid-area: stage;
  position: relative;
  z-index: 1;
  min-width: 0;
  height: var(--cm-stage-h, min(620px, 76svh));
  display: grid;
  place-items: var(--cm-stage-place, center);
  padding-bottom: var(--cm-stage-pad, 0px);
}
.cm-floor { position: absolute; left: 50%; bottom: var(--cm-floor-y, 5%); width: var(--cm-floor-w, 62%); height: var(--cm-floor-h, 36px); translate: -50% 0; border-radius: 50%; pointer-events: none; }
.cm-box {
  position: relative;
  width: min(var(--cm-box-w, 84%), var(--cm-box-maxw, 560px));
  rotate: var(--cm-box-r, 0deg);
}
.cm-box__tab { display: var(--cm-tab-display, block); }
.cm-box__band { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cm-box__name { display: block; flex: 1; min-width: 0; overflow: hidden; }
.cm-box__window { position: relative; overflow: hidden; isolation: isolate; }
.cm-media { position: relative; width: 100%; aspect-ratio: var(--cm-window-ratio, 5 / 4); }
.cm-media .wl-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cm-media.wl-media--pfp, .cm-media.wl-media--pfp-animated { aspect-ratio: var(--cm-window-ratio-square, 1); }
.cm-media.wl-media--post { aspect-ratio: auto; }
.cm-box__window:has(> .wl-media--none) { display: none; }
.cm-box__gloss { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cm-box__foot { margin: 0; }
.cm-box__burst { position: absolute; display: grid; place-items: center; }
.cm-box__burst-t { display: block; width: 76%; text-align: center; overflow: hidden; }

.cm-sticker { display: block; width: 100%; height: auto; }
.cm-bouncer {
  position: absolute;
  z-index: 4;
  left: var(--cm-s1-x, 60%);
  top: var(--cm-s1-y, 0%);
  width: var(--cm-s1-w, 34%);
  translate: 0 -100%;
  rotate: var(--cm-s1-r, 0deg);
}
.cm-bouncer .cm-sticker { transform-origin: 50% 100%; }
.cm-hero__stage > .cm-sticker { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: var(--w); rotate: var(--r, 0deg); }
.cm-sticker--2 { --x: var(--cm-s2-x, 2%); --y: var(--cm-s2-y, 66%); --w: var(--cm-s2-w, 22%); --r: var(--cm-s2-r, -8deg); }
.cm-sticker--3 { --x: var(--cm-s3-x, 78%); --y: var(--cm-s3-y, 60%); --w: var(--cm-s3-w, 20%); --r: var(--cm-s3-r, 9deg); }
.cm-sticker--4 { --x: var(--cm-s4-x, 4%); --y: var(--cm-s4-y, 4%); --w: var(--cm-s4-w, 18%); --r: var(--cm-s4-r, 6deg); }

/* The hero motion belongs to the whole box, not to the picture inside its window. */
.wl-hero-wobble .cm-media, .wl-motion-float .cm-media .wl-hero-img { animation: none; }
/* app.js adds .cm-tilting (motion allowed, fine pointer) and feeds --cm-px/--cm-py in -1..1. */
.cm-hero__stage.cm-tilting {
  transform: perspective(1400px) rotateY(calc(var(--cm-px, 0) * 4deg)) rotateX(calc(var(--cm-py, 0) * -3deg));
  transition: transform 0.6s var(--v-ease);
}

/* ---- ribbon (marquee) */
.cm-ribbon { position: relative; z-index: 5; }

/* ---- intro: the portrait beside the story (the first lore section lands here) */
.cm-intro {
  position: relative;
  display: grid;
  grid-template-columns: var(--cm-intro-cols, minmax(0, 0.8fr) minmax(0, 1.2fr));
  align-items: center;
  gap: var(--cm-intro-gap, clamp(28px, 5vw, 72px));
  max-width: calc(var(--v-maxw) + 2 * var(--v-pad-x));
  margin: 0 auto;
  padding: var(--cm-intro-pad, var(--v-sec-gap) var(--v-pad-x) 0);
}
.cm-intro--solo { grid-template-columns: minmax(0, 1fr); }
.cm-intro__portrait { position: relative; margin: 0; justify-self: center; width: min(100%, var(--cm-portrait-w, 400px)); }
.cm-intro__frame { position: relative; display: block; }
.cm-intro__img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.cm-intro__tag { position: absolute; }
.cm-intro__lore { min-width: 0; }
.cm-intro__lore > .wl-sec { padding: 0; }
.cm-intro__lore .wl-sec__inner { max-width: none; }

/* ---- the flow */
.cm-flow { padding-bottom: var(--cm-flow-end, clamp(72px, 10vw, 140px)); }
.cm-page .wl-features { grid-template-columns: var(--cm-features-cols, repeat(auto-fit, minmax(min(260px, 100%), 1fr))); }
.cm-page .wl-gallery { grid-template-columns: var(--cm-gallery-cols, repeat(3, minmax(0, 1fr))); }
.cm-page .wl-gallery[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.cm-page .wl-gallery[data-count="2"], .cm-page .wl-gallery[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cm-page .wl-gallery[data-count="3"] .wl-shot:first-child { grid-column: var(--cm-shot1-col, span 2); grid-row: var(--cm-shot1-row, span 2); }
.cm-page .wl-shot img { height: auto; aspect-ratio: var(--cm-shot-ratio, 16 / 9); }
.cm-page .wl-gallery[data-count="3"] .wl-shot:first-child img { position: var(--cm-shot1-pos, absolute); inset: 0; height: var(--cm-shot1-h, 100%); aspect-ratio: var(--cm-shot1-ratio, auto); }
.cm-page .wl-graphic--supply { grid-template-columns: minmax(0, 1fr); }
.cm-page .wl-donut { grid-template-columns: var(--cm-donut-cols, minmax(0, 1fr) minmax(0, 1fr)); align-items: center; justify-items: center; gap: clamp(28px, 5vw, 64px); }
.cm-page .wl-quotes { grid-template-columns: var(--cm-quotes-cols, repeat(auto-fit, minmax(min(280px, 100%), 1fr))); }
.cm-page .wl-facts { grid-template-columns: var(--cm-facts-cols, minmax(0, 1fr)); }
.cm-page .wl-faq { grid-template-columns: var(--cm-faq-cols, minmax(0, 1fr)); align-items: start; }

.cm-footer { position: relative; padding: var(--cm-foot-pad, 40px var(--v-pad-x) 48px); }

/* ---- section doodles: app.js hangs one of the hero's doodles beside each flow title */
.cm-flow .wl-sec__head, .cm-intro--solo .wl-sec__head { position: relative; width: fit-content; }
.cm-sec-doodle { position: absolute; pointer-events: none; }

/* ---- breakpoints (structure wins over any skin: skins only turn the knobs above) */
@media (max-width: 1400px) {
  .cm-top__nav .wl-nav__link:nth-child(n+5) { display: none; }
}
@media (max-width: 1100px) {
  .cm-top__nav { display: none; }
}
@media (max-width: 900px) {
  .cm-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: var(--cm-hero-areas-phone, "copy" "stage");
    min-height: 0;
  }
  .cm-hero__stage { height: var(--cm-stage-h-phone, min(100vw, 560px)); }
  .cm-intro { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .cm-page .wl-gallery[data-count] { grid-template-columns: minmax(0, 1fr); }
  .cm-page .wl-gallery[data-count="3"] .wl-shot:first-child { grid-column: auto; grid-row: auto; }
  .cm-page .wl-gallery[data-count="3"] .wl-shot:first-child img { position: static; height: auto; aspect-ratio: var(--cm-shot-ratio, 16 / 9); }
  .cm-page .wl-quotes { grid-template-columns: minmax(0, 1fr); }
  .cm-page .wl-facts { grid-template-columns: minmax(0, 1fr); }
  .cm-page .wl-faq { grid-template-columns: minmax(0, 1fr); }
  .cm-page .wl-donut { grid-template-columns: minmax(0, 1fr); }
  .cm-top__get-label { display: none; }
  .cm-flow .wl-sec__head, .cm-intro--solo .wl-sec__head { width: auto; }
}