/* Plaques (plaque.js): a few words set on a material. Every length inside one is a share of its
   width, so a plaque is drawn the same at any size: in the showcase, in the inventory and up close. */
.plaque { position: relative; display: block; width: 100%; aspect-ratio: var(--plaque-ratio, 3); container-type: inline-size; }
/* The shadow falls from the plaque's own outline, whatever its shape. */
.plaque-body { position: absolute; inset: 0; filter: drop-shadow(0 0.8cqw 1.2cqw rgba(0, 0, 0, 0.3)); }
.plaque-plate { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; box-sizing: border-box; }
.plaque-fixings { position: absolute; inset: 0; pointer-events: none; }
.plaque-text { position: relative; display: grid; justify-items: center; font-size: calc(var(--plaque-size, 9) * 1cqw); line-height: 1.2; text-align: center; white-space: pre; }
.plaque-line { display: block; }

/* Brass: a brushed plate with a bevelled edge on four screws, its letters cut in and blacked. */
.plaque.is-brass-plaque .plaque-plate {
    border-radius: 1.6cqw;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 0.3cqw, rgba(0, 0, 0, 0.045) 0.3cqw 0.7cqw),
        linear-gradient(165deg, #f6dd92 0%, #cba145 26%, #ecd07d 47%, #a8802a 72%, #dcbb5f 100%);
    box-shadow: inset 0 0 0 0.6cqw rgba(255, 245, 205, 0.55), inset 0 0 0 1cqw rgba(92, 62, 10, 0.5);
    color: #2c1d06;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-shadow: 0 0.22cqw 0 rgba(255, 242, 196, 0.7), 0 -0.1cqw 0 rgba(0, 0, 0, 0.35);
    text-transform: uppercase;
}
.plaque.is-brass-plaque .plaque-fixings {
    --screw: radial-gradient(circle, #5a3d0a 0 12%, #f7e3a2 16% 30%, #b8902f 44%, #6a4b10 62%, transparent 66%);
    background: var(--screw) 2.4cqw 2.4cqw, var(--screw) calc(100% - 2.4cqw) 2.4cqw, var(--screw) 2.4cqw calc(100% - 2.4cqw), var(--screw) calc(100% - 2.4cqw) calc(100% - 2.4cqw);
    background-repeat: no-repeat;
    background-size: 4.6cqw 4.6cqw;
}

/* Marble: a white slab, grey veins across it, its letters carved and gilded, held by two brass studs. */
.plaque.is-marble-plaque .plaque-plate {
    border-radius: 0.8cqw;
    /* The veins follow the contour lines of a slow noise, a finer set under a bolder one. */
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='440' height='192'><filter id='v' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.006 .014' numOctaves='5' seed='11'/><feColorMatrix values='0 0 0 0 .42 0 0 0 0 .44 0 0 0 0 .5 1 0 0 0 0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0 0 0 0 0 .7 0 0 0 0 0 0'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23v)'/></svg>") center / cover,
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='440' height='192'><filter id='v' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.015 .03' numOctaves='4' seed='4'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .56 1 0 0 0 0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0 0 0 0 0 0 .3 0 0 0 0 0 0 0'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23v)'/></svg>") center / cover,
        radial-gradient(ellipse at 30% 18%, #ffffff, #efeeeb 58%, #dcdad5);
    box-shadow: inset 0 0 0 0.45cqw rgba(255, 255, 255, 0.85), inset 0 0 0 0.75cqw rgba(0, 0, 0, 0.13), inset 0 -1cqw 1.6cqw rgba(0, 0, 0, 0.07);
    color: #a27b1f;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-shadow: 0 -0.14cqw 0 rgba(60, 40, 0, 0.55), 0 0.2cqw 0 rgba(255, 255, 255, 0.95);
    text-transform: uppercase;
}
.plaque.is-marble-plaque .plaque-text { line-height: 1.3; }
.plaque.is-marble-plaque .plaque-fixings {
    --stud: radial-gradient(circle, #fff3c4 0 16%, #d9a441 34%, #7a5214 60%, transparent 64%);
    background: var(--stud) 2.6cqw 50%, var(--stud) calc(100% - 2.6cqw) 50%;
    background-repeat: no-repeat;
    background-size: 4cqw 4cqw;
}

/* Wood: a plank with rough-sawn ends, its grain running along it, the words burnt in with a hot iron. */
.plaque.is-wooden-sign .plaque-plate {
    clip-path: polygon(0 9%, 2.2% 1%, 30% 0, 71% 2.5%, 98% 0, 100% 12%, 98.8% 55%, 100% 91%, 97% 100%, 62% 97.5%, 24% 100%, 1.5% 97%, 0.8% 48%);
    background:
        radial-gradient(ellipse 9% 16% at 78% 30%, rgba(60, 30, 8, 0.4), transparent 70%),
        repeating-linear-gradient(1.5deg, rgba(60, 30, 8, 0.17) 0 0.3cqw, transparent 0.3cqw 1.5cqw, rgba(255, 220, 170, 0.07) 1.5cqw 1.8cqw, transparent 1.8cqw 3.3cqw),
        linear-gradient(180deg, #b47a40, #94602c 52%, #77481e);
    color: #2a1306;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 700;
    text-shadow: 0 0 0.45cqw rgba(50, 20, 0, 0.6), 0 0.15cqw 0 rgba(255, 215, 160, 0.2);
}
.plaque.is-wooden-sign .plaque-text { line-height: 1.15; }

/* Enamel: a deep blue street sign with a white line round it and white capitals, glossy, on four rivets. */
.plaque.is-enamel-sign .plaque-plate {
    border-radius: 3.6cqw;
    background:
        linear-gradient(168deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 36%),
        linear-gradient(160deg, #2c59ba, #183c88 58%, #112c68);
    box-shadow: inset 0 0 0 1.5cqw #183c88, inset 0 0 0 2.1cqw #f5f2e7, inset 0 0 0 2.5cqw rgba(0, 0, 0, 0.18);
    color: #f7f4ea;
    font-family: "Sora", sans-serif;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-shadow: 0 0.15cqw 0 rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
}
.plaque.is-enamel-sign .plaque-text { line-height: 1.15; }
.plaque.is-enamel-sign .plaque-fixings {
    --rivet: radial-gradient(circle, #e9e6dc 0 26%, #8d8a80 42%, #5b3a1d 56%, rgba(91, 58, 29, 0) 70%);
    background: var(--rivet) 3.3cqw 3.3cqw, var(--rivet) calc(100% - 3.3cqw) 3.3cqw, var(--rivet) 3.3cqw calc(100% - 3.3cqw), var(--rivet) calc(100% - 3.3cqw) calc(100% - 3.3cqw);
    background-repeat: no-repeat;
    background-size: 3.6cqw 3.6cqw;
}

/* A museum label: a white card on the wall, its first line the title and the rest said more quietly. */
.plaque.is-museum-label .plaque-plate {
    place-items: center start;
    padding: 0 10cqw;
    border-radius: 0.8cqw;
    background: linear-gradient(180deg, #fdfcf9, #f4f2ec);
    box-shadow: inset 0 0 0 0.35cqw rgba(0, 0, 0, 0.07);
    color: #23211d;
    font-family: "Sora", sans-serif;
}
.plaque.is-museum-label .plaque-text { justify-items: start; line-height: 1.3; text-align: left; }
.plaque.is-museum-label .plaque-line:first-child { font-weight: 800; }
.plaque.is-museum-label .plaque-line + .plaque-line { color: #5d584e; font-size: 0.72em; font-weight: 500; }

/* On the showcase it hangs like any other object, and comes closer in the inspector. */
.profile-showcase .plaque-preview,
.plaque-showcase .plaque-preview {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    cursor: zoom-in;
}
.plaque-showcase .plaque-preview, .plaque-stage { position: relative; }
.plaque-art { display: block; }
/* The stickers its owner put on it lie over the whole plaque (#1068), as wide as a seventh of it. */
.plaque-surface { position: absolute; inset: 0; --sticker-width: 14%; --sticker-height: auto; }
.plaque-stage { width: min(460px, 100%); margin: auto; }
.plaque-showcase .plaque-preview:hover, .plaque-showcase .plaque-preview:active { transform: none; background: transparent; box-shadow: none; }
.plaque-showcase .plaque-preview:focus-visible { outline: 3px solid #7543c5; outline-offset: 3px; }
.inspector-object.is-plaque { border-radius: 8px; }
.inspector-object.is-plaque .plaque { width: min(460px, 78vw); }
.card-page-inspected .card-page-preview .inspector-object.is-plaque .plaque { width: min(380px, 74vw); }

/* Its owner writes on it beside it. */
.plaque-writer { display: grid; gap: 8px; margin-top: 14px; }
.plaque-writer label { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.plaque-writer textarea { box-sizing: border-box; width: 100%; padding: 10px 12px; font: inherit; line-height: 1.4; resize: none; }
.plaque-writer button { justify-self: start; }