/* ===========================================================================
   Yumee hub — the marketing layer.

   Since 2026-09-23 the look this file introduced (print headings, lavender
   hairlines and soft shadows, sentence-case links, the purple wordmark with
   nothing beside it) is the house style itself, in lib/design/ — every app
   wears it. What stays here is what only a marketing site draws: the scribble
   (Mali) for margin notes and speech, the gradient page heads that end in a
   wave, the footer.

   References: docs/brand/references/hub/. Tokens: site.css (the bridge).
   =========================================================================== */

/* Mali, the scribble. Declared here, not in the house style: an app never
   loads it (lib/design ships the file to the site alone). */
@font-face {
    font-family: 'Mali';
    src: url('../design/fonts/mali-medium.woff2') format('woff2');
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
}

/* The scribble: the only handwriting left, and only on the site. The house
   `.yu-note` is small print; on the hub it is a scribbled remark. */
.yu :is(.yu-margin-note, .yu-note, .yu-say, .yu-hand) { font-family: var(--scribble); font-weight: 500; }
.yu-note { font-size: 1.125rem; line-height: 1.4; color: var(--ink); }

.yu-stat { min-height: 136px; }

/* ---------------------------------------------------------------- wave ---- */
/* The curve where a gradient head turns into paper. Two layers: a pale one
   behind, the paper in front. `color` is the paper it opens onto. */

.horizon {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 0;
    display: block;
    width: 100%;
    height: var(--wave-h);
    color: var(--bg);
    pointer-events: none;
}
.horizon__back { opacity: .55; }

/* ----------------------------------------------------------- page band ---- */
/* The head of every inner page: a gradient field that starts behind the
   floating header and ends in the wave. Pull it up under the header by the
   header's height in flow (its height plus the gap above it). */

:root { --wave-h: clamp(40px, 6vw, 88px); }

.page-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: calc(-1 * (var(--header-h) + var(--header-gap)));
    padding-top: calc(var(--header-total) + clamp(28px, 4.5vw, 56px));
    padding-bottom: calc(var(--wave-h) + clamp(4px, 1.5vw, 16px));
    background: var(--grad-band);
}
.page-band > .yu-wrap { position: relative; z-index: 1; }

.page-band .page-head,
.page-band .shop-head { margin-bottom: 0; }

.page-band .yu-label { color: var(--purple-ink); }
.page-title__accent { color: var(--purple-deep); }
.page-band .yu-lead,
.page-band .shop-head__lead { font-size: 1.0625rem; color: var(--ink-soft); }

.page-band .page-title,
.page-band .shop-head__title { font-size: clamp(2.1rem, 1.2rem + 3vw, 3.25rem); }

/* ------------------------------------------------------------- footer ---- */

.site-footer { border-top: 1px solid var(--line-card); }