/* The Sinewave Campus product lockup.
 *
 * Brand book v4, part three section 3.3: the shared glyph recoloured, set beside
 * a two-line type block, "Sinewave" small and letterspaced above and "Campus"
 * large beneath. The book's construction is stated as ratios of the mark's own
 * module, w, so this file carries one module and derives everything from it.
 * Change --sw-w and the whole lockup scales in proportion.
 *
 * The type is live, not outlined. The artwork manifest excludes the wordmark on
 * the ground that its master is the existing component set, and re-emitting it
 * from outlines would create a second source of truth for something that
 * already has one.
 *
 * TWO COLOURWAYS, ONE CONSTRUCTION. Section 3.2's lookup is on the field's
 * relative luminance: the full-saturation value on light grounds, the lifted
 * one below 0.18. Section 3.3 states both for Campus and the book renders them:
 * on light the glyph is #7B61FF and the product name is in ink; on dark the
 * glyph and the endorsement lift to #B6ABFF and the product name reverses.
 * .sw-lockup--dark is the second, and it is applied per slot from a measurement
 * of the field a reader sees rather than from the computed background of the
 * element the mark sits in, which for a transparent header over a hero is a
 * different surface entirely. See the S15 gate.
 *
 * The glyph is images/mark-campus-violet.svg, byte-identical to the manifest's
 * master (sha256 f121c475…b5b1). One artwork file carries the geometry for both
 * colourways and this file supplies the colour, which is why it is a mask
 * rather than an <img>: an <img> cannot be recoloured in CSS, and a second
 * recoloured export would be a second master for one drawing. Section 3.5 lists
 * ten misuses and painting the master geometry in one of the brand's own two
 * published values is not among them; misuse 02 is the status hues. The
 * consequence to know about: the file is referenced from here rather than from
 * 31 pages, so a source-level grep of the HTML no longer finds it, and the S15
 * acceptance hashes the bytes the browser received on every page instead.
 *
 * The colours below are logo-palette values and are deliberately not tokens.
 * tokens.css states the reason: the logo palette and the interface palette are
 * separate systems, and it exports neither mark value on purpose because
 * #7B61FF measures 4.20:1 and is prohibited as interface text.
 */

.sw-lockup {
  /* The module. 25px puts the endorsement cap at 7.5px, just clear of the 7px
   * floor in section 3.2 that actually sets this lockup's minimum size. The
   * lockup cannot go smaller and stay legal: at the book's stated 132px overall
   * width the endorsement falls to about 4.5px. See the gate. */
  --sw-w: 25px;

  /* IBM Plex Sans 600, measured in Firefox on this branch rather than read off
   * the font tables. Cap height is .698 of the font size. Where a line sits
   * inside its own line box is measured per line rather than modelled as one
   * ratio, because Firefox does not place the two at one: the endorsement's
   * baseline sits .9198 down its line box at 10.745px and the product name's
   * .8808 down its own at 39.398px. Driving both from a single .875 put the
   * gap below at .1672 w against the book's .18 w. */
  --sw-endorse-size: calc(var(--sw-w) * .3 / .698); /* cap .30 w */
  --sw-name-size: calc(var(--sw-w) * 1.1 / .698); /* cap 1.10 w */

  display: inline-flex;
  align-items: center;
  gap: calc(var(--sw-w) * .62); /* glyph to type block, .62 w */
  transition: transform .3s; /* the affordance the .logo image carried */
}

.sw-lockup:hover {
  transform: scale(.96);
}

.sw-lockup__glyph {
  /* Glyph height equals the type block: .30 w cap + .18 w gap + 1.10 w cap.
   * Width follows the artwork's own 2641.03 : 1757.27, stated rather than left
   * to auto so a failed load cannot collapse the row. */
  height: calc(var(--sw-w) * 1.58);
  width: calc(var(--sw-w) * 2.3746);
  flex: none;

  /* The artwork masks the paint, so the geometry is the manifest's file and the
   * colour is the book's. -webkit-mask carries Safari, which took the shorthand
   * later than Firefox did. */
  background-color: #7b61ff; /* V4 SS3.3, Campus mark value on light fields */
  -webkit-mask: url(../images/mark-campus-violet.svg) center / contain no-repeat;
  mask: url(../images/mark-campus-violet.svg) center / contain no-repeat;

  /* Optically centred on the type block rather than on its line boxes. The ink
   * block's centre sits .0464 w above the stack's box centre, which is where
   * align-items: center would otherwise put the glyph. Offset, not margin, so
   * the row's own geometry is untouched. */
  position: relative;
  top: calc(var(--sw-w) * -.0464);
}

.sw-lockup__type {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sw-lockup__endorse,
.sw-lockup__name {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.sw-lockup__endorse {
  font-size: var(--sw-endorse-size);
  letter-spacing: .3em; /* the only tracked element in the system */
  text-transform: uppercase;
  color: #7b61ff; /* V4 SS3.3, Campus mark value on light fields */

  /* Endorsement baseline to product-name cap top is .18 w. Line boxes overrun
   * their ink at both ends, so closing to .18 w is a negative margin, derived
   * from the two measured baseline positions and the two measured cap heights:
   * .18 - (10.75 + 34.70019 - 27.571 - 9.8833) / 25 = -.13984 w. */
  margin-bottom: calc(var(--sw-w) * -.13984);

  /* Flush left with the product name at the ink, not at the line box. The two
   * lines start at the same box edge and their first glyphs do not: measured on
   * the rendered face, "S" sets .054072 em to the left of its origin and "C"
   * .026753 em to the right of its own, so at these two sizes the product name
   * begins .0654 w further right ( .026753 x 1.5759 + .054072 x .4298 ). The
   * book states no horizontal relation between the two lines and its own
   * rendering leaves them this far apart; that read as unaligned in review on
   * 2026-08-19 and this closes it. Scale-invariant, because both sizes are
   * multiples of w. */
  margin-left: calc(var(--sw-w) * .0654);
}

.sw-lockup__name {
  font-size: var(--sw-name-size);
  letter-spacing: -.018em;
  color: #1e2028; /* V4 .b-campus --ink, the book's own value for "in ink" */
}

/* The dark colourway. V4 SS3.3: "On dark: glyph and endorsement lift to
 * #B6ABFF, product name reverses." Applied to the slots whose visible field
 * measures below the book's 0.18 luminance boundary. */
.sw-lockup--dark .sw-lockup__glyph {
  background-color: #b6abff;
}

.sw-lockup--dark .sw-lockup__endorse {
  color: #b6abff;
}

.sw-lockup--dark .sw-lockup__name {
  color: #fff;
}

/* The brand links are fixed at 120px by .brand, which is below the 132px floor.
 * Scoped to the two link shapes that carry a lockup so nothing else on the page
 * that happens to use .brand is touched. */
a.brand.w-nav-brand,
a.brand.w-inline-block {
  width: auto;
}