/* ============================================================
   yourcustomprofile.app — nameplates
   A nameplate is the small plate a name sits on. It is one decoration with two
   independent axes: a *shape* (the cut of the plate) and a *material* (what the
   plate is made of). Seventeen of each, chosen separately, so the same shape in
   brass and in paper reads as two different objects.

   Contract with the markup — a single wrapper, nothing else:

     <div class="profile-nameplate" id="profileNameplate">
       <h1 class="profile-name" id="profileName">…</h1>
     </div>

   The plate is painted by `.profile-nameplate::before` on its own layer, so the
   name keeps every text effect it already had (`text-fx-*` clip backgrounds,
   per-glyph spans) and never has to share a pseudo-element with them. The name
   is lifted above the plate with `z-index`.

   Rules of the system, kept deliberately narrow:
     · shape writes geometry only — padding, border-radius, clip-path, inset
       hairlines. It never writes a colour.
     · material writes surface only — background-image, box-shadow, filter.
       It never writes geometry.
     · no shape requires a material, and no material requires a shape. Both
       defaults are `none`, and `none` is exactly the shipped look.
     · nothing here animates, moves or scales the name, so a plate is safe
       under reduced motion and on a slow device without a media query.
     · every colour is derived from `currentColor` or an existing token, so a
       plate follows the member's accent instead of fighting it.
   ============================================================ */

.profile-nameplate {
  position: relative;
  display: inline-block;
  max-width: 100%;
  isolation: isolate;
  /* Every shape below is written in `em`, so the plate has to be sized in the
     *name's* em, not the page's. `--np-em` is set from the rendered name by
     `applyNameplate()`; one em here is one em of the name. Without this the
     padding would be 2px on a 45px name and the plate would clip it. */
  font-size: var(--np-em, 2.2rem);
  line-height: 0;
}

/* Layer 0 — the *surface*. Every material paints here, one step behind the
   shape, so a fill can never cover the shape's marks. It is a separate
   pseudo-element precisely because the two axes are independent: a plate cut
   like a ticket and made of brass needs its notch to survive the brass. */
.profile-nameplate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background-color: var(--np-fill, var(--np-ground, transparent));
  background-image: var(--np-img, none);
  background-size: var(--np-img-size, auto);
  background-position: var(--np-img-pos, 0 0);
  background-repeat: var(--np-img-repeat, repeat);
  box-shadow: var(--np-depth, none);
  border-radius: var(--np-radius, 0);
}

/* Layer 1 — the *shape*. Geometry only: marks, clips and hairlines, drawn in
   `--np-ink`, which a material may set. Falls back to the member's accent, so
   a shape with no material still reads as their colour. */
.profile-nameplate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: var(--np-radius, 0);
  background: transparent;
  box-shadow: none;
}

/* No leading here on purpose. The wrapper is `line-height: 0` so the plate's
   geometry is the name's box and nothing else, and a child that inherits that
   zero would collapse. This rule must therefore not restate it: the name
   declares its own leading (`.profile-name` 1.04, `poster` 0.92, `glass` a
   tighter display setting), and an inherited 0 never wins against a direct
   declaration. A flat `line-height: 1.1` here did win, which is why every
   template's leading had been flattened to the same value. */
.profile-nameplate > .profile-name {
  position: relative;
  z-index: 1;
  margin: 0;
}

/* A plate that paints a box supplies its own padding, which only works with a
   leading that leaves room above and below the glyphs; `none` paints nothing
   and must stay byte-for-byte the plain name. */
.profile-nameplate:not([data-shape="none"]) > .profile-name { line-height: 1.1; }
.profile-nameplate[data-shape="none"] { padding: 0; }
.profile-nameplate[data-material="none"]::after { content: none; }

/* ══════════════════════════════════════════════════════════ 1. shapes ══ */

/* A single hairline beneath the name. The most restrained option, and the one
   most profiles will pick. */
.profile-nameplate[data-shape="rule"] { --np-radius: 0; padding: 0.06em 0.12em 0.24em; }
.profile-nameplate[data-shape="rule"]::before {
  border-radius: 0;
  box-shadow: inset 0 -1px 0 var(--np-ink, currentColor);
  opacity: 0.55;
}

/* A machined slab: a rectangle the name sits inside, with real padding. */
.profile-nameplate[data-shape="plate"] { --np-radius: 6px; padding: 0.14em 0.5em 0.2em; }
.profile-nameplate[data-shape="plate"]::before {
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--np-ink, currentColor) calc(34% * var(--np-mark-boost, 1)), transparent);
}

/* A filing tab: the top corners cut, the bottom square. It reads as something
   pulled out of a drawer. */
.profile-nameplate[data-shape="tab"] { --np-radius: 7px 7px 1px 1px; padding: 0.12em 0.44em 0.18em; }
.profile-nameplate[data-shape="tab"]::before {
  border-radius: 7px 7px 1px 1px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--np-ink, currentColor) calc(30% * var(--np-mark-boost, 1)), transparent);
}

/* Two brackets, left and right only — no top or bottom rule. */
.profile-nameplate[data-shape="bracket"] { --np-radius: 0; padding: 0.08em 0.5em 0.12em; }
.profile-nameplate[data-shape="bracket"]::before {
  border-radius: 0;
  border-inline: 1.5px solid color-mix(in srgb, var(--np-ink, currentColor) calc(42% * var(--np-mark-boost, 1)), transparent);
}

/* A heavy rule under a hairline, offset. A printed convention. */
.profile-nameplate[data-shape="underlineDouble"] { --np-radius: 0; padding: 0.06em 0.1em 0.26em; }
.profile-nameplate[data-shape="underlineDouble"]::before {
  border-radius: 0;
  box-shadow:
    inset 0 -1px 0 color-mix(in srgb, var(--np-ink, currentColor) calc(28% * var(--np-mark-boost, 1)), transparent),
    inset 0 -4px 0 -3px color-mix(in srgb, var(--np-ink, currentColor) calc(62% * var(--np-mark-boost, 1)), transparent);
}

/* Fully rounded, border only. */
.profile-nameplate[data-shape="capsule"] { --np-radius: 999px; padding: 0.14em 0.66em 0.2em; }
.profile-nameplate[data-shape="capsule"]::before {
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--np-ink, currentColor) calc(36% * var(--np-mark-boost, 1)), transparent);
}

/* A ticket: notched on both long edges, which is what makes it a ticket
   rather than a capsule. */
.profile-nameplate[data-shape="ticket"] { --np-radius: 4px; padding: 0.14em 0.6em 0.2em; }
.profile-nameplate[data-shape="ticket"]::before {
  --np-notch: 7px;
  border-radius: 4px;
  clip-path: polygon(
    0 0, 100% 0, 100% calc(50% - var(--np-notch)),
    calc(100% - 2px) 50%, 100% calc(50% + var(--np-notch)), 100% 100%,
    0 100%, 0 calc(50% + var(--np-notch)),
    2px 50%, 0 calc(50% - var(--np-notch))
  );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--np-ink, currentColor) calc(34% * var(--np-mark-boost, 1)), transparent);
}

