@font-face{font-family:Stolzl;src:url('assets/stolzl-bold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:Stolzl;src:url('assets/stolzl-regular.otf') format('opentype');font-weight:400;font-display:swap}
:root{color-scheme:light;--paper:#ede2d9;--crimson:#9b0002;--tile-height:1.42em}
*{box-sizing:border-box}
html{min-width:280px;background:var(--paper)}
body{margin:0;min-height:100svh;background:var(--paper);color:var(--crimson);font-family:Stolzl,Arial,sans-serif;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column}
::selection{background:var(--crimson);color:var(--paper)}
header{display:flex;justify-content:center;padding:40px 24px 0}
.primary-logo{display:block;width:88px;height:auto}
main{flex:1;display:grid;place-items:center;text-align:center;padding:64px 24px 120px;min-height:460px}
h1{font-size:clamp(38px,9.8vw,100px);line-height:1.1;font-weight:700;margin:0}
.flap-display{border:0;padding:0;background:transparent;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.flap-display:focus-visible{outline:2px solid var(--crimson);outline-offset:12px}
.flap-row{display:flex;justify-content:center;gap:.07em}
.flap-row+.flap-row{margin-top:.12em}
.tile{position:relative;display:block;width:.9em;height:var(--tile-height);perspective:500px;text-align:center;color:var(--paper);letter-spacing:-.025em}
.half{position:absolute;left:0;width:100%;height:50%;overflow:hidden;background:var(--crimson);backface-visibility:hidden;transform-style:preserve-3d}
.half>span{position:absolute;left:0;top:0;width:100%;height:calc(2 * 100%);display:flex;align-items:center;justify-content:center;line-height:1}
.top,.moving-top{top:0;border-radius:2px 2px 0 0;transform-origin:bottom}
.bottom,.moving-bottom{top:50%;border-radius:0 0 2px 2px;transform-origin:top;background:#930002}
.bottom>span,.moving-bottom>span{top:-100%}
.moving-top,.moving-bottom{visibility:hidden;z-index:2}
.tile:after{content:'';position:absolute;z-index:4;left:0;right:0;top:50%;height:1px;background:#610004;pointer-events:none}
.tile.flipping .moving-top{visibility:visible;animation:fold-top 130ms ease-in forwards}
.tile.flipping .moving-bottom{visibility:visible;transform:rotateX(90deg);animation:fold-bottom 130ms 130ms ease-out forwards}
.brand-message{font-size:13px;font-weight:400;line-height:1.75;margin:32px 0 0;color:#59453c}



@keyframes fold-top{to{transform:rotateX(-90deg)}}
@keyframes fold-bottom{to{transform:rotateX(0)}}
@media(prefers-reduced-motion:reduce){.tile.flipping .moving-top,.tile.flipping .moving-bottom{animation:none;visibility:hidden}}
@media(max-width:600px){header{padding-top:32px}.primary-logo{width:72px}main{padding:48px 18px 100px;min-height:370px}h1{font-size:clamp(27px,11vw,60px)}.brand-message{font-size:12px;margin-top:28px}}
@media(max-height:550px){header{padding-top:20px}.primary-logo{width:52px}main{padding:36px 24px 54px;min-height:320px}h1{font-size:clamp(27px,9vw,54px)}}