/* ==========================================================================
   shapes.css — the shape vocabulary.

   Every graphic on this site is a CSS rectangle, circle or clip-path: there
   are no images and no icon fonts. This file holds the reusable pieces:

     .mark        the 26px composite logo (coral / periwinkle / pink)
     .sh          a single flat shape — halves, quarters, wedges, pills, dots
     .c-*         colour utilities that feed .sh

   Rules of the system (from the design notes):
     * A card carries exactly one shape — two only when they are tiny.
     * Shapes are always anchored to an edge or corner so the card's
       `overflow: hidden` cuts them cleanly. A shape floating in the middle of
       a corner reads as a rendering error.
     * Shapes never sit behind descriptive text; the text gets a max-width or
       padding-right that keeps clear of them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The mark

   A 2×2 composition at half-scale: the left half is a coral pill-left, the
   top-right a periwinkle quarter, the bottom-right a pink square. Scale the
   whole thing with --mark-size (26px in the nav, 28px on the CV).
   -------------------------------------------------------------------------- */
.mark {
  --mark-size: 26px;
  --mark-half: calc(var(--mark-size) / 2);
  position: relative;
  display: inline-flex;
  flex: none;
  width: var(--mark-size);
  height: var(--mark-size);
}

.mark span {
  position: absolute;
  width: var(--mark-half);
  height: var(--mark-half);
}

.mark span:nth-child(1) {          /* left half — coral pill */
  left: 0;
  top: 0;
  height: var(--mark-size);
  background: var(--coral);
  border-radius: var(--mark-half) 0 0 var(--mark-half);
}

.mark span:nth-child(2) {          /* top-right quarter — periwinkle */
  left: var(--mark-half);
  top: 0;
  background: var(--periwinkle);
  border-radius: 0 var(--mark-half) 0 0;
}

.mark span:nth-child(3) {          /* bottom-right square — pink */
  left: var(--mark-half);
  top: var(--mark-half);
  background: var(--pink);
}

/* --------------------------------------------------------------------------
   Flat shapes

   `.sh` is a square of --sh-size; the modifiers only change the corner radii,
   so every shape in the family stays on the same grid. Halves (cap/cup) are
   the one exception: they are half as tall.
   -------------------------------------------------------------------------- */
.sh {
  --sh-size: 20px;
  display: inline-block;
  flex: none;
  width: var(--sh-size);
  height: var(--sh-size);
  background: var(--sh-color, var(--tone, currentColor));
}

/* Sizes */
.sh--16 { --sh-size: 16px; }
.sh--22 { --sh-size: 22px; }

/* Geometry */
.sh--dot      { border-radius: var(--r-pill); }
.sh--cap      { height: calc(var(--sh-size) / 2); border-radius: var(--sh-size) var(--sh-size) 0 0; }
.sh--cup      { height: calc(var(--sh-size) / 2); border-radius: 0 0 var(--sh-size) var(--sh-size); }
.sh--top-half { border-radius: var(--sh-size) var(--sh-size) 0 0; }
.sh--leaf-a   { border-radius: var(--sh-size) 0 var(--sh-size) 0; }
.sh--leaf-b   { border-radius: 0 var(--sh-size) 0 var(--sh-size); }
.sh--leaf-c   { border-radius: var(--sh-size) var(--sh-size) 0 var(--sh-size); }
.sh--leaf-d   { border-radius: 0 var(--sh-size) var(--sh-size) var(--sh-size); }
.sh--pill-l   { border-radius: var(--sh-size) 0 0 var(--sh-size); }
.sh--pill-r   { border-radius: 0 var(--sh-size) var(--sh-size) 0; }
.sh--bar      { width: calc(var(--sh-size) / 2); }

/* Colours */
.c-coral      { --sh-color: var(--coral); }
.c-green      { --sh-color: var(--green); }
.c-yellow     { --sh-color: var(--yellow); }
.c-pink       { --sh-color: var(--pink); }
.c-periwinkle { --sh-color: var(--periwinkle); }
.c-ochre      { --sh-color: var(--ochre); }
.c-ink        { --sh-color: var(--ink); }