/* A rubber stamp: a thin outer rule and a thicker inner one, square. */
.profile-nameplate[data-shape="stamp"] { --np-radius: 2px; padding: 0.12em 0.44em 0.16em; }
.profile-nameplate[data-shape="stamp"]::before {
  border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--np-ink, currentColor) calc(40% * var(--np-mark-boost, 1)), transparent);
  box-shadow: inset 0 0 0 2px transparent, inset 0 0 0 3px color-mix(in srgb, var(--np-ink, currentColor) calc(26% * var(--np-mark-boost, 1)), transparent);
}

/* A banner: a wide band with the ends cut on a slant. */
.profile-nameplate[data-shape="banner"] { --np-radius: 0; padding: 0.12em 0.72em 0.18em; }
.profile-nameplate[data-shape="banner"]::before {
  border-radius: 0;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%);
}

/* A full slab with no radius at all: a poured block. */
.profile-nameplate[data-shape="slab"] { --np-radius: 0; padding: 0.16em 0.54em 0.22em; }
.profile-nameplate[data-shape="slab"]::before { border-radius: 0; }

/* An index card: square, with a ruled line across the top third. */
.profile-nameplate[data-shape="card"] { --np-radius: 2px; padding: 0.2em 0.5em 0.18em; }
.profile-nameplate[data-shape="card"]::before {
  border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--np-ink, currentColor) calc(26% * var(--np-mark-boost, 1)), transparent);
  background-image: linear-gradient(
    color-mix(in srgb, var(--np-ink, currentColor) calc(22% * var(--np-mark-boost, 1)), transparent),
    color-mix(in srgb, var(--np-ink, currentColor) calc(22% * var(--np-mark-boost, 1)), transparent)
  );
  background-size: 100% 1px;
  background-position: 0 0.55em;
  background-repeat: no-repeat;
}

/* A woven label: a rounded rectangle with a stitched dashed edge. */
.profile-nameplate[data-shape="label"] { --np-radius: 8px; padding: 0.14em 0.5em 0.2em; }
.profile-nameplate[data-shape="label"]::before {
  border-radius: 8px;
  border: 1px dashed color-mix(in srgb, var(--np-ink, currentColor) calc(48% * var(--np-mark-boost, 1)), transparent);
}

/* A vitrine: a plinth with a shadow gap under it. */
.profile-nameplate[data-shape="vitrine"] { --np-radius: 1px; padding: 0.14em 0.48em 0.26em; }
.profile-nameplate[data-shape="vitrine"]::before {
  border-radius: 1px;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--np-ink, currentColor) calc(22% * var(--np-mark-boost, 1)), transparent),
    0 5px 0 -4px color-mix(in srgb, var(--np-ink, currentColor) calc(40% * var(--np-mark-boost, 1)), transparent);
}

/* A keystone: a trapezoid, wider at the bottom, as cut stone. */
.profile-nameplate[data-shape="keystone"] { --np-radius: 0; padding: 0.16em 0.5em 0.2em; }
.profile-nameplate[data-shape="keystone"]::before {
  border-radius: 0;
  clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
}

/* A caustic frame: corner ticks only, as a lens would flare four points. */
.profile-nameplate[data-shape="caustic"] { --np-radius: 0; padding: 0.12em 0.42em 0.18em; }
.profile-nameplate[data-shape="caustic"]::before {
  border-radius: 0;
  background:
    linear-gradient(var(--np-ink, currentColor), var(--np-ink, currentColor)) 0 0 / 9px 1px no-repeat,
    linear-gradient(var(--np-ink, currentColor), var(--np-ink, currentColor)) 0 0 / 1px 9px no-repeat,
    linear-gradient(var(--np-ink, currentColor), var(--np-ink, currentColor)) 100% 0 / 9px 1px no-repeat,
    linear-gradient(var(--np-ink, currentColor), var(--np-ink, currentColor)) 100% 0 / 1px 9px no-repeat,
    linear-gradient(var(--np-ink, currentColor), var(--np-ink, currentColor)) 0 100% / 9px 1px no-repeat,
    linear-gradient(var(--np-ink, currentColor), var(--np-ink, currentColor)) 0 100% / 1px 9px no-repeat,
    linear-gradient(var(--np-ink, currentColor), var(--np-ink, currentColor)) 100% 100% / 9px 1px no-repeat,
    linear-gradient(var(--np-ink, currentColor), var(--np-ink, currentColor)) 100% 100% / 1px 9px no-repeat;
  opacity: 0.5;
}

/* A reticle: four ticks outside the name, separated by a gap. */
.profile-nameplate[data-shape="reticle"] { --np-radius: 0; padding: 0.16em 0.62em 0.22em; }
.profile-nameplate[data-shape="reticle"]::before {
  border-radius: 0;
  background:
    linear-gradient(var(--np-ink, currentColor), var(--np-ink, currentColor)) 0 50% / 9px 1px no-repeat,
    linear-gradient(var(--np-ink, currentColor), var(--np-ink, currentColor)) 100% 50% / 9px 1px no-repeat;
  opacity: 0.5;
}

/* A seal: an octagon, as a wax matrix. */
/* A wax-seal octagon. The chamfer is measured in `em`, not percent: a
   percentage chamfer is 100px wide on a long name and 12px tall, which cuts
   the first and last letter. One em keeps the corner square at any width. */
.profile-nameplate[data-shape="seal"] { --np-radius: 0; --np-chamfer: 0.62em; padding: 0.18em 0.8em 0.32em; }
.profile-nameplate[data-shape="seal"]::before {
  border-radius: 0;
  clip-path: polygon(
    var(--np-chamfer) 0, calc(100% - var(--np-chamfer)) 0,
    100% var(--np-chamfer), 100% calc(100% - var(--np-chamfer)),
    calc(100% - var(--np-chamfer)) 100%, var(--np-chamfer) 100%,
    0 calc(100% - var(--np-chamfer)), 0 var(--np-chamfer));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--np-ink, currentColor) calc(40% * var(--np-mark-boost, 1)), transparent);
}

/* ══════════════════════════════════════════════════════════ 2. materials
   Every material is a surface, and every surface is built from the same three
   ingredients the rest of the catalogue uses: a ground, a grain that suggests
   how it was made, and a shadow that suggests how thick it is.

   Two properties are declared per material and nothing else sets them:

     --np-fill  the opaque ground, sampled from the real material
     --np-ink   the ink that reads on that ground, contrast-checked

   Everything decorative (`--np-img`, `--np-img-*`, `--np-depth`) is optional.
   The ground is opaque on purpose: a translucent plate takes its contrast from
   whatever card happens to be behind it, so the same plate would be readable on
   a dark template and unreadable on a paper one. The measured ratios against
   their own ink run from 6.3:1 (gold leaf) to 18.0:1 (wire). */

