@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/* ══════════════════════════════════════════════════════════════════════
   THE LEARNIT WORDMARK — one definition, every page.

   Matches Jordan's real logo: "Learn" upright, "It" italic, high-contrast
   serif (Playfair Display 600).

   Before this file the wordmark was drawn 14 different ways across 135
   pages — bold italic Inter on the year pages and most games, upright
   Instrument Serif on the pages that load common-features.js, system
   sans on others. Nothing agreed with the actual logo.

   HOW IT IS APPLIED
   Every wordmark element carries `li-wm`, and the "It" half carries
   `li-wm-it`. Classes are ADDED to the markup that was already there; no
   new elements are introduced and no colours are set. That restraint is
   deliberate and was arrived at the hard way — see the two notes below.

   So this file sets the LETTERFORMS ONLY — family, weight, and the
   upright/italic split that defines the mark. Colour stays with each page,
   which already gets it right: brand black + blue on white grounds, white
   + pale blue on dark ones.

   The old decorative gradient slash behind the wordmark is gone. It was
   never part of the real logo.
   ══════════════════════════════════════════════════════════════════════ */

.li-wm {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  font-weight: 600 !important;
  /* upright is set on the CONTAINER, so the bare "Learn" text inherits it.
     See the WHY NO SPAN AROUND "Learn" note at the foot of this file — this
     line is what makes that work. */
  font-style: normal !important;
  letter-spacing: -0.005em;
  /* the old wordmark was often 900-weight italic sans, which sat on a
     different baseline — this keeps the optical size steady */
  line-height: 1.06;
}

/* "Learn" — upright. Forced, because a number of pages set font-style
   italic on the whole wordmark and only the "It" should slant. */
.li-wm-learn {
  font-style: normal !important;
  font-weight: inherit !important;
}

/* "It" — italic. The slant is the defining feature of the mark. */
.li-wm-it {
  font-style: italic !important;
  font-weight: inherit !important;
}

/* ── COLOUR: deliberately not set here ─────────────────────────────────
   This file sets letterforms and nothing else. I tried making brand black +
   brand blue the default here and measured the result across all 133 pages:
   it painted "Learn" near-black on 14 dark headers (the arcade games, the
   Year 12 paper covers, the rewards screen, design-directions) at contrast
   ratios of 1.02–1.37 — i.e. invisible — with ~20 more suspect.

   The reason is inheritance. Those pages set a light colour on the wordmark's
   PARENT and let both halves inherit it. A rule targeting the child beats
   inherited colour, so a "default" here is not a default at all — it wins,
   silently, exactly where it must not.

   So colour stays with each page, which already gets it right for its own
   ground. The one page whose wordmark genuinely did not match the logo —
   auth.html drew the whole word in blue — is fixed in that page's own CSS.
   ────────────────────────────────────────────────────────────────────── */

/* Kill the decorative slash wherever a page still draws one behind the
   wordmark — it is not in the logo. */
.li-wm::before { content: none !important; }

/* ── WHY NO SPAN AROUND "Learn" ────────────────────────────────────────
   Only the "It" half is wrapped. "Learn" is left as bare text inside the
   container, and gets its upright Playfair by inheriting from `.li-wm`.

   The first version did wrap it, in a <span class="li-wm-learn">. That
   broke pages quietly and at scale, because a wordmark written as

       <a class="nav-logo">Learn<span>It</span></a>

   is styled by page rules like `.nav-logo span { color: … }` — rules
   written when there was exactly ONE span in there, the "It". Adding a
   second span silently pulled "Learn" into every one of those rules. The
   sign-in card went entirely blue; the year hub navs went entirely pale
   blue. A contrast sweep over all 133 pages is what surfaced it.

   Not introducing an element is the fix that cannot regress: no new
   element, no new CSS matches, and every page's existing two-tone colouring
   keeps working untouched.

   The 58 pages that already ship <span class="logo-learn">Learn</span> DO
   carry li-wm-learn — that element was theirs to begin with, so tagging it
   adds no new match.
   ────────────────────────────────────────────────────────────────────── */