.agegate {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(9, 18, 24, .82);
  -webkit-backdrop-filter: blur(7px) saturate(.9);
  backdrop-filter: blur(7px) saturate(.9);
}


.agegate[hidden] { display: none; }

.ag-panel {
  width: min(440px, 100%);
  background: var(--bone, #F5EFE4);
  color: var(--night, #241E16);
  box-shadow: 0 30px 90px -20px rgba(9, 18, 24, .75);
  animation: agIn .5s var(--ease-settle, cubic-bezier(.22, .61, .36, 1)) both;
}
@keyframes agIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.ag-crest {
  background: var(--night, #241E16);
  color: var(--ice, #F4F1EA);
  padding: 30px 32px 26px;
  text-align: center;
  border-bottom: 2px solid var(--amber, #D9A441);
}
.ag-crest svg { display: block; margin: 0 auto; overflow: visible; }
.ag-crest .logo-text {
  font: 400 15px/1 Archivo, system-ui, sans-serif;
  letter-spacing: 2.4px;
  fill: currentColor;
}

.ag-body { padding: 32px 32px 26px; text-align: center; }
.ag-body h2 {
  font-family: Fraunces, Georgia, serif;
  font-weight: 300;
  font-size: clamp(26px, 4.4vw, 32px);
  line-height: 1.12;
  margin: 0 0 12px;
}
.ag-body p {
  font: 400 14px/1.6 Archivo, system-ui, sans-serif;
  color: rgba(14, 28, 36, .76);
  max-width: 30em;
  margin: 0 auto;
}

.ag-acts { display: grid; gap: 10px; margin-top: 26px; }
.ag-btn {
  font: 600 12px/1 Archivo, system-ui, sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
  padding: 16px 18px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.ag-yes {
  background: var(--night, #241E16);
  color: var(--ice, #F4F1EA);
  border: 1px solid var(--night, #241E16);
}
.ag-yes:hover { transform: translateY(-1px); background: #16303c; }
.ag-no {
  background: none;
  color: var(--night, #241E16);
  border: 1px solid rgba(14, 28, 36, .42);
}
.ag-no:hover { border-color: var(--night, #241E16); background: rgba(14, 28, 36, .04); }

.ag-fine {
  font: 400 11.5px/1.55 Archivo, system-ui, sans-serif;
  color: rgba(14, 28, 36, .60);
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(14, 28, 36, .14);
}

.agegate.is-no .ag-acts,
.agegate.is-no .ag-fine { display: none; }


.agegate :focus-visible {
  outline: 2px solid var(--amber-ink, #845B18);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .ag-panel { animation: none; }
  .ag-btn { transition: none; }
  .ag-yes:hover { transform: none; }
}