/* Ink: flat, matte, absorbs light. Reads as a printed rule, not a surface. */
.profile-nameplate[data-material="ink"] {
  --np-ground: #18171c;
  --np-ink: #f4f1e8;
}

/* Paper: warm stock, slightly darker at the bottom edge where it curls. */
.profile-nameplate[data-material="paper"] {
  --np-ground: #efe8d8;
  --np-ink: #17140e;
  --np-img: linear-gradient(178deg, rgb(255 255 255 / 0.5), rgb(120 100 70 / 0.14));
  --np-depth: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 2px 8px -4px rgb(0 0 0 / 0.5);
}

/* Steel: cold, one bright edge along the top, one dark shadow under it. */
.profile-nameplate[data-material="steel"] {
  --np-ground: #a9b4c0;
  --np-ink: #0e1216;
  --np-img: linear-gradient(180deg, rgb(255 255 255 / 0.44) 0 3px, transparent 3px),
            linear-gradient(176deg, rgb(255 255 255 / 0.22), rgb(15 23 42 / 0.26));
  --np-depth: inset 0 -1px 0 rgb(15 23 42 / 0.45), 0 1px 2px rgb(0 0 0 / 0.3);
}

/* Bone: pale, matte, faintly uneven. No gloss at all. */
.profile-nameplate[data-material="bone"] {
  --np-ground: #ece4d2;
  --np-ink: #1a1610;
  --np-img: radial-gradient(120% 90% at 30% 20%, rgb(255 255 255 / 0.55), transparent 70%),
            repeating-linear-gradient(94deg, rgb(150 138 112 / 0.07) 0 2px, transparent 2px 5px);
  --np-depth: inset 0 0 0 1px rgb(120 108 86 / 0.3);
}

/* Cloth: a woven linen, warp and weft visible, ground opaque. */
.profile-nameplate[data-material="cloth"] {
  --np-ground: #dcd0b7;
  --np-ink: #1c1710;
  --np-img: repeating-linear-gradient(0deg, rgb(120 106 84 / 0.18) 0 1px, transparent 1px 3px),
            repeating-linear-gradient(90deg, rgb(255 255 255 / 0.4) 0 1px, transparent 1px 3px);
  --np-depth: inset 0 0 0 1px rgb(96 84 62 / 0.3), inset 0 1px 0 rgb(255 255 255 / 0.45);
}

/* Stone: coarse, two tones, heavier at the base where a block would sit. */
.profile-nameplate[data-material="stone"] {
  --np-ground: #5b5651;
  --np-ink: #f7f3eb;
  --np-img: repeating-linear-gradient(64deg, rgb(255 255 255 / 0.07) 0 3px, transparent 3px 7px),
            linear-gradient(180deg, rgb(255 255 255 / 0.12), rgb(0 0 0 / 0.3));
  --np-depth: inset 0 1px 0 rgb(255 255 255 / 0.24), inset 0 -2px 5px rgb(0 0 0 / 0.4);
}

/* Glass: a real pane. It keeps a little of what is behind it, but a dark
   enough ground that the light ink is guaranteed; the diagonal sheen and the
   bright rim are what make it read as glass rather than as a grey box. */
.profile-nameplate[data-material="glass"] {
  --np-ground: rgb(43 49 58 / 0.9);
  --np-ink: #f4f7fb;
  --np-img: linear-gradient(118deg, rgb(255 255 255 / 0.22) 0 42%, transparent 42%),
            linear-gradient(180deg, rgb(255 255 255 / 0.12), transparent 60%);
  --np-depth: inset 0 0 0 1px rgb(255 255 255 / 0.28), inset 0 1px 0 rgb(255 255 255 / 0.38);
  backdrop-filter: blur(6px) saturate(120%);
}

/* Chrome: a mirror, so the banding is what makes it metal and not grey. */
.profile-nameplate[data-material="chrome"] {
  --np-ground: #c6d0db;
  --np-ink: #0d1116;
  --np-img: linear-gradient(176deg,
      rgb(255 255 255 / 0.72) 0%,
      rgb(100 116 139 / 0.34) 34%,
      rgb(255 255 255 / 0.66) 47%,
      rgb(71 85 105 / 0.36) 62%,
      rgb(255 255 255 / 0.4) 100%);
  --np-depth: inset 0 0 0 1px rgb(255 255 255 / 0.3), 0 1px 3px rgb(0 0 0 / 0.35);
}

/* Brass: warm, aged, one soft highlight. Not polished. */
.profile-nameplate[data-material="brass"] {
  --np-ground: #c2a45e;
  --np-ink: #221a06;
  --np-img: linear-gradient(172deg, rgb(255 246 208 / 0.55), transparent 46%, rgb(74 56 8 / 0.28) 82%, rgb(255 240 190 / 0.34));
  --np-depth: inset 0 1px 0 rgb(255 252 226 / 0.6), inset 0 -1px 0 rgb(74 56 8 / 0.45);
}

/* Marble: a pale ground with one vein crossing it. */
.profile-nameplate[data-material="marble"] {
  --np-ground: #ece9e3;
  --np-ink: #181510;
  --np-img: linear-gradient(114deg, transparent 42%, rgb(120 113 108 / 0.42) 44%, transparent 46%),
            linear-gradient(102deg, rgb(255 255 255 / 0.6), rgb(180 174 164 / 0.25));
  --np-depth: inset 0 0 0 1px rgb(120 113 108 / 0.32);
}

/* Vellum: skin, warm, no pattern, a hair darker at the edges. */
.profile-nameplate[data-material="vellum"] {
  --np-ground: #e5d6b7;
  --np-ink: #1c1710;
  --np-img: linear-gradient(180deg, rgb(255 250 236 / 0.5), rgb(150 124 82 / 0.16));
  --np-depth: inset 0 0 0 1px rgb(160 140 100 / 0.34);
}

/* Onyx: near-black, one hard specular line along the top. */
.profile-nameplate[data-material="onyx"] {
  --np-ground: #141319;
  --np-ink: #f4f1e8;
  --np-img: linear-gradient(180deg, rgb(255 255 255 / 0.16) 0 1px, transparent 1px),
            linear-gradient(168deg, rgb(255 255 255 / 0.07), transparent 40%);
  --np-depth: inset 0 0 0 1px rgb(255 255 255 / 0.13), 0 2px 10px -6px rgb(0 0 0 / 0.9);
}

