.cover-page { min-width:0; margin:0; background:#eeeddb; }
.cover { position:fixed; inset:0; max-width:none; margin:0; padding:0; overflow:hidden; }
.cover-art { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.cover-brand { position:absolute; top:38px; right:44px; z-index:1; color:#243a2b; }
.cover-brand .brand-name { font-size:32px; text-shadow:0 1px 12px #fdfcf9; }
.cover-brand .brand-mark span { background:#eeeddb; }
.cover-brand .brand-mark span:nth-child(2) { background:var(--teal); }
.cover-entry { position:absolute; top:54%; left:50%; transform:translate(-50%,-50%); pointer-events:none; }
.cover-enter { pointer-events:auto; display:flex; align-items:center; justify-content:space-between; gap:34px; padding:10px 10px 10px 28px; min-height:64px; min-width:210px; color:#284332; background:rgba(253,252,246,.92); border:1px solid #ffffffc4; border-radius:40px; box-shadow:0 4px 22px #2a3c2414,0 1px 3px #2a3c2410; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); text-decoration:none; font-size:16px; font-weight:500; letter-spacing:-.015em; transition:background .2s,box-shadow .2s,transform .2s,opacity .2s; }
.enter-symbol { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#315d42; color:#fff; transition:background .25s; }
.enter-symbol svg { display:block; transition:transform .25s; }
.cover-enter:hover { background:#fffef9; box-shadow:0 7px 26px #2a3c2426; transform:translateY(-2px); }
.cover-enter:hover .enter-symbol { background:#234a33; }
.cover-enter:hover .enter-symbol svg { transform:scale(1.08); }
.cover-enter:active { transform:translateY(0); }
.cover-enter:focus-visible { outline:2px solid #315d42; outline-offset:6px; }
.cover-brand { transition:opacity .2s; }
.cover-page.is-leaving .cover-enter, .cover-page.is-leaving .cover-brand { opacity:0; pointer-events:none; }
.cover-page.is-leaving .cover-enter { transform:translateY(-5px); }
@media(max-width:650px) {
  .cover-brand { top:25px; right:24px; }
  .cover-brand .brand-name { font-size:29px; }
  .cover-enter { min-width:194px; min-height:60px; padding-left:25px; font-size:15px; }
  .enter-symbol { width:38px; height:38px; }
}
@media(prefers-reduced-motion:reduce) {
  .cover-enter, .cover-brand, .enter-symbol, .enter-symbol svg { transition:none; }
  .cover-enter:hover, .cover-enter:hover .enter-symbol svg { transform:none; }
}