/* celebrity-person skeleton: structure only. Colour, type, ornament and where each
   decorative object sits are the variant's (variants/*.css); everything painted here
   comes from --v-* tokens.

   One markup serves every skin: the hero carries a copy column, a stage (the hero art
   plus optional scene photos, a pfp card, round badges and doodles), an altar row of
   candles and a string of lights. A skin shows what its look needs and hides the rest.

   Layout knobs a variant may turn (never the grid properties themselves, or the phone
   breakpoint below would lose to the variant's later rule):
     --cel-top-h              top bar height
     --cel-hero-cols          hero columns (desktop)
     --cel-hero-rows          hero rows (desktop)
     --cel-hero-areas         hero areas (desktop), default "copy stage" "altar altar"
     --cel-hero-areas-phone   hero areas (phone), default "copy" "stage" "altar"
     --cel-hero-gap           column gap (desktop)
     --cel-hero-pad           hero padding (desktop)
     --cel-hero-pad-phone     hero padding (phone)
     --cel-hero-minh          hero min-height (desktop), default one screen under the top bar
     --cel-stage-h            stage height (desktop)
     --cel-stage-align        stage align-self (desktop), center | stretch
     --cel-stage-h-phone      stage height (phone)
     --cel-lights-h           height of the light string
   app.js adds [data-cel-len="s|m|l"] to the headline (short/medium/long copy) and, when a
   skin sets --cel-fit: stack on the headline, regroups its words into .cel-line rows sized
   to fill the column within --cel-fit-h. A skin that sets --cel-motes: <n> gets n seeded
   .cel-mote particles over the lit flames (motion allowed only); --cel-tone-dark/mid/light
   (+ --cel-tone-cuts) colour the #cel-tritone filter. */

:root { --cel-top-h: 64px; }
.cel-app { min-height: 100vh; position: relative; }
/* Filter defs: zero-size, never display:none (a hidden defs block breaks url() filters). */
.cel-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- top bar */
.cel-top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 22px;
  height: var(--cel-top-h);
  padding: 0 var(--v-pad-x);
}
/* a long name gives way (ellipsis) before the bar runs off a narrow screen */
.cel-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; flex: 0 1 auto; text-decoration: none; }
.cel-brand__mark { width: 36px; height: 36px; flex: none; object-fit: cover; }
.cel-brand__name { white-space: nowrap; min-width: 0; overflow-x: clip; text-overflow: ellipsis; }
.cel-brand__tick { white-space: nowrap; flex: none; }
/* The nav only takes the room left over (basis 0), so it gives way before the name does;
   its first link's auto margin keeps the links to the right while they fit. */
.cel-top__nav { display: flex; flex: 1 1 0; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cel-top__nav .wl-nav__link:first-child { margin-left: auto; }
.cel-top__nav::-webkit-scrollbar { display: none; }
.cel-top__nav .wl-nav__link { padding: 8px 11px; white-space: nowrap; text-decoration: none; }
/* app.js flags a nav that scrolls: its far end fades instead of cutting a word */
.cel-top__nav.is-clipped { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
.cel-flow .wl-sec { scroll-margin-top: var(--cel-top-h); }
.cel-top__net { flex: none; white-space: nowrap; }

/* ---- hero */
.cel-main { position: relative; }
.cel-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: var(--cel-hero-minh, calc(100vh - var(--cel-top-h)));
  display: grid;
  grid-template-columns: var(--cel-hero-cols, minmax(0, 0.94fr) minmax(0, 1.06fr));
  grid-template-rows: var(--cel-hero-rows, minmax(0, 1fr) auto);
  grid-template-areas: var(--cel-hero-areas, "copy stage" "altar altar");
  column-gap: var(--cel-hero-gap, clamp(24px, 4vw, 64px));
  padding: var(--cel-hero-pad, 0 var(--v-pad-x));
}
.cel-hero__ground { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.cel-lights {
  position: absolute; left: 0; right: 0; top: 0; z-index: 5;
  height: var(--cel-lights-h, 84px);
  pointer-events: none;
}
.cel-lights__wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cel-lights__wire path { fill: none; vector-effect: non-scaling-stroke; }
.cel-bulb { position: absolute; left: var(--x, 50%); top: var(--y, 50%); }

.cel-hero__copy { grid-area: copy; position: relative; z-index: 3; min-width: 0; align-self: center; }
.cel-hero__headline { margin: 0; overflow-wrap: break-word; }
.cel-hero__headline .cel-line { display: block; width: max-content; max-width: none; white-space: nowrap; }
.cel-squiggle { display: block; overflow: visible; }
.cel-squiggle path { fill: none; }
.cel-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.cel-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.cel-meta__item { margin: 0; }

.cel-hero__stage {
  grid-area: stage;
  position: relative; z-index: 2;
  min-width: 0;
  height: var(--cel-stage-h, auto);
  align-self: var(--cel-stage-align, center);
}
.cel-sash { position: absolute; z-index: 5; white-space: nowrap; pointer-events: none; }
.cel-photo { margin: 0; position: absolute; }
.cel-photo--main { z-index: 2; }
.cel-photo__frame { position: relative; overflow: hidden; }
.cel-photo__frame .wl-hero-img, .cel-photo__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cel-card { position: absolute; z-index: 3; }
.cel-card__img { display: block; width: 100%; object-fit: cover; }
.cel-badges { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.cel-badge { position: absolute; display: grid; place-items: center; text-align: center; }
.cel-badge__img { position: absolute; object-fit: cover; }
.cel-badge__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cel-doodle { position: absolute; z-index: 5; overflow: visible; pointer-events: none; }
.cel-doodle path { fill: none; }

.cel-altar { grid-area: altar; position: relative; z-index: 4; pointer-events: none; }
.cel-motes { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.cel-mote { position: absolute; }
.cel-altar__ledge { position: absolute; left: 0; right: 0; bottom: 0; }
.cel-candle { position: absolute; }
.cel-flame { position: absolute; display: block; }

/* ---- band, flow, footer */
.cel-band { position: relative; z-index: 6; }
/* sections may slide in from the side: they never widen the page while they wait
   (clip, not hidden: no scroll container, so sticky heads inside still stick) */
.cel-flow { position: relative; padding-bottom: clamp(72px, 10vw, 140px); overflow-x: clip; }
.cel-footer { position: relative; padding: 36px var(--v-pad-x) 48px; }

/* ---- phone */
@media (max-width: 860px) {
  .cel-hero {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: var(--cel-hero-areas-phone, "copy" "stage" "altar");
    padding: var(--cel-hero-pad-phone, 0 var(--v-pad-x));
  }
  .cel-hero__stage { height: var(--cel-stage-h-phone, auto); align-self: stretch; }
  .cel-top__nav, .cel-top__net { display: none; }
}