/* Gold leaf: not an even wash but flakes — several bright sits over a dull
   ground, because real leaf never covers uniformly. */
.profile-nameplate[data-material="goldLeaf"] {
  --np-ground: #b8912f;
  --np-ink: #1a1303;
  --np-img: radial-gradient(38% 46% at 18% 30%, rgb(255 246 196 / 0.6), transparent 70%),
            radial-gradient(30% 40% at 62% 72%, rgb(255 240 170 / 0.45), transparent 72%),
            radial-gradient(26% 36% at 86% 22%, rgb(255 250 214 / 0.4), transparent 70%);
  --np-depth: inset 0 0 0 1px rgb(90 68 12 / 0.45);
}

/* Sand: dry and granular. The grain is the whole material. */
.profile-nameplate[data-material="sand"] {
  --np-ground: #ccbea5;
  --np-ink: #1c1710;
  --np-img: repeating-radial-gradient(circle at 30% 40%, rgb(90 78 58 / 0.1) 0 1px, transparent 1px 3px);
  --np-depth: inset 0 0 0 1px rgb(120 108 86 / 0.26);
}

/* Slate: split along one plane, so one half sits darker than the other. */
.profile-nameplate[data-material="slate"] {
  --np-ground: #3a4757;
  --np-ink: #f2f0ea;
  --np-img: linear-gradient(178deg, transparent 0 52%, rgb(0 0 0 / 0.22) 52%),
            repeating-linear-gradient(80deg, rgb(255 255 255 / 0.05) 0 2px, transparent 2px 6px);
  --np-depth: inset 0 1px 0 rgb(255 255 255 / 0.22);
}

/* Opaline: milky glass. Brighter at the lip than the middle, as opal is. */
.profile-nameplate[data-material="opaline"] {
  --np-ground: #d8e5ee;
  --np-ink: #152029;
  --np-img: radial-gradient(120% 100% at 50% 0%, rgb(255 255 255 / 0.85), transparent 68%),
            linear-gradient(180deg, rgb(255 255 255 / 0.3), rgb(90 120 145 / 0.18));
  --np-depth: inset 0 0 0 1px rgb(255 255 255 / 0.6), 0 1px 4px -2px rgb(0 0 0 / 0.5);
  backdrop-filter: blur(4px);
}

/* Wire: no ground at all, only a drawn outline. A drawing of a plate, and the
   only material that leaves the card visible behind the name. */
.profile-nameplate[data-material="wire"] {
  --np-ground: #f2f4f8;
  --np-fill: transparent;
  --np-ink: #f2f4f8;
  --np-depth: inset 0 0 0 1px rgb(242 244 248 / 0.55);
}

/* ══════════════════════════════════════════════════════════ 3. pairing
   Two corrections where a shape would otherwise disappear. A `rule` shape has
   no area to fill, so a surface material on it paints a bar under the name
   instead of a plate; and a `wire` material on a shape with no border has
   nothing to draw. Both are handled here rather than in the shape rules, so
   the two axes stay independent. */

/* A `rule` has no area to fill — it is a line. Filling it would turn the line
   into a slab, so the material is reduced to the thickness of the rule: the
   surface layer collapses to a two-pixel bar in the material's own ink. */


/* The shipped name is a white gradient. On a pale plate that is invisible, and
   on a dark plate it works by luck rather than by design. So a material takes
   the name back to its own ink: solid, and already contrast-checked against the
   ground it sits on.

   Three cases are excluded, and for the same reason — there is no plate:
     · `none` material and `wire` material (which draws an edge, not a ground);
     · the five shapes with no body (rule, bracket, underlineDouble, caustic,
       reticle), where the name sits on the card, not on a surface.
   In those cases the member keeps the name they chose.

   Text effects are excluded too: a clip effect paints its own fill from its own
   gradient and must keep it. The double `:not()` reads "no effect, or exactly
   `none`". */
