@charset "utf-8";

/* ============================================================================
   Scribe
   ----------------------------------------------------------------------------
   Linked on every Scribe page, after the shared sheets. Scribe has a brand kit,
   Voiceprint S 1.0 (docs/scribe-brand.md), and this sheet carries the parts of
   it a palette cannot:

     1  Manrope, the kit's typeface, for brand headlines and statements. Body
        text and labels stay in the family's DM Sans and DM Mono, as the
        layouts are drawn for them;
     2  the logo where the site would otherwise type the name: the masthead,
        the colophon and the splash;
     3  the gallery's Assets plates, which show the kit itself.

   The palette is not here. It arrives inline on <html> like every product's,
   from the kit's named colours (src/microsite-brand.mjs).
   ========================================================================== */

/* Manrope variable, from the kit, under the SIL Open Font License
   (shots/Manrope-OFL.txt). Relative to this file, which is the site's
   product.css at its root. */
@font-face {
  font-family: "Manrope";
  src: url("shots/Manrope-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ── 1. Type ─────────────────────────────────────────────────────────────── */

html[data-product='scribe'] {
  --brand: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* The family's one serif is for statements, the sentence a section exists
     to make. The kit has no serif: its statements are Manrope at 400. */
  --serif: var(--brand);
}

/* Zero specificity, so a heading a stylesheet sets in mono (the colophon's
   column labels, a layout's small caps) keeps it. The kit sets headlines at
   600, which the family already uses. */
:where(html[data-product='scribe']) :where(h1, h2, h3) {
  font-family: var(--brand);
}

/* ── 2. Logo ─────────────────────────────────────────────────────────────── */

/* The horizontal logo, at the kit's minimum of 140px wide or more. Its SVG
   includes the clear space (28 of 555 units at the left), so the negative
   margin lines the first bar up with the page edge while the space itself
   stays empty. */
html[data-product='scribe'] .wordmark__logo {
  flex: none;
  width: 155px;
  height: auto;
  margin-inline-start: calc(155px * -28 / 555);
}

html[data-product='scribe'] .local-hero h1 {
  /* The name is the logo here, so the size that fits a typed name to its
     column has nothing to do. */
  font-size: 1rem;
  line-height: 0;
}

html[data-product='scribe'] .hero-logo {
  width: min(100%, 26rem);
  height: auto;
  margin-inline-start: calc(min(100%, 26rem) * -28 / 555);
}

/* ── 3. Gallery assets ───────────────────────────────────────────────────── */

/* The stacked lockup, whole. The shared rule fills the plate's width, which
   for a square image is taller than the plate and crops the wordmark off the
   bottom; this sizes it to the plate's inner height instead (13rem, less its
   padding and border). */
html[data-product='scribe'] .plate__art img {
  width: auto;
  max-width: 100%;
  height: calc(13rem - 2 * var(--s3) - 2px);
}

/* Six named colours, not the family's four derived steps. Warm black and
   surface sit on a ground nearly their own colour, so every chip carries the
   kit's hairline. */
html[data-product='scribe'] .swatches--kit {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  border-radius: 0;
  overflow: visible;
}

html[data-product='scribe'] .swatches--kit i {
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--line);
}

html[data-product='scribe'] .typespec--kit {
  gap: 0.6rem;
  text-align: left;
}

html[data-product='scribe'] .typespec--kit b {
  font-family: var(--brand);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.1;
}

html[data-product='scribe'] .typespec--kit em {
  color: var(--dim);
  font-family: var(--brand);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
}

@media (max-width: 46rem) {
  html[data-product='scribe'] .swatches--kit i {
    aspect-ratio: 1 / 1.35;
  }
}