/* DAILY_20260905 — the wordmark changes with the day.
 *
 * RATE takes today's film: its backdrop shows THROUGH the house orange as a
 * duotone, so the brand still reads as orange and the film reads as texture
 * inside it. The image layer sits on top in luminosity, over a solid accent
 * — hue from the house, light from the film. Everything else in the masthead
 * is untouched; without `.is-daily` (no pick, signed out, any failure) this
 * file does nothing, which is the honest default.
 *
 * ⛔ Tokens only. The two tunables are --daily-lift (how much the film's dark
 * parts are lifted so thin strokes never go black) and --daily-mix. */
.wordmark.is-daily {
  --daily-lift: 42%;          /* light theme: a burnt orange needs more lift */
  --daily-mix: 100%;
}
:root[data-theme="dark"] .wordmark.is-daily { --daily-lift: 18%; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wordmark.is-daily { --daily-lift: 18%; }
}
.wordmark.is-daily span {
  background-image:
    linear-gradient(color-mix(in srgb, var(--ground) var(--daily-lift), transparent),
                    color-mix(in srgb, var(--ground) var(--daily-lift), transparent)),
    var(--daily),
    linear-gradient(var(--accent), var(--accent));
  background-size: cover, cover, cover;
  background-position: center, center 32%, center;
  background-blend-mode: screen, luminosity, normal;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* the hover that turns NIT orange still shows on the wordmark; RATE keeps its film */
.brandbtn:hover .wordmark.is-daily span { filter: saturate(1.15) brightness(1.06); }
/* the slug becomes the film's door */
.slug.is-daily { cursor: pointer; color: var(--ink-2); }
.slug.is-daily:hover, .slug.is-daily:focus-visible {
  color: var(--accent); text-decoration: underline; text-underline-offset: 3px; outline: none;
}

/* DAILYFACE_20260905 — the day's letterforms. The wordmark keeps the BOX of
   the house face at every tier (measured: 104×27 ≥1024, 88×23 ≤900, 72×19
   ≤430), so nothing in the masthead's arithmetic moves; daily.js shrinks the
   type until it sits inside. --daily-face is set per day from
   web/fonts/daily/faces.json; without it this block is inert. */
.wordmark.is-face {
  --wm-w: 104px; --wm-h: 27px; --wm-size: 27px;
  display: inline-flex; align-items: center; justify-content: flex-start;
  width: var(--wm-w); height: var(--wm-h); white-space: nowrap; overflow: visible;
  font-family: var(--daily-face), var(--font-display, inherit);
  font-weight: var(--daily-weight, 700);
  font-size: var(--wm-size); line-height: 1; letter-spacing: .01em;
}
@media (max-width: 900px) { .wordmark.is-face { --wm-w: 88px; --wm-h: 23px; --wm-size: 22px; } }
@media (max-width: 430px) { .wordmark.is-face { --wm-w: 72px; --wm-h: 19px; --wm-size: 18px; } }