.profile-nameplate:not([data-material="none"]):not([data-material="wire"]):not([data-shape="rule"]):not([data-shape="bracket"]):not([data-shape="underlineDouble"]):not([data-shape="caustic"]):not([data-shape="reticle"]) > .profile-name:not([class*="text-fx-"]:not(.text-fx-none)) {
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--np-ink, #f7f5ef);
  -webkit-text-fill-color: var(--np-ink, #f7f5ef);
}

/* A clip effect keeps its gradient, and a gradient can land as pale as the
   plate under it. The plate must not repaint the effect, so it gives the glyphs
   an edge instead: a hairline in the plate's own ink, which is by definition
   the colour that reads on this ground. The stroke sits under the fill, so the
   effect keeps its colours and gains only an edge — a letterpress impression,
   which is the same move the rest of the system makes. */
.profile-nameplate:not([data-material="none"]):not([data-material="wire"]):not([data-shape="rule"]):not([data-shape="bracket"]):not([data-shape="underlineDouble"]):not([data-shape="caustic"]):not([data-shape="reticle"]) > .profile-name[class*="text-fx-"]:not(.text-fx-none) {
  -webkit-text-stroke: 0.9px var(--np-ink, #000);
  filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--np-ink, #000) 45%, transparent));
}

/* A clip effect paints its own gradient, and a gradient can land as pale as the
   plate under it. The plate must not repaint the effect, so instead it gives the
   glyphs an edge: a one-pixel offset in the plate's own ink, which is a
   letterpress impression — the same thing the rest of the system does. It works
   on clipped text because `drop-shadow` follows the alpha of the glyph, not its
   colour. */
.profile-nameplate:not([data-material="none"]) > .profile-name[class*="text-fx-"]:not(.text-fx-none) {
  /* A hairline in the plate's ink. `--np-ink` is by definition the colour that
     reads on this ground, so the same stroke protects a pale gradient on paper
     and a pale gradient on onyx without either case being special-cased. The
     stroke sits under the glyph fill, so the effect keeps its own colours and
     gains only an edge. */
  -webkit-text-stroke: 0.9px var(--np-ink, #000);
  filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--np-ink, #000) 45%, transparent));
}

/* Four shapes are marks, not bodies: a hairline, a pair of brackets, a double
   rule and two sets of ticks. Filling those would erase the very thing that
   makes each one recognisable, so the surface layer paints nothing and the
   material contributes only its ink — which is exactly the part of a material
   these shapes can show. */
.profile-nameplate[data-shape="bracket"],
.profile-nameplate[data-shape="underlineDouble"],
.profile-nameplate[data-shape="caustic"],
.profile-nameplate[data-shape="reticle"],
.profile-nameplate[data-shape="rule"] {
  /* These five are marks, not bodies: a hairline, a pair of brackets, a double
     rule and two sets of ticks. Filling them would erase the thing that makes
     each one recognisable, so there is no surface and therefore no ink: the
     material shows up as the *colour of its marks*, and the name keeps the
     member's own treatment rather than taking a plate's ink. */
  --np-fill: transparent;
  --np-img: none;
  --np-depth: none;
  --np-ink: var(--np-ground, currentColor);
  /* A mark drawn for a plate is deliberately faint, because a plate is already
     carrying the eye. With no plate behind it the same mark has to be twice as
     strong to survive, so its opacity is scaled rather than its colour. */
  --np-mark-boost: 2.6;
}

/* A clipped shape has to clip its surface too, or the fill paints straight over
   the cut and the silhouette disappears. Both layers share the same inset box,
   so the same polygon applies to both. */
.profile-nameplate[data-shape="ticket"]::after {
  clip-path: polygon(
    0 0, 100% 0, 100% calc(50% - var(--np-notch)),
    calc(100% - 2px) 50%, 100% calc(50% + var(--np-notch)), 100% 100%,
    0 100%, 0 calc(50% + var(--np-notch)),
    2px 50%, 0 calc(50% - var(--np-notch))
  );
}
.profile-nameplate[data-shape="banner"]::after {
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%);
}
.profile-nameplate[data-shape="keystone"]::after {
  clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
}
.profile-nameplate[data-shape="seal"]::after {
  clip-path: polygon(
    var(--np-chamfer) 0, calc(100% - var(--np-chamfer)) 0,
    100% var(--np-chamfer), 100% calc(100% - var(--np-chamfer)),
    calc(100% - var(--np-chamfer)) 100%, var(--np-chamfer) 100%,
    0 calc(100% - var(--np-chamfer)), 0 var(--np-chamfer));
}

/* ══════════════════════════════════════════════════════════ 4. collapse */
/* Small screens: a plate with generous padding eats the line, so the lateral
   padding is halved. Nothing is removed — a member's choice still shows. */
@media (max-width: 520px) {
  .profile-nameplate[data-shape="capsule"],
  .profile-nameplate[data-shape="ticket"],
  .profile-nameplate[data-shape="banner"],
  .profile-nameplate[data-shape="seal"],
  .profile-nameplate[data-shape="reticle"] { padding-inline: 0.4em; }
  .profile-nameplate[data-shape="plate"],
  .profile-nameplate[data-shape="slab"],
  .profile-nameplate[data-shape="card"],
  .profile-nameplate[data-shape="label"],
  .profile-nameplate[data-shape="keystone"],
  .profile-nameplate[data-shape="stamp"],
  .profile-nameplate[data-shape="vitrine"],
  .profile-nameplate[data-shape="tab"],
  .profile-nameplate[data-shape="bracket"],
  .profile-nameplate[data-shape="caustic"],
  .profile-nameplate[data-shape="underlineDouble"] { padding-inline: 0.3em; }
}

/* The glass materials are the only ones that cost a composite pass. A device
   that has told us it is slow gets the plate without the blur, which keeps the
   material's look and drops the cost. */
html.is-slow-device .profile-nameplate[data-material="glass"]::after,
html.is-slow-device .profile-nameplate[data-material="opaline"]::after {
  /* Blur is the expensive part, so it goes; the ground stays. Replacing the
     ground with a pale wash would leave light ink on a pale plate, which is a
     contrast failure traded for a frame budget nobody asked for. */
  backdrop-filter: none;
}

/* ═══════════════════════════════════════════════════════ 5. second shelf
   Eighteen more of each, so every rung of the ladder has at least five plates
   and five surfaces to choose from. The contract is unchanged: a shape writes
   geometry only, a material writes surface only, and every material carries an
   opaque ground with an ink measured against it (lowest here: bronze, 6.16:1).
   ========================================================================= */

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

/* A notebook page: the top-right corner turned down, the fold drawn as a
   single diagonal hairline rather than a second block. */
.profile-nameplate[data-shape="docket"] { --np-radius: 1px; padding: 0.16em 0.66em 0.2em 0.5em; }
.profile-nameplate[data-shape="docket"]::before {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 0.55em) 0, 100% 0.55em, 100% 100%, 0 100%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--np-ink, currentColor) calc(30% * var(--np-mark-boost, 1)), transparent),
    inset -0.38em 0.38em 0 -0.34em color-mix(in srgb, var(--np-ink, currentColor) calc(26% * var(--np-mark-boost, 1)), transparent);
}
.profile-nameplate[data-shape="docket"]::after {
  clip-path: polygon(0 0, calc(100% - 0.55em) 0, 100% 0.55em, 100% 100%, 0 100%);
}

/* A standing tablet: tall shoulders, a wide foot, no top rounding. */
.profile-nameplate[data-shape="tablet"] { --np-radius: 3px 3px 1px 1px; padding: 0.2em 0.58em 0.14em; }
.profile-nameplate[data-shape="tablet"]::before {
  border-radius: 3px 3px 1px 1px;
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--np-ink, currentColor) calc(32% * var(--np-mark-boost, 1)), transparent);
}
.profile-nameplate[data-shape="tablet"]::after { clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); }

/* A dovetail: both bottom corners cut back on the diagonal. */
.profile-nameplate[data-shape="dovetail"] { --np-radius: 0; padding: 0.16em 0.56em 0.24em; }
.profile-nameplate[data-shape="dovetail"]::before {
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% 76%, 88% 100%, 12% 100%, 0 76%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--np-ink, currentColor) calc(30% * var(--np-mark-boost, 1)), transparent);
}
.profile-nameplate[data-shape="dovetail"]::after { clip-path: polygon(0 0, 100% 0, 100% 76%, 88% 100%, 12% 100%, 0 76%); }

/* A plaque: eight small bevels, the way a cast nameplate is trimmed. */
.profile-nameplate[data-shape="plaque"] { --np-radius: 0; padding: 0.15em 0.62em 0.19em; }
.profile-nameplate[data-shape="plaque"]::before {
  border-radius: 0;
  clip-path: polygon(11% 0, 89% 0, 100% 26%, 100% 74%, 89% 100%, 11% 100%, 0 74%, 0 26%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--np-ink, currentColor) calc(38% * var(--np-mark-boost, 1)), transparent),
    inset 0 0 0 3px color-mix(in srgb, var(--np-ink, currentColor) calc(14% * var(--np-mark-boost, 1)), transparent);
}
.profile-nameplate[data-shape="plaque"]::after {
  clip-path: polygon(11% 0, 89% 0, 100% 26%, 100% 74%, 89% 100%, 11% 100%, 0 74%, 0 26%);
}

/* An obelisk: narrower at the head than at the foot. */
.profile-nameplate[data-shape="obelisk"] { --np-radius: 0; padding: 0.18em 0.7em 0.16em; }
.profile-nameplate[data-shape="obelisk"]::before {
  border-radius: 0;
  clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--np-ink, currentColor) calc(32% * var(--np-mark-boost, 1)), transparent);
}
.profile-nameplate[data-shape="obelisk"]::after { clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%); }

