/* Style Me: the round-8 title, direction B "Roman and italic, pinned".
   C:\claude-profiles\toile-design-fanout-20261007\candidates\b\style-me-title-b.css (loads LAST in index.html and ipad.html).
   The mark is set the way the house sets every title (Design System 3.2): Bodoni Moda roman "Style", italic "Me",
   opsz = size. ONE house pin (the PIN glyph of toile-locked.js, viewBox 30 x 36) goes through the stem of the l:
   its shaft is drawn BEHIND the glyphs (so the stem hides it: the pin goes in at the right of the stem and comes out at
   the left), its head is drawn IN FRONT. The pin is anchored to a zero-size point at the l's advance edge on the baseline.
   Every geometry value is in em of the lockup's own font size, so one set of numbers serves every lockup.
   Only .wordmark.wm-b is styled here; the old TO|LE rules in toile-locked.css stay untouched. */

.wordmark.wm-b {
  /* the pin, per lockup: --pw = the pin box width (height = 1.2 x), --pl / --pb = its left / bottom from the anchor */
  --pw: .5em; --pl: -.33em; --pb: .36em; --shaft: 1.5;
  display: inline-block; white-space: nowrap; vertical-align: baseline;
  font: 400 64px/1 var(--f-display); font-variation-settings: 'opsz' 64; font-kerning: normal; font-feature-settings: 'kern', 'lnum';
  letter-spacing: -.01em; word-spacing: -.06em; padding: 0; color: var(--ink); isolation: isolate;
}
.wordmark.wm-b .wm-w { font: inherit; }
.wordmark.wm-b .wm-me { font-style: italic; }
/* Primary only: the y's descender takes .27 em below the baseline; .08 em of foot keeps its ball off the promise */
.wordmark.wm-b:not(.sm):not(.xs) { padding-bottom: .08em; }
/* the y-l pair opens by .025 em so the pin's point has clean air between the y's arm and the l's stem */
.wordmark.wm-b .wm-ky { letter-spacing: calc(.025em + var(--wm-ls, -.01em)); }
.wordmark.wm-b .wm-pa { display: inline-block; position: relative; width: 0; height: 0; vertical-align: baseline; }
.wordmark.wm-b .wm-pa svg { position: absolute; left: var(--pl); bottom: var(--pb); width: var(--pw); height: calc(var(--pw) * 1.2); overflow: visible; }
.wordmark.wm-b .wm-shaft { z-index: -1; }
.wordmark.wm-b .wm-shaft path { stroke-width: var(--shaft); }
.wordmark.wm-b .wm-head { z-index: 1; filter: drop-shadow(.5px 1.5px 1px rgba(40, 24, 12, .28)); }

/* Masthead: tab roots, the sign-in top bar, the iPad sidebar */
.wordmark.wm-b.sm { font-size: 24px; font-variation-settings: 'opsz' 24; letter-spacing: .012em; --wm-ls: .012em; word-spacing: -.04em; --pw: .5em; --pl: -.33em; --pb: .36em; --shaft: 2.2; }
/* Grafts 4 and 7 (from A): the masthead's baseline sits ON the monogram's italic M baseline. The old +2 dp top nudge
   (toile-locked.css .masthead .wordmark) is replaced: in the 52 dp centred row a 3 dp bottom margin lifts the 24 dp box by
   1.5 dp, so its baseline lands 37.5 dp below the masthead top, level with the M's (measured 0.0 dp apart on the S25). */
.masthead .wordmark.wm-b { margin: 0 0 3px; }
/* Graft 5 (from C): the masthead head grows a little as the size drops: scale 1.068 about its own centre, r = .1103 em = 2.65 dp */
.wordmark.wm-b.sm .wm-head { filter: drop-shadow(.4px .8px .5px rgba(40, 24, 12, .30)); transform-origin: 70% 25%; scale: 1.068; }
/* at 24 sp a point coming out left of the stem reads as a struck l (an "l-slash"), so here the pin is pushed in and its point
   stays in the cloth: only the first 15 of the shaft's 25.1 units are drawn, ending at (9.59, 25.24), inside the stem */
.wordmark.wm-b.sm .wm-shaft path { stroke-dasharray: 15 40; }

/* Cover: the archive covers, two across at 360 dp.
   Must-fix 2: wght 450 roman and italic (at 400 the italic M's left hairline nearly vanished at 1x).
   Must-fix 1: the whole pin moves (-.055, -.010) em, so the head centre lands at (-.035, .800) em of the anchor, on the l's
   top-right shoulder, and a pushed-in shaft stub (the first 10 of the path's 25.08 units, ending at (12.66, 21.29), inside the
   stem) ties the head to the l: no longer a floating speck that reads as an accent ("Style").
   Graft 5 (from C): the head grows as the size drops: scale 1.167 about its own centre, r = .1206 em = 2.05 dp (a 4.1 dp ball). */
.wordmark.wm-b.xs { font-size: 17px; font-weight: 450; font-variation-settings: 'opsz' 17; letter-spacing: .03em; --wm-ls: .03em; word-spacing: -.02em; --pw: .5em; --pl: -.385em; --pb: .35em; --shaft: 3; }
.wordmark.wm-b.xs .wm-shaft path { stroke-dasharray: 10 40; }
.wordmark.wm-b.xs .wm-hl { display: none; }
.wordmark.wm-b.xs .wm-head { filter: none; transform-origin: 70% 25%; scale: 1.167; }

/* the welcome spectacle: the title sets (Style, then Me), then the pin goes in along its own axis */
.welcome.play .wordmark.wm-b .wm-w { display: inline-block; animation: wmSet .8s var(--ease) both; }
.welcome.play .wordmark.wm-b .wm-style { animation-delay: 2.0s; }
.welcome.play .wordmark.wm-b .wm-me { animation-delay: 2.14s; }
.welcome.play .wordmark.wm-b .wm-pa svg { animation: wmPinIn .5s 2.5s var(--spring-pin) both; }
@keyframes wmSet { from { opacity: 0; transform: translateY(.12em); } to { opacity: 1; transform: none; } }
@keyframes wmPinIn { from { opacity: 0; transform: translate(.2em, -.27em); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .welcome.play .wordmark.wm-b .wm-w, .welcome.play .wordmark.wm-b .wm-pa svg { animation: none; } }