/* Extruded lettering showpiece, in the Tone Segurado kit (~/Dev/parts/kits.json "tone-segurado"): warm cream paper
   in a thick black-lined frame, one huge pair of words pushed out into a deep two-tone block (butter face, orange
   sides, darker undersides, inked all round), the bank part's own source colours. */
:root { --paper: #fbf4ec; --frame: #e8e6e0; --ink: #161616; --orange: #f69b66; --butter: #f6d489; --sky: #7ac0fd;
  --pad: clamp(16px, 4.5vw, 52px); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: var(--frame); color: var(--ink); overflow: hidden; font: 600 16px/1.45 Anybody, system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
.frame { position: absolute; inset: 14px; border: 3px solid var(--ink); background: var(--paper); display: flex; flex-direction: column; overflow: hidden; }
.nav { display: flex; justify-content: space-between; align-items: center; padding: 22px var(--pad) 0; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 15px; }
.mark { display: flex; }
.mark i { width: 26px; height: 26px; margin-right: -6px; border: 3px solid var(--ink); border-radius: 50%; background: var(--butter); }
.mark i:nth-child(2) { background: var(--sky); } .mark i:nth-child(3) { background: var(--orange); }
.links { display: flex; gap: 10px; }
.links a { padding: 8px 16px; border: 3px solid var(--ink); border-radius: 99px; background: #fff; }
.links a.hi { background: var(--orange); }

.stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(28px, 5vh, 56px); padding: 0 var(--pad) 4vh; }
.sign { display: flex; flex-direction: column; align-items: center; font-size: min(28vw, 25vh, 300px); line-height: .9; cursor: default; user-select: none; }
.word { --xl-fill: #f6d489; --xl-wdth: 82; --xl-wght: 900; --xl-depth: .2em; --xl-line: .028em; padding: .12em .2em; }
.line { max-width: 30ch; text-align: center; font-size: clamp(17px, 2.2vw, 23px); }
@media (max-width: 520px) { .nav { font-size: 12px; } .links { gap: 6px; } .links a { padding: 6px 11px; white-space: nowrap; } .mark i { width: 22px; height: 22px; } }