/* YVM-213 festive: a starter skin built from the Look toolkit (config/templates.php 'look'). Its colours, fonts, notes
   and button are tokens an owner changes on the Look page; this sheet draws the world around them: a starry hero in
   the header's colour (top-bg, so its text is the header's checked pairs, and the Band header turns it light), a wave
   down into the white notes area, a display serif headline and the board title on a script ribbon. No images. */

/* The hero: the header's navy, a field of small stars, its text in the header's colours. */
.vm-t-festive .vm-top{border-bottom:0}
.vm-t-festive .vm-hero{position:relative;isolation:isolate;padding-bottom:calc(var(--space-step-7) + 3rem);color:var(--top-ink);
  background:radial-gradient(1.5px 1.5px at 12% 18%,rgba(255,255,255,.9),transparent),radial-gradient(1px 1px at 28% 62%,rgba(255,255,255,.7),transparent),
    radial-gradient(2px 2px at 46% 12%,rgba(255,226,154,.9),transparent),radial-gradient(1px 1px at 63% 40%,rgba(255,255,255,.75),transparent),
    radial-gradient(1.5px 1.5px at 78% 22%,rgba(255,255,255,.85),transparent),radial-gradient(1px 1px at 88% 66%,rgba(255,255,255,.6),transparent),
    radial-gradient(2px 2px at 6% 78%,rgba(255,226,154,.8),transparent),radial-gradient(1px 1px at 52% 84%,rgba(255,255,255,.55),transparent),var(--top-bg)}
.vm-t-festive .vm-hero .vm-title{color:var(--top-ink)}
.vm-t-festive .vm-hero .vm-lede{color:var(--top-ink)}
.vm-t-festive .vm-hero .vm-hero-tag{color:var(--top-muted)}

/* The wave: scallops of the band below rising into the navy, down into the white notes area. */
.vm-t-festive .vm-hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2.5rem;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 50% 100%,var(--band) 62%,transparent 63%) 0 100%/4rem 2.5rem repeat-x,linear-gradient(transparent 60%,var(--band) 60%)}

/* The ribbon: the board title in the notes' script, white on the button colour, with notched ends. */
.vm-t-festive .vm-hero .vm-eyebrow{display:inline-block;margin-bottom:var(--space-step-4);padding:.25rem 1.5rem;background:var(--action);color:var(--on-action);
  font-family:var(--hand);font-weight:var(--note-weight);font-size:1.5rem;letter-spacing:0;text-transform:none;line-height:1.3;
  clip-path:polygon(0 0,100% 0,calc(100% - .75rem) 50%,100% 100%,0 100%,.75rem 50%)}
.vm-t-festive .vm-title{font-size:clamp(2.25rem,7vw,3.75rem)}
.vm-t-festive.vm-h-centred .vm-hero-text{text-align:center}
.vm-t-festive.vm-h-centred .vm-hero .vm-lede{margin-inline:auto}
.vm-t-festive.vm-h-centred .vm-ctas{justify-content:center}
/* YVM-207: the why-points and the headline's accent words sit on the starry navy hero too, so they take its header
   colours (top-ink and top-link on top-bg, pairs the contrast check covers). */
.vm-t-festive .vm-hero .vm-why-point,.vm-t-festive .vm-hero .vm-why-title{color:var(--top-ink)}
.vm-t-festive .vm-hero .vm-why-icon,.vm-t-festive .vm-hero .vm-accent{color:var(--top-link)}