/* ===========================================================================
   Yumee house style — fonts, base, texture, type scale.  CANONICAL FILE.

   Loads after yumee.tokens.css. Font files resolve relative to THIS file, so
   the whole `design/` folder is vendored as a unit.

   One family does the reading, self-hosted, no CDN anywhere:

     Unageo  — everything: body, UI, labels, and in its heavier cuts the
               headings (600), a landing headline and the wordmark (800).
               Five files: 400, 500, 600 and Black for 800–900.
     Mali    — the scribble of the marketing site (its margin notes). It is
               not declared here and not shipped to apps: the site declares
               it in its own skin.css from `fonts/mali-medium.woff2`, which
               travels to the site alone.
   =========================================================================== */

@font-face {
    font-family: 'Unageo';
    src: url('fonts/unageo-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Unageo';
    src: url('fonts/unageo-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Unageo';
    src: url('fonts/unageo-semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
/* 700 is not a cut of its own: a bold (700) lands on Black. Use 600 for
   emphasis — `b` and `strong` are set to it below. */
@font-face {
    font-family: 'Unageo';
    src: url('fonts/unageo-black.woff2') format('woff2');
    font-weight: 800 900;
    font-style: normal;
    font-display: swap;
}

/* ---------------------------------------------------------------- base ---- */

.yu, .yu-root {
    background: var(--yu-bg);
    color: var(--yu-ink);
    font-family: var(--yu-font);
    font-weight: var(--yu-w-body);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.yu :where(b, strong), .yu-root :where(b, strong) { font-weight: 600; }

/* Every box measures its padding and border inside its width: a 46px field
   is 46px, a nav item fits its rail. Zero specificity, so an app may differ. */
:where(.yu, .yu-root), :where(.yu, .yu-root) *, :where(.yu, .yu-root) *::before, :where(.yu, .yu-root) *::after { box-sizing: border-box; }

/* ------------------------------------------------- no sideways scroll ---- */
/* A phone page must never pan left and right. It has happened in these apps
   more than once — a wide table, a nowrap row, a badge hanging off a card, an
   input under 16px that makes iOS zoom in — and it always reads as broken.

   This block is the safety net, not the fix. The fix is the element that is
   too wide; `node Yumee/dev/check-overflow.mjs <url>` names it at 360 and
   390 px even when the net below hides the scroll. `clip`, not `hidden`:
   `hidden` makes an ancestor a scroll container and breaks `position: sticky`.
   The `hidden` line first is the fallback for browsers without `clip`.

   Every rule under `:where()` has zero specificity, so an app class always
   wins over it. */

body.yu, body.yu-root {
    overflow-x: hidden;
    overflow-x: clip;
    overflow-wrap: break-word;
}
html:has(> body.yu), html:has(> body.yu-root) { overflow-x: clip; }

:where(.yu, .yu-root) :where(img, video, canvas, iframe, table, pre) { max-width: 100%; }
:where(.yu, .yu-root) :where(pre) { overflow-x: auto; }

/* iOS zooms the page into any focused field under 16px, and a zoomed page
   pans sideways. Fields on a phone are 16px, whatever the desktop size is. */
@media (max-width: 760px) {
    :where(.yu, .yu-root) :where(input, select, textarea) { font-size: max(16px, 1em); }
}

/* Anything toggled with the `hidden` attribute stays hidden, even when a
   class gives it `display: grid` or `flex` (which would otherwise win). */
:where(.yu, .yu-root) [hidden] { display: none !important; }

/* --------------------------------------------------------------- grain ---- */
/* One very fine paper grain, page-wide, behind everything. `class="yu-grain"`
   goes on <body> and nowhere else — a texture per card reads as dirt. */

.yu-grain { position: relative; }

.yu-grain::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background-image: var(--yu-grain);
    background-size: 120px 120px;
    opacity: var(--yu-grain-opacity);
    mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
    .yu-grain::after { opacity: calc(var(--yu-grain-opacity) * .5); }
}

/* ---------------------------------------------------------------- type ---- */
/* Print all the way down, the weight and the tracking doing the work: a
   48px SemiBold page title tracked tight over an 11px wide-set label, and
   nothing in between competing. */

.yu-display,
.yu-h1 {
    font-family: var(--yu-font-head);
    font-weight: var(--yu-w-head);
    font-size: clamp(2.1rem, 1.3rem + 2.4vw, 3rem);      /* 34–48px */
    line-height: 1.08;
    letter-spacing: var(--yu-track-display);
    margin: 0 0 .35em;
}

/* The one big headline of a landing page. Never inside an app. */
.yu-hero {
    font-family: var(--yu-font-head);
    font-weight: var(--yu-w-hero);
    font-size: clamp(2.6rem, 1.4rem + 4.2vw, 4.4rem);
    line-height: 1.02;
    letter-spacing: -.035em;
    margin: 0 0 .3em;
}

.yu-h2 {
    font-family: var(--yu-font-head);
    font-weight: var(--yu-w-head);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem);      /* 24–30px */
    line-height: 1.15;
    letter-spacing: var(--yu-track-head);
    margin: 0 0 .45em;
}

.yu-h3 {
    font-family: var(--yu-font-head);
    font-weight: var(--yu-w-head);
    font-size: 1.25rem;                                  /* 20px */
    line-height: 1.25;
    letter-spacing: var(--yu-track-head);
    margin: 0 0 .4em;
}

/* The second half of a page title, in purple: "Cull a shoot in minutes,
   <span class="yu-accent">not evenings.</span>" It wraps as one piece. */
.yu-accent { color: var(--yu-purple); display: inline-block; }

/* A big number: "1,4", "72 %", "7 days". */
.yu-figure {
    font-family: var(--yu-font-head);
    font-weight: var(--yu-w-head);
    font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);     /* 32–44px */
    line-height: 1;
    letter-spacing: var(--yu-track-display);
    font-variant-numeric: tabular-nums;
    margin: 0;
}

/* The small wide-set uppercase label that names every card and every field.
   Quiet colour, never heavy enough to compete with what it introduces. */
.yu-label {
    font-family: var(--yu-font);
    font-weight: var(--yu-w-ui);
    font-size: .6875rem;                                 /* 11px */
    line-height: 1.4;
    letter-spacing: var(--yu-track-label);
    text-transform: uppercase;
    color: var(--yu-ink-faint);
    margin: 0 0 .6em;
}

.yu-lead  { font-size: 1.0625rem; line-height: 1.55; color: var(--yu-ink-soft); max-width: var(--yu-measure); }
.yu-muted { color: var(--yu-ink-soft); }
.yu-faint { color: var(--yu-ink-faint); }
.yu-small { font-size: .8125rem; }
.yu-note  { font-size: .8125rem; line-height: 1.55; color: var(--yu-ink-soft); margin: 0; }

/* The primary text of a list row: a clip name, a subject, a task. */
.yu-row-title {
    font-family: var(--yu-font-head);
    font-weight: var(--yu-w-head);
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: -.01em;
}

/* The scribble: Mali, for the marketing site's margin remark. Not in apps. */
.yu-scribble, .yu-hand { font-family: var(--yu-font-scribble); font-weight: 500; }

/* Native headings participate when a page uses the shared root. */
.yu h1, .yu h2, .yu h3, .yu-root h1, .yu-root h2, .yu-root h3 {
    font-family: var(--yu-font-head);
    font-weight: var(--yu-w-head);
    letter-spacing: var(--yu-track-head);
}

/* --------------------------------------------------------------- focus ---- */

.yu :focus-visible,
.yu-root :focus-visible {
    outline: 2px solid var(--yu-purple);
    outline-offset: 2px;
    border-radius: var(--yu-r-sm);
}

/* --------------------------------------------------------------- layout --- */

.yu-wrap {
    width: 100%;
    max-width: var(--yu-page);
    margin-inline: auto;
    padding-inline: var(--yu-gutter);
}

.yu-stack > * + * { margin-top: var(--yu-gap); }
.yu-row  { display: flex; align-items: center; gap: var(--yu-gap); }
.yu-row--wrap { flex-wrap: wrap; }
.yu-spacer { flex: 1 1 auto; }

.yu-grid {
    display: grid;
    gap: var(--yu-gap-lg);
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}

.yu-section { padding-block: clamp(40px, 7vw, 96px); }

.yu-hidden { display: none !important; }
.yu-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Selection is lavender, like everything else that lights up. */
.yu ::selection, .yu-root ::selection { background: var(--yu-lavender); }

/* Motion is tiny and optional. */
@media (prefers-reduced-motion: reduce) {
    .yu *, .yu-root * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}