/* ============================================================================
   The brand mark as typographic furniture.

   Everything here is derived from ONE chosen logo set, form and shadow, rather
   than drawn separately. A bullet that is a shrunk version of the brand's own
   object costs a reader nothing to recognise; a bullet that is a different
   shape is a second mark to learn.

   Each site sets two things and nothing else:

     --mark-mask   the object, as a mask. See design/logos/mark-masks.css.
     --primary     already set by the theme.

   COLOUR IS INHERITED, NOT BAKED. The bullet is a mask over currentColor, so it
   takes the colour of the text it sits in and there is no second file for a
   dark section. The same is true of the shadow, which is a clip-path over a
   solid block rather than an image.
   ========================================================================= */

@layer components {

  /* ---- 1. bullets --------------------------------------------------------
     The object alone. Never the shadow: at 14px a cast shape is three pixels
     of grey and it reads as dirt. */

  .marklist {
    list-style: none;
    padding: 0;
    margin: var(--sp-5) 0;
  }
  .marklist > li {
    position: relative;
    padding-inline-start: 1.9em;
    margin-bottom: var(--sp-3);
  }
  /* Sized in em so it tracks the type it sits beside, and nudged to sit on the
     x-height rather than the baseline, which is where a bullet belongs. */
  .marklist > li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.34em;
    width: 0.72em;
    height: 0.82em;
    background: currentColor;
    -webkit-mask: var(--mark-mask) no-repeat center / contain;
    mask: var(--mark-mask) no-repeat center / contain;
  }
  /* The accent variant. Use it where the list IS the content, not where the
     list is incidental. Two accented lists on one screen is one too many. */
  .marklist--accent > li::before { background: var(--primary) }

  /* ---- 2. section openers ----------------------------------------------
     The whole mark, large. No new file: this is the logo, bigger. */

  .section-mark {
    display: block;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: var(--sp-4);
    /* Same reason as the drop cap: a section mark below 3:1 is not a mark. */
    color: var(--safe, var(--primary));
  }
  .section-mark svg { width: 100%; height: 100% }
  @media (min-width: 1024px) { .section-mark { width: 4rem; height: 4rem } }

  /* ---- 3. the drop cap -------------------------------------------------
     The paragraph's first letter stands where the object stands and throws the
     same shadow. The letter is real text: selectable, searchable, and read
     aloud in the right order. Only the shadow is drawn.

     Use sparingly and only when instructed. A drop cap on every section is
     wallpaper. */

  .dropcap > .dc {
    float: inline-start;
    position: relative;
    font-family: var(--font-display, var(--serif));
    font-size: 3.4em;
    line-height: 0.78;
    /* --safe, not --primary: the drop cap is TEXT. On the aquatics cyan the
       bright value is 2.78:1 on white, under the 3:1 a large letter needs.
       On the brands where the two values are equal this changes nothing. */
    color: var(--safe, var(--primary));
    margin-inline-end: 0.14em;
    margin-block-start: 0.04em;
    /* Room for the cast shape underneath. A float reserves its margin box, so
       this is what stops the shadow landing on a line of running text. */
    margin-block-end: 0.34em;
  }
  /* The same cast shape as the logo, as a clip-path so it scales with the
     letter and takes the deep value rather than an image.

     IT IS NOT THE LOGO'S PROPORTIONS, and that was measured the hard way. At
     the logo's 268 per cent the band ran half way into the text column and
     struck through two lines of the paragraph, because a floated letter only
     reserves its own width and the shadow is positioned outside it. The band
     is now inside the letter's footprint: 112 per cent wide against a float
     that reserves 114, and 30 per cent tall against a bottom margin that
     reserves 34. Same parallelogram, same angle, shorter throw. */
  .dropcap > .dc::after {
    content: "";
    position: absolute;
    inset-inline-start: -6%;
    top: 100%;
    width: 112%;
    height: 30%;
    background: var(--deep, var(--primary));
    clip-path: polygon(0% 0%, 48.6% 0%, 100% 100%, 51.4% 100%);
    pointer-events: none;
  }
  /* A floated letter plus an absolutely positioned shadow will overlap the
     line below unless the paragraph is given room for it. */
  .dropcap { padding-bottom: 0.35em }

  @media (prefers-reduced-motion: reduce) { .section-mark { transition: none } }
}