[hidden] { display: none !important; }
.age-gate { min-height: 100svh; display: grid; place-items: center; padding: 32px 20px; background: #261636; }
.age-card { width: min(100%, 560px); padding: 34px clamp(22px, 5vw, 52px); text-align: center; background: #f5f0eb; color: #261636; border-top: 6px solid #d5ec69; }
.age-logo { display: block; width: 94px; height: auto; margin: 0 auto 20px; mix-blend-mode: multiply; }
.age-card h2 { font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1.1; margin: 14px 0 18px; }
.age-card p { line-height: 1.55; }
.age-actions { display: grid; gap: 12px; margin: 25px 0; }
.age-actions .button { width: 100%; white-space: normal; }
.age-card .age-note { font-size: .875rem; margin-top: 24px; }
.age-privacy { font-size: .875rem; text-decoration: underline; }
#age-denied { padding: 20px; background: #eadce8; margin: 24px 0; }
.age-card :focus-visible { outline: 3px solid #673e78; outline-offset: 4px; }

/* Keep the page in the HTML and layout beneath an opaque, modal age gate. */
body.age-pending { overflow: hidden; }
.age-gate { position: fixed; inset: 0; z-index: 100000; overflow-y: auto; overscroll-behavior: contain; min-height: 100%; }