/* A shingle: the foot rises to the left, as a slate does on a roof. */
.profile-nameplate[data-shape="shingle"] { --np-radius: 0; padding: 0.15em 0.56em 0.26em; }
.profile-nameplate[data-shape="shingle"]::before {
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 74%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--np-ink, currentColor) calc(30% * var(--np-mark-boost, 1)), transparent);
}
.profile-nameplate[data-shape="shingle"]::after { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 74%); }

/* A halo: the plate kept narrow so a ring of ink can sit outside it. */
.profile-nameplate[data-shape="halo"] { --np-radius: 999px; padding: 0.12em 0.72em 0.18em; }
.profile-nameplate[data-shape="halo"]::before {
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--np-ink, currentColor) calc(34% * var(--np-mark-boost, 1)), transparent),
    inset 0 0 0 4px color-mix(in srgb, var(--np-ink, currentColor) calc(10% * var(--np-mark-boost, 1)), transparent);
}

/* A lens: the plate is a long ellipse, wider than the type it carries. */
.profile-nameplate[data-shape="lens"] { --np-radius: 50%; padding: 0.16em 1em 0.22em; }
.profile-nameplate[data-shape="lens"]::before {
  border-radius: 50% / 50%;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--np-ink, currentColor) calc(40% * var(--np-mark-boost, 1)), transparent);
}

/* A fan: the plate widens toward the foot, the way light spreads. */
.profile-nameplate[data-shape="fan"] { --np-radius: 0; padding: 0.18em 0.92em 0.14em; }
.profile-nameplate[data-shape="fan"]::before {
  border-radius: 0;
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--np-ink, currentColor) calc(28% * var(--np-mark-boost, 1)), transparent);
}
.profile-nameplate[data-shape="fan"]::after { clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); }

/* A corona: a band crowned by a heavy rule with a hairline set below it. Both
   marks are gradients rather than shadows, because an inset shadow with a
   negative spread cannot hold a fixed stroke width across type sizes. */
.profile-nameplate[data-shape="corona"] { --np-radius: 1px; padding: 0.34em 0.6em 0.16em; }
.profile-nameplate[data-shape="corona"]::before {
  border-radius: 1px;
  background-image:
    linear-gradient(var(--np-ink, currentColor), var(--np-ink, currentColor)),
    linear-gradient(var(--np-ink, currentColor), var(--np-ink, currentColor));
  background-size: 100% 2px, calc(100% - 0.7em) 1px;
  background-position: center 0.11em, center 0.24em;
  background-repeat: no-repeat;
  opacity: 0.62;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--np-ink, currentColor) calc(30% * var(--np-mark-boost, 1)), transparent);
}

/* A rail: two heavy rules above and below, nothing on the sides. */
.profile-nameplate[data-shape="rail"] { --np-radius: 0; padding: 0.2em 0.42em 0.18em; }
.profile-nameplate[data-shape="rail"]::before {
  border-radius: 0;
  box-shadow:
    inset 0 2px 0 color-mix(in srgb, var(--np-ink, currentColor) calc(52% * var(--np-mark-boost, 1)), transparent),
    inset 0 -2px 0 color-mix(in srgb, var(--np-ink, currentColor) calc(52% * var(--np-mark-boost, 1)), transparent);
}

/* A panel: one corner cut away, the other three square. */
.profile-nameplate[data-shape="panel"] { --np-radius: 0; padding: 0.16em 0.58em 0.2em; }
.profile-nameplate[data-shape="panel"]::before {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 0.7em) 0, 100% 0.7em, 100% 100%, 0 100%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--np-ink, currentColor) calc(40% * var(--np-mark-boost, 1)), transparent),
    inset 0 0 0 4px color-mix(in srgb, var(--np-ink, currentColor) calc(9% * var(--np-mark-boost, 1)), transparent);
}
.profile-nameplate[data-shape="panel"]::after {
  clip-path: polygon(0 0, calc(100% - 0.7em) 0, 100% 0.7em, 100% 100%, 0 100%);
}

/* A notch: a shallow groove cut into the top edge, centred over the type. */
.profile-nameplate[data-shape="notch"] { --np-radius: 2px; padding: 0.42em 0.6em 0.16em; }
.profile-nameplate[data-shape="notch"]::before {
  border-radius: 2px;
  clip-path: polygon(0 0, 42% 0, 50% 22%, 58% 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--np-ink, currentColor) calc(34% * var(--np-mark-boost, 1)), transparent);
}
.profile-nameplate[data-shape="notch"]::after {
  clip-path: polygon(0 0, 42% 0, 50% 22%, 58% 0, 100% 0, 100% 100%, 0 100%);
}

/* A grid: square plate, with an L-shaped tick set into each corner. The ticks
   are gradients rather than shadows, because a shadow offset cannot draw two
   perpendicular strokes meeting at a point. */
.profile-nameplate[data-shape="grid"] { --np-radius: 0; padding: 0.18em 0.66em 0.18em; --np-tick: color-mix(in srgb, var(--np-ink, currentColor) calc(74% * var(--np-mark-boost, 1)), transparent); }
.profile-nameplate[data-shape="grid"]::before {
  border-radius: 0;
  background-image:
    linear-gradient(var(--np-tick), var(--np-tick)),
    linear-gradient(var(--np-tick), var(--np-tick)),
    linear-gradient(var(--np-tick), var(--np-tick)),
    linear-gradient(var(--np-tick), var(--np-tick)),
    linear-gradient(var(--np-tick), var(--np-tick)),
    linear-gradient(var(--np-tick), var(--np-tick)),
    linear-gradient(var(--np-tick), var(--np-tick)),
    linear-gradient(var(--np-tick), var(--np-tick));
  background-size: 0.4em 1px, 1px 0.4em, 0.4em 1px, 1px 0.4em, 0.4em 1px, 1px 0.4em, 0.4em 1px, 1px 0.4em;
  background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--np-ink, currentColor) calc(20% * var(--np-mark-boost, 1)), transparent);
}

/* A crest: the foot drawn down to a point, the shoulders squared. */
.profile-nameplate[data-shape="crest"] { --np-radius: 0; padding: 0.16em 0.66em 0.3em; }
.profile-nameplate[data-shape="crest"]::before {
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% 74%, 50% 100%, 0 74%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--np-ink, currentColor) calc(36% * var(--np-mark-boost, 1)), transparent);
}
.profile-nameplate[data-shape="crest"]::after { clip-path: polygon(0 0, 100% 0, 100% 74%, 50% 100%, 0 74%); }

