@layer styles {
  /* Two subsets, so Swedish text never pays for the extended Latin file — the
     browser fetches latin-ext only if a glyph on the page falls in its range. */
  @font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/Inter-Variable-latin.woff2?v=1') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    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: 'Inter';
    src: url('/assets/fonts/Inter-Variable-latin-ext.woff2?v=1') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    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 {
    /*
     * Vinrött och rosa on a warm beige ground.
     *
     * Named for the colours rather than for roles, because there are few
     * enough of them to hold in your head and the names are what the brief
     * called them. Every pairing used below is AAA against its background.
     *
     * The logotype is dark navy (#152b36) and sits on beige unchanged; only
     * the footer tagline, which is set as text rather than artwork, follows
     * the theme.
     */
    /* As channels too, because the header scrim needs the page colour at an
       alpha. Fading to a bare `transparent` interpolates through transparent
       black and greys the middle of the gradient. */
    --color-page-rgb: 250 245 238;
    --color-page: rgb(var(--color-page-rgb));
    --color-surface: #fffdfa;
    --color-ink: #2b2024;

    --color-wine: #722f37;
    --color-wine-deep: #55232a;
    --color-pink: #e8b4c0;
    --color-pink-tint: #f8ebee;

    /* One colour at three lightnesses — 54%, 72.5%, 94.5% — holding hue 40
       and 17% saturation. */
    /* The wordmark's own colour, measured from logotype.webp. */
    --color-navy: #152b36;

    --color-sand: #9e9076;
    --color-sand-tint: #c5bdad;
    --color-sand-pale: #f3f2ef;

    /* Rules and hairlines: the ink colour at low alpha, so they sit on the
       beige rather than greying it. */
    --color-rule: rgb(43 32 36 / 0.12);
    --color-rule-strong: rgb(43 32 36 / 0.28);

    /*
     * One container width, shared by every section, so blocks line up at the
     * same left and right edge instead of each picking its own measure. The
     * blocks that used to set their own (44rem for the ingress and price list,
     * 56rem for the calculator) no longer do.
     *
     * 52rem suits the calculator's two columns and keeps the price list's
     * dotted leaders short enough to follow. It puts the Instagram grid at two
     * columns rather than three — its tracks are minmax(18rem, 1fr), and three
     * of those need 57rem.
     */
    --container-max-width: 52rem;

    --space--small: 1rem;
    --space: 1.5rem;
    --space--medium: 3rem;
    --space--large: 5rem;
    --space--extra-large: 10rem;

    --page-side-padding: clamp(var(--space), 3vw, var(--space--large));

    --font:
      'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial,
      sans-serif;
    --font--heading: var(--font);
    --font-size--body: 1rem;
    --font-size--small: 0.875rem;

    /* How far secondary text is set back from the main text. */
    --muted-opacity: 0.75;

    /* Controls share one radius; the larger is for a panel. */
    --radius: 0.25rem;
    --radius--large: 0.5rem;
  }
  @media (min-width: 1380px) {
    :root {
      --page-side-padding: 0;
    }
  }

  /* Set as text rather than baked into the artwork: in the mark it is about
     10px tall against a 536px width, so at any size a header or footer can
     carry it, it renders around 4px and cannot be read. Upper case and widely
     letterspaced like the original, but sized to be read. Each place sets its
     own colour. */
  .tagline {
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-align: center;
  }

  .heading {
    color: var(--color-navy);
    font-family: var(--font--heading);
    font-size: var(--font-size);
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  .heading--1 {
    --font-size: clamp(1.8rem, 5vw, 2rem);

    font-weight: 300;
    letter-spacing: -0.025em;
    margin-left: auto;
    margin-right: auto;
    max-width: 35ch;
    text-align: center;
  }

  /* Upper case needs tracking opened back up; the negative value on .heading
     is for mixed case. */
  .heading--2 {
    --font-size: clamp(1.1rem, 3vw, 1.2rem);
    max-width: 42ch;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .heading--1 + p {
    margin-top: var(--space-from-heading--1);
  }

  .heading--2 + p {
    margin-top: 0.5rem;
  }

  .heading--3 + p,
  .heading--4 + p {
    margin-top: 0.4rem;
  }

  p + .heading {
    margin-top: var(--space);
  }

  /* Read aloud, never drawn. For a word that a symbol stands in for
     visually, where a title attribute would be unreachable by touch. */
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .strong {
    font-weight: 600;
  }
}