/* --- core palette & reset --- */
*{box-sizing:border-box;margin:0;padding:0;font:16px/1.4 system-ui;color:#fff}
body{background:#444;min-height:100vh;display:flex;flex-direction:column}
a{color:#fff;text-decoration:none}

/* --- 6-column grid helper (auto rows) --- */
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;padding:1rem}

/* header / nav */
.header{align-items:center}
#menu{grid-column:5/-1;display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}
#menu li{list-style:none;}

/* banner */
.banner{min-height:20vh;place-items:center;font-size:clamp(2rem,4vw,4rem);}

/* page body area takes remaining height */
.page{flex:1;grid-column:1/-1;margin-top:1rem}

/* footer */
.footer{text-align:center;padding:1rem 0;font-size:.875rem}

/* --- transitions --- */
.page{transform:translateX(100%);opacity:0;transition:transform .6s cubic-bezier(.4,.0,.2,1),opacity .4s}
.page.is-current{transform:none;opacity:1}

.slide-enter{transform:translateX(-100%) scale(.9);opacity:0}
.slide-enter-active{transform:none;opacity:1;transition:all .6s ease}
.slide-exit{transform:none;opacity:1}
.slide-exit-active{transform:translateX(100%) scale(.9);opacity:0;transition:all .6s ease}