/* Header 55H: settled logo the opening lands on, plus a hover gesture per style. */
.monogram.mg{position:relative;display:inline-flex;align-items:baseline;line-height:1}
.monogram.mg span{font-size:1em;margin-left:0;letter-spacing:inherit}
.mg .g{display:inline-block;position:relative;overflow:hidden;padding:.08em .01em .12em;vertical-align:baseline}
.mg .g>b{display:inline-block;font-weight:inherit}
.monogram.mg .g.h{font-size:.444444em;margin-left:.083333em;letter-spacing:0}
.mg .sheen{position:absolute;inset:-20% -40%;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,236,200,.85) 50%,transparent 60%);mix-blend-mode:overlay;transform:translateX(-120%)}
.mg .dot{display:inline-block;width:0;opacity:0;text-align:center;transition:width .6s cubic-bezier(.16,1,.3,1),opacity .4s}
.mg .g:not(.h){transition:letter-spacing .6s cubic-bezier(.16,1,.3,1)}
.mg{transition:transform .8s cubic-bezier(.16,1,.3,1)}

.mg[data-v="1"]:hover .sheen{transition:transform 1.1s cubic-bezier(.16,1,.3,1);transform:translateX(120%)}
.mg[data-v="2"]:hover .dot{width:.5em;opacity:1}
.mg[data-v="2"]:hover .g:not(.h){letter-spacing:.06em}
.mg[data-v="3"]:hover{transform:translateY(-1px) scale(1.04)}

/* Preview switcher (temporary, for choosing a style) */
.mg-switch{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:1001;display:flex;gap:4px;padding:5px;border-radius:40px;background:rgba(23,35,29,.82);backdrop-filter:blur(10px);color:#f3efe6;font:500 10px/1 Sans,Arial,sans-serif;letter-spacing:.08em;border:1px solid rgba(243,239,230,.14)}
.mg-switch button{padding:9px 14px;border-radius:30px;color:inherit;opacity:.65;transition:opacity .2s,background .2s}
.mg-switch button:hover,.mg-switch button:focus-visible{opacity:1}
.mg-switch button[aria-pressed=true]{background:#f3efe6;color:#17231d;opacity:1}
@media (prefers-reduced-motion:reduce){.mg,.mg *{transition:none!important}}