:root{color-scheme:light;--ink:#172832;--gold:#b49763;--logo-size:clamp(230px,37vw,390px)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#fff}
body{color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
main{min-height:100svh;display:grid;place-items:center;overflow:hidden;padding:32px 24px 48px}
.signature{margin:0;display:flex;flex-direction:column;align-items:center;animation:arrive 1.4s ease-out both}
.stage{width:var(--logo-size);height:calc(var(--logo-size) + 28px);position:relative;perspective:1000px;perspective-origin:50% 43%}
.float{width:100%;height:var(--logo-size);transform-style:preserve-3d}
.sculpture{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(-5deg) rotateY(0deg);animation:sway 6s cubic-bezier(.45,0,.55,1) -3s infinite alternate;will-change:transform}
.face,.slice{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.face{backface-visibility:hidden}
.front{transform:translateZ(12px)}
.back{transform:translateZ(-12px);backface-visibility:visible}
.slice{background-image:linear-gradient(120deg,#eadfc6 0%,#b1a28a 26%,#5b554b 54%,#cabca0 80%,#f1e9d7 100%),url('/assets/monogramme-gz.png');background-position:center;background-size:contain;background-repeat:no-repeat;background-blend-mode:multiply;mask:url('/assets/monogramme-gz.png') center/contain no-repeat;-webkit-mask:url('/assets/monogramme-gz.png') center/contain no-repeat;transform:translateZ(var(--depth))}
.reflection{animation:reflection 6s cubic-bezier(.45,0,.55,1) -3s infinite alternate}
.shadow{position:absolute;width:58%;height:12px;left:21%;bottom:17px;border-radius:50%;background:radial-gradient(ellipse,rgba(25,35,40,.13),rgba(25,35,40,0) 70%);filter:blur(7px)}
figcaption{text-align:center;margin-top:15px}
h1{margin:0;font-family:Georgia,'Times New Roman',serif;font-size:clamp(30px,5vw,40px);font-weight:400;letter-spacing:.27em;padding-left:.27em;line-height:1.25}
h1 span{display:block;font-family:Arial,Helvetica,sans-serif;font-size:9px;letter-spacing:.55em;padding-left:.55em;margin-bottom:9px;color:#94805d}
.gold-line{width:28px;height:1px;margin:24px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
@keyframes reflection{from{transform:translateX(-240px);opacity:.35}to{transform:translateX(240px);opacity:.8}}
@keyframes sway{from{transform:rotateX(-5deg) rotateY(-18deg)}to{transform:rotateX(-5deg) rotateY(18deg)}}
@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-height:540px){:root{--logo-size:210px}main{padding:16px}figcaption{margin-top:0}h1{font-size:27px}.gold-line{margin-top:14px}}
@media(prefers-reduced-motion:reduce){.signature,.sculpture,.float,.shadow,.reflection{animation:none}.sculpture{transform:rotateX(-5deg) rotateY(0deg)}}