/* ============================================================
   Picshelf type
   Fraunces, a soft serif like a photo book's, for titles, the wordmark and large
   figures; Mulish (Muli's current name) for everything people read and click.
   Loaded after the Brailie theme on the homepage, the privacy page and the admin.
   Never on the public galleries: they keep the style each photographer picked.
   ============================================================ */

/* Fraunces without its figures: its digits are tall, high-contrast and quirky, and looked
   odd next to the letters ("test2", "2024", the stat counters). unicode-range leaves
   0-9 out, so digits fall through to Mulish, the next family in --font-display.
   Self-hosted (SIL OFL, see /fonts/fraunces-OFL.txt) because that needs our own
   @font-face. Variable: opsz 9-144, wght 400-700. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-002F, U+003A-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Mulish, self-hosted too (SIL OFL, see /fonts/mulish-OFL.txt): the pages that load this file no longer
   ask Google Fonts for it, so visitors' browsers make no request to a third party for text. The files and
   unicode-ranges are Google Fonts' own latin and latin-ext subsets (v18). Variable: wght 300-800. */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/mulish-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/mulish-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --font-display: 'Fraunces', 'Mulish', Georgia, serif;
  --font-text: 'Mulish', 'Muli', 'Segoe UI', system-ui, sans-serif;
}

/* Brailie sets these in Montserrat */
body, .font-body, .lead, .lead2, .navbar, .btn, .badge, .blockquote-footer, .nav-tabs .nav-link, .counter p {
  font-family: var(--font-text);
}

h1, h2, h3, h4, h5, h6, .font-title, .wordmark {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -.01em;
}
/* The PicShelf wordmark: the name framed by four viewfinder corners in the brand blue.
   Drawn as background gradients, so it needs no extra markup and scales with font-size;
   the text keeps its own colour (white on dark bars, ink on light ones). */
.wordmark {
  --wm-color: #2f6fd1;
  --wm-corner: .38em;
  --wm-stroke: max(2px, .052em);
  display: inline-block;
  padding: .34em .5em;
  line-height: 1;
  background:
    linear-gradient(var(--wm-color), var(--wm-color)) left top / var(--wm-corner) var(--wm-stroke),
    linear-gradient(var(--wm-color), var(--wm-color)) left top / var(--wm-stroke) var(--wm-corner),
    linear-gradient(var(--wm-color), var(--wm-color)) right top / var(--wm-corner) var(--wm-stroke),
    linear-gradient(var(--wm-color), var(--wm-color)) right top / var(--wm-stroke) var(--wm-corner),
    linear-gradient(var(--wm-color), var(--wm-color)) right bottom / var(--wm-corner) var(--wm-stroke),
    linear-gradient(var(--wm-color), var(--wm-color)) right bottom / var(--wm-stroke) var(--wm-corner),
    linear-gradient(var(--wm-color), var(--wm-color)) left bottom / var(--wm-corner) var(--wm-stroke),
    linear-gradient(var(--wm-color), var(--wm-color)) left bottom / var(--wm-stroke) var(--wm-corner);
  background-repeat: no-repeat;
}

/* hints set inside a title ("Photos (drag to reorder)") stay in the text face */
:is(h1, h2, h3, h4, h5, h6) :is(small, .small) { font-family: var(--font-text); font-weight: 400; letter-spacing: 0; }

/* Going from one of these pages to another (homepage, sign-up, sign-in, dashboard, privacy) cross-fades
   instead of flashing a blank page: cross-document view transitions, where the browser supports them. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }