/* Maker's plate components: the plate, photo frames and FIG. captions. Colours and type come from tokens.css. */
@import url("tokens.9f95e9d350e7.css");

* { box-sizing: border-box; margin: 0; }
body { background: var(--page); color: var(--text); font-family: var(--font); }

/* The plate: maker's name over the person, a raised rim and four rivets. No serial. */
.plate { position: relative; display: inline-block; background: var(--plate); color: var(--plate-text); border-radius: 6px; padding: 18px 44px 16px; text-align: center; box-shadow: inset 0 0 0 2px var(--plate-rim); }
.plate::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--plate-line); border-radius: 3px; }
.plate i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--plate-rim); }
.plate i:nth-of-type(1) { left: 13px; top: 13px; } .plate i:nth-of-type(2) { right: 13px; top: 13px; }
.plate i:nth-of-type(3) { left: 13px; bottom: 13px; } .plate i:nth-of-type(4) { right: 13px; bottom: 13px; }
.plate .n1 { display: block; letter-spacing: .16em; text-transform: uppercase; }
.plate .n2 { display: block; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--plate-line); letter-spacing: .2em; text-transform: uppercase; }

/* Photo frames: Marco's own photos only, never stock or generated. An empty frame shows a cross and a label. */
.photo { position: relative; overflow: hidden; background: var(--frame); display: flex; align-items: flex-end; }
.photo img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.photo::before, .photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - .5px), var(--frame-line) calc(50% - .5px), var(--frame-line) calc(50% + .5px), transparent calc(50% + .5px)); }
.photo::after { transform: scaleX(-1); }
.photo span { position: relative; z-index: 2; background: var(--page); color: var(--text); font-size: 13px; padding: 6px 10px; margin: 12px; }
.fig { font-size: 13px; color: var(--text-2); margin-top: 8px; letter-spacing: .02em; }
.fig b { color: var(--text); font-weight: 400; letter-spacing: .1em; }