/* A cartouche: a rectangular field with the ends turned out, as on a scroll. */
.profile-nameplate[data-shape="cartouche"] { --np-radius: 0; padding: 0.16em 0.86em 0.2em; }
.profile-nameplate[data-shape="cartouche"]::before {
  border-radius: 0;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--np-ink, currentColor) calc(34% * var(--np-mark-boost, 1)), transparent),
    inset 0.26em 0 0 -0.24em color-mix(in srgb, var(--np-ink, currentColor) calc(58% * var(--np-mark-boost, 1)), transparent),
    inset -0.26em 0 0 -0.24em color-mix(in srgb, var(--np-ink, currentColor) calc(58% * var(--np-mark-boost, 1)), transparent);
}

/* A diadem: three points on the top edge, the middle one tallest. */
.profile-nameplate[data-shape="diadem"] { --np-radius: 0; padding: 0.52em 0.7em 0.16em; }
.profile-nameplate[data-shape="diadem"]::before {
  border-radius: 0;
  clip-path: polygon(0 100%, 0 34%, 22% 34%, 32% 0, 42% 34%, 58% 34%, 68% 0, 78% 34%, 100% 34%, 100% 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--np-ink, currentColor) calc(36% * var(--np-mark-boost, 1)), transparent);
}
.profile-nameplate[data-shape="diadem"]::after {
  clip-path: polygon(0 100%, 0 34%, 22% 34%, 32% 0, 42% 34%, 58% 34%, 68% 0, 78% 34%, 100% 34%, 100% 100%);
}

/* A reliquary: a field inside a field, the inner frame set in from the cut. */
.profile-nameplate[data-shape="reliquary"] { --np-radius: 2px; padding: 0.24em 0.74em 0.26em; }
.profile-nameplate[data-shape="reliquary"]::before {
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--np-ink, currentColor) calc(46% * var(--np-mark-boost, 1)), transparent),
    inset 0 0 0 4px color-mix(in srgb, var(--np-ink, currentColor) calc(8% * var(--np-mark-boost, 1)), transparent),
    inset 0 0 0 5px color-mix(in srgb, var(--np-ink, currentColor) calc(30% * var(--np-mark-boost, 1)), transparent);
}

/* ------------------------------------------------------------- materials */

/* Linen: the weave is coarser than cloth, so the grid is wider and paler. */
.profile-nameplate[data-material="linen"] {
  --np-ground: #e8e0cd;
  --np-ink: #181510;
  --np-img: repeating-linear-gradient(0deg, rgb(120 104 76 / 0.16) 0 2px, transparent 2px 4px),
            repeating-linear-gradient(90deg, rgb(255 255 255 / 0.42) 0 2px, transparent 2px 4px);
  --np-depth: inset 0 0 0 1px rgb(120 104 76 / 0.28), inset 0 1px 0 rgb(255 255 255 / 0.5);
}

/* Kraft: unbleached board. One tone, a darker rim where the cut is. */
.profile-nameplate[data-material="kraft"] {
  --np-ground: #c8ab7d;
  --np-ink: #1d1608;
  --np-img: linear-gradient(174deg, rgb(255 246 224 / 0.4), rgb(96 74 40 / 0.16));
  --np-depth: inset 0 0 0 1px rgb(92 70 36 / 0.36), inset 0 -1px 0 rgb(92 70 36 / 0.3);
}

/* Tin: soft metal, duller than steel, with one rolled edge at the top. */
.profile-nameplate[data-material="tin"] {
  --np-ground: #9aa3a8;
  --np-ink: #10161a;
  --np-img: linear-gradient(180deg, rgb(255 255 255 / 0.34) 0 2px, transparent 2px),
            linear-gradient(168deg, rgb(255 255 255 / 0.16), rgb(20 28 34 / 0.2));
  --np-depth: inset 0 -1px 0 rgb(16 22 26 / 0.34), 0 1px 2px rgb(0 0 0 / 0.26);
}

/* Graphite: dark, soft, almost no reflection — a pencil rubbed flat. */
.profile-nameplate[data-material="graphite"] {
  --np-ground: #3a3d42;
  --np-ink: #f2f1ed;
  --np-img: repeating-linear-gradient(28deg, rgb(255 255 255 / 0.055) 0 2px, transparent 2px 5px),
            linear-gradient(180deg, rgb(255 255 255 / 0.09), transparent 55%);
  --np-depth: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}

/* Bronze: warmer and browner than brass, with the patina pooled at one end. */
.profile-nameplate[data-material="bronze"] {
  --np-ground: #b58b55;
  --np-ink: #150f05;
  --np-img: radial-gradient(90% 120% at 84% 88%, rgb(58 34 8 / 0.3), transparent 62%),
            linear-gradient(170deg, rgb(255 234 190 / 0.45), transparent 50%);
  --np-depth: inset 0 1px 0 rgb(255 240 200 / 0.5), inset 0 -1px 0 rgb(56 32 6 / 0.42);
}

/* Terrazzo: a pale bed with chips of other stone set into it. */
.profile-nameplate[data-material="terrazzo"] {
  --np-ground: #ded8cb;
  --np-ink: #1a1710;
  --np-img: radial-gradient(9% 22% at 18% 34%, rgb(96 88 74 / 0.34), transparent 100%),
            radial-gradient(7% 18% at 62% 22%, rgb(150 96 72 / 0.28), transparent 100%),
            radial-gradient(8% 20% at 84% 68%, rgb(88 96 104 / 0.3), transparent 100%),
            radial-gradient(6% 16% at 40% 78%, rgb(120 112 96 / 0.28), transparent 100%);
  --np-depth: inset 0 0 0 1px rgb(110 102 88 / 0.3);
}

/* Enamel: fired glass over metal. Deep colour, one hard specular streak. */
.profile-nameplate[data-material="enamel"] {
  --np-ground: #1f5f8b;
  --np-ink: #f2f7fb;
  --np-img: linear-gradient(118deg, rgb(255 255 255 / 0.3) 0 26%, transparent 26% 30%, rgb(255 255 255 / 0.1) 30% 62%, transparent 62%),
            linear-gradient(180deg, rgb(255 255 255 / 0.14), rgb(4 20 32 / 0.3));
  --np-depth: inset 0 0 0 1px rgb(255 255 255 / 0.26), inset 0 -2px 6px rgb(2 14 24 / 0.5);
}

/* Pearl: not white — a warm nacre with one soft bloom off-centre. */
.profile-nameplate[data-material="pearl"] {
  --np-ground: #f2ece2;
  --np-ink: #1a1611;
  --np-img: radial-gradient(56% 90% at 26% 22%, rgb(255 255 255 / 0.9), transparent 68%),
            radial-gradient(44% 80% at 78% 82%, rgb(196 176 156 / 0.5), transparent 70%),
            linear-gradient(112deg, rgb(255 250 244 / 0.5), rgb(188 172 152 / 0.22));
  --np-depth: inset 0 0 0 1px rgb(168 152 132 / 0.34);
}

