/* ==========================================================================
   Minnowsoft — components
   --------------------------------------------------------------------------
   Consumes semantic tokens only; primitives never appear here. Square
   corners; no shadows; no gradients; nothing moves on hover or press. The
   only transitions are colour and underline colour at var(--duration-fast).
   Hover styling is gated on (hover: hover) so touch devices never hold a
   stale hover state.

   JS-dependent styling keys on html.js, which js/main.js adds only after the
   module graph has loaded and the behaviors have run. If the script never
   executes, the page keeps its no-JS appearance: the masthead rule simply
   stays in view.
   ========================================================================== */

@layer components {

  /* ---- Shared voices --------------------------------------------------- */

  /* The interface voice: the quiet humanist sans, sentence case. Everything
     the company says is in the prose face instead, except the small print,
     which sits in the colophon as it always has: at that size the sans
     holds up where the book face would not. */
  .skip-link,
  .colophon {
    font-family: var(--font-ui);
    font-size: var(--text-ui);
    line-height: var(--leading-ui);
  }

  /* A reading link: ink text with the accent underline, always visible,
     because an underline is how a reader knows a thing can be followed. */
  .link {
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color var(--duration-fast) var(--ease-standard);
  }

  /* The page's one action: lede size, and never shorter than a target. */
  .link--large {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target-min);
    font-size: var(--text-lede);
    line-height: var(--leading-lede);
  }

  /* ---- Skip link ------------------------------------------------------- */

  /* Hidden by .u-visually-hidden until focused; these are its visible styles. */
  .skip-link {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: var(--z-skip);
    padding: var(--space-3) var(--space-4);
    font-weight: 500;
    line-height: 1;
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-text);
    border-radius: var(--radius-control);
    text-decoration: none;
  }

  /* ---- Masthead -------------------------------------------------------- */

  .masthead {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    min-height: var(--size-header);
    background-color: var(--color-canvas);
    border-bottom: 1px solid var(--color-rule);
  }

  /* With JS the rule is withheld at the top of the page and appears on
     scroll, to say that the masthead is holding. Deliberately not
     transitioned: a hairline switching state is not a motion cue. */
  html.js .masthead:not(.is-scrolled) {
    border-bottom-color: transparent;
  }

  .masthead__inner {
    display: flex;
    align-items: center;
    min-height: var(--size-header);
  }

  /* Own vertical padding so the wordmark, the masthead's only link, is a
     target taller than its line of type. */
  .wordmark {
    display: inline-block;
    padding-block: var(--space-4);
    font-family: var(--font-prose);
    font-size: var(--text-wordmark);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.005em;
    color: var(--color-text);
    text-decoration: none;
  }

  /* ---- Opening --------------------------------------------------------- */

  .opening {
    padding-block-start: clamp(var(--space-8), 9vw, var(--space-9));
  }

  .opening__title {
    max-width: 16ch;
    font-size: var(--text-display);
    font-weight: 400;
    line-height: var(--leading-display);
    letter-spacing: -0.01em;
  }

  /* ---- Contact --------------------------------------------------------- */

  .contact__address {
    margin-top: var(--space-5);
    font-style: normal;
  }

  /* ---- Colophon: the small print --------------------------------------- */

  .colophon {
    margin-top: var(--space-section);
    padding-block: var(--space-7) var(--space-6);
    color: var(--color-text-muted);
    border-top: 1px solid var(--color-rule);
  }

  /* The legal notice, small and muted, on a reading measure. Its capitalised
     paragraphs are capitalised in the text rather than by text-transform:
     conspicuousness belongs to the wording of a disclaimer, so it survives
     without the stylesheet. */
  .legal {
    max-width: var(--measure);
    font-size: var(--text-ui-sm);
  }

  .legal__title {
    font-family: var(--font-ui);
    font-size: var(--text-ui);
    line-height: var(--leading-ui);
    color: var(--color-text);
  }

  .legal > * + * {
    margin-top: var(--space-3);
  }

  .colophon__copyright {
    margin-top: var(--space-6);
    font-size: var(--text-ui-sm);
  }

  /* ---- Hover states (pointer devices only) ----------------------------- */

  @media (hover: hover) {
    .link:hover {
      color: var(--color-accent);
    }
  }
}