/* ============================================================================
   Shinkai Sky — self-hosted family faces.
   ----------------------------------------------------------------------------
   Fraunces (display) + Hanken Grotesk (body) are the tinytoolsstack design
   system's faces, shared with the hub and every sibling tool. They replaced
   DM Serif Display + DM Sans, which are on the named-cliché blocklist.

   WHY SELF-HOSTED rather than the hub's Google Fonts @import: the extension
   pages run under an MV3 CSP that blocks remote stylesheets. A remote @import
   there fails SILENTLY and falls back to Georgia, which looks close enough to
   pass a glance but is not the design. Self-hosting is the only mechanism that
   works on BOTH the served pages and the extension, so both use it.

   Paths are relative to this file, so the identical block works from /static/
   and from the extension root as long as each keeps ./fonts/tts/.
   Verify with document.fonts that each face reports "loaded", never assume.
   ============================================================================ */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/tts/fraunces-600.woff2) format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/tts/fraunces-700.woff2) format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/tts/fraunces-700-italic.woff2) format('woff2');
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/tts/hanken-grotesk-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/tts/hanken-grotesk-500.woff2) format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/tts/hanken-grotesk-600.woff2) format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/tts/hanken-grotesk-700.woff2) format('woff2');
}