/* Quartz: a cool stone, faintly lilac, with one fracture across it. */
.profile-nameplate[data-material="quartz"] {
  --np-ground: #e6dbe8;
  --np-ink: #1e1622;
  --np-img: linear-gradient(104deg, transparent 44%, rgb(126 108 136 / 0.34) 46%, transparent 49%),
            linear-gradient(180deg, rgb(255 255 255 / 0.55), rgb(150 130 160 / 0.2));
  --np-depth: inset 0 0 0 1px rgb(140 122 150 / 0.3);
}

/* Aurora: a dark ground with two soft bands of light across it. */
.profile-nameplate[data-material="aurora"] {
  --np-ground: #2e5f52;
  --np-ink: #eef7f2;
  --np-img: radial-gradient(80% 60% at 22% 24%, rgb(150 236 196 / 0.34), transparent 66%),
            radial-gradient(70% 60% at 82% 78%, rgb(120 190 236 / 0.26), transparent 68%),
            linear-gradient(168deg, rgb(255 255 255 / 0.1), rgb(2 26 22 / 0.34));
  --np-depth: inset 0 0 0 1px rgb(255 255 255 / 0.16);
}

/* Frost: white rime, brighter at the edges than in the middle. */
.profile-nameplate[data-material="frost"] {
  --np-ground: #dbe8f2;
  --np-ink: #141b22;
  --np-img: radial-gradient(120% 100% at 50% 50%, rgb(255 255 255 / 0.2) 24%, rgb(255 255 255 / 0.8) 100%),
            repeating-linear-gradient(64deg, rgb(120 148 172 / 0.1) 0 1px, transparent 1px 4px);
  --np-depth: inset 0 0 0 1px rgb(255 255 255 / 0.7), 0 1px 4px -2px rgb(40 60 80 / 0.5);
}

/* Carbon: a woven matte, the twill running one way only. */
.profile-nameplate[data-material="carbon"] {
  --np-ground: #24262a;
  --np-ink: #f0f1f3;
  --np-img: repeating-linear-gradient(45deg, rgb(255 255 255 / 0.07) 0 3px, transparent 3px 6px),
            repeating-linear-gradient(-45deg, rgb(0 0 0 / 0.24) 0 3px, transparent 3px 6px);
  --np-depth: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}

/* Titanium: darker than steel, one dull sheen, no banding. */
.profile-nameplate[data-material="titanium"] {
  --np-ground: #a8a9ad;
  --np-ink: #0f1013;
  --np-img: linear-gradient(172deg, rgb(255 255 255 / 0.24), transparent 46%, rgb(24 26 30 / 0.22));
  --np-depth: inset 0 1px 0 rgb(255 255 255 / 0.34), inset 0 -1px 0 rgb(24 26 30 / 0.3);
}

/* Phosphor: a screen lit from behind, the glow sitting in the middle. */
.profile-nameplate[data-material="phosphor"] {
  --np-ground: #123b24;
  --np-ink: #d8ffe6;
  --np-img: radial-gradient(70% 120% at 50% 50%, rgb(122 255 176 / 0.24), transparent 70%),
            repeating-linear-gradient(0deg, rgb(0 0 0 / 0.28) 0 1px, transparent 1px 3px);
  --np-depth: inset 0 0 0 1px rgb(122 255 176 / 0.24);
}

/* Iridium: a hard, cool metal with a tight bright rim. */
.profile-nameplate[data-material="iridium"] {
  --np-ground: #4b535e;
  --np-ink: #f4f6fa;
  --np-img: linear-gradient(180deg, rgb(255 255 255 / 0.28) 0 2px, transparent 2px),
            linear-gradient(160deg, rgb(255 255 255 / 0.12), rgb(10 14 20 / 0.3));
  --np-depth: inset 0 0 0 1px rgb(255 255 255 / 0.22), 0 2px 6px -4px rgb(0 0 0 / 0.8);
}

/* Obsidian: black volcanic glass, and the only one with a broken edge. */
.profile-nameplate[data-material="obsidian"] {
  --np-ground: #0e0d11;
  --np-ink: #f6f4ef;
  --np-img: linear-gradient(104deg, transparent 38%, rgb(255 255 255 / 0.16) 40%, transparent 42%),
            linear-gradient(174deg, rgb(255 255 255 / 0.1), transparent 38%);
  --np-depth: inset 0 0 0 1px rgb(255 255 255 / 0.14), 0 2px 12px -6px rgb(0 0 0 / 1);
}

/* Platinum: pale, dense, matte at the edges and bright along the crown. */
.profile-nameplate[data-material="platinum"] {
  --np-ground: #d9dce0;
  --np-ink: #15181c;
  --np-img: linear-gradient(180deg, rgb(255 255 255 / 0.62) 0 2px, transparent 3px),
            linear-gradient(166deg, rgb(255 255 255 / 0.3), rgb(96 104 116 / 0.28));
  --np-depth: inset 0 0 0 1px rgb(120 128 140 / 0.34), 0 1px 3px rgb(0 0 0 / 0.28);
}

/* Lacquer: deep red-brown, built up in coats, so the light sits on top. */
.profile-nameplate[data-material="lacquer"] {
  --np-ground: #1a0f0c;
  --np-ink: #f7efe6;
  --np-img: linear-gradient(180deg, rgb(255 236 214 / 0.9) 0 1px, transparent 1px),
            radial-gradient(80% 100% at 16% 0%, rgb(255 214 170 / 0.2), transparent 66%);
  --np-depth: inset 0 0 0 1px rgb(255 220 190 / 0.16), inset 0 -2px 8px rgb(0 0 0 / 0.6);
}

/* The new shapes are wider than the ones above, so the same narrow-screen
   correction applies to them. */
@media (max-width: 520px) {
  .profile-nameplate[data-shape="docket"],
  .profile-nameplate[data-shape="tablet"],
  .profile-nameplate[data-shape="dovetail"],
  .profile-nameplate[data-shape="plaque"],
  .profile-nameplate[data-shape="obelisk"],
  .profile-nameplate[data-shape="shingle"],
  .profile-nameplate[data-shape="fan"],
  .profile-nameplate[data-shape="panel"],
  .profile-nameplate[data-shape="notch"],
  .profile-nameplate[data-shape="grid"],
  .profile-nameplate[data-shape="crest"],
  .profile-nameplate[data-shape="cartouche"],
  .profile-nameplate[data-shape="diadem"],
  .profile-nameplate[data-shape="reliquary"],
  .profile-nameplate[data-shape="corona"],
  .profile-nameplate[data-shape="halo"],
  .profile-nameplate[data-shape="lens"] { padding-inline: 0.34em; }
}