/* ============================================================
   Arkidas Age Gate — research-verification popup
   A centred modal over the dimmed site (Grey Axis uses a full-bleed
   two-column wall; the client asked for this one as a popup).
   Brand: ink #15161a, cream #f8f5ef, gold #a88a57, Cormorant Garamond
   display + Inter body, 2px corners, fine gold rules.
   ============================================================ */

.ark-gate,
.ark-gate *,
.ark-gate *::before,
.ark-gate *::after { box-sizing: border-box; }

body.ark-gate-active {
  overflow: hidden !important;
}

/* ── Backdrop ── */
.ark-gate {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(10, 11, 13, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: #1c1d20;
  line-height: 1.55;
  animation: ark-gate-fade 0.28s ease both;
}
@keyframes ark-gate-fade { from { opacity: 0; } to { opacity: 1; } }

/* The scroller is the backdrop's child, so a tall form scrolls the popup,
   never the page behind it. dvh keeps it honest while iOS Safari's URL bar
   shows and hides. */
.ark-gate-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 18px;
  min-height: 100vh;
}
/* auto margins, not align-items:center — a card taller than the screen would
   otherwise overflow equally top and bottom, and the top (the wordmark) can
   never be scrolled back into view. */
.ark-gate-card { margin: auto; }
@supports (min-height: 100dvh) {
  .ark-gate-scroll { min-height: 100dvh; }
}

/* ── Card ── */
.ark-gate-card {
  width: 100%;
  max-width: 560px;
  background: #f8f5ef;
  border: 1px solid #cdc2b1;
  border-radius: 2px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  animation: ark-gate-rise 0.34s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}
@keyframes ark-gate-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ── Head: ink band with the wordmark ── */
.ark-gate-head {
  background: #15161a;
  padding: 26px 30px 22px;
  text-align: center;
}
.ark-gate-wordmark {
  display: block;
  font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: #ffffff;
  font-variant-numeric: lining-nums;
  line-height: 1.1;
}
.ark-gate-rule {
  display: block;
  width: 46px;
  height: 1px;
  margin: 13px auto 11px;
  background: #a88a57;
}
.ark-gate-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* ── Body ── */
.ark-gate-body { padding: 26px 30px 6px; }

.ark-gate-title {
  margin: 0 0 8px;
  font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #15161a;
  line-height: 1.2;
}
.ark-gate-lede {
  margin: 0 0 20px;
  font-size: 13.5px;
  color: #6e6a63;
}

/* ── Tabs ── */
.ark-gate-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e3dbcf;
  margin-bottom: 20px;
}
.ark-gate-tab {
  flex: 1;
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 11px 6px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6e6a63;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.ark-gate-tab:hover { color: #15161a; }
.ark-gate-tab.active {
  color: #15161a;
  border-bottom-color: #a88a57;
}

/* ── Forms ── */
.ark-gate-form { display: none; }
.ark-gate-form.active { display: block; }
.ark-gate-step { display: none; }
.ark-gate-step.active { display: block; }

.ark-gate-stepline {
  margin: 0 0 16px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a88a57;
}
.ark-gate-stepline strong { color: #15161a; font-weight: 600; }

.ark-gate-hint {
  margin: 0 0 16px;
  padding: 11px 13px;
  background: #f0eae0;
  border-left: 2px solid #a88a57;
  font-size: 13px;
  color: #3b3c42;
}

.ark-gate-field { margin-bottom: 14px; }
.ark-gate-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ark-gate-field-row--3 { grid-template-columns: 1.3fr 1fr 1fr; }

.ark-gate-label {
  display: block;
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #3b3c42;
}
.ark-gate-optional {
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: #8d8779;
}

.ark-gate-field input,
.ark-gate-field select {
  width: 100%;
  padding: 11px 12px;
  background: #ffffff;
  border: 1px solid #cdc2b1;
  border-radius: 2px;
  font: inherit;
  font-size: 14px;
  color: #1c1d20;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
  -webkit-appearance: none;
  appearance: none;
}
.ark-gate-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236e6a63' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.ark-gate-field input:focus,
.ark-gate-field select:focus {
  outline: none;
  border-color: #a88a57;
  box-shadow: 0 0 0 3px rgba(168, 138, 87, 0.18);
}
.ark-gate-field input::placeholder { color: #a9a396; }

/* ── Checkboxes ── */
.ark-gate-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 12px;
  font-size: 12.5px;
  color: #3b3c42;
  cursor: pointer;
}
.ark-gate-check input {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  accent-color: #a88a57;
}
.ark-gate-check strong { color: #15161a; }
.ark-gate-check--inline { margin: 0; font-size: 12.5px; align-items: center; }

.ark-gate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 18px;
}
.ark-gate-link {
  font-size: 12.5px;
  color: #a88a57;
  text-decoration: none;
  border-bottom: 1px solid rgba(168, 138, 87, 0.4);
}
.ark-gate-link:hover { color: #15161a; border-bottom-color: #15161a; }

/* ── Buttons ── */
.ark-gate-btn {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 14px 18px;
  background: #15161a;
  color: #ffffff;
  border: 0;
  border-radius: 2px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease;
}
.ark-gate-btn:hover:not(:disabled) { background: #a88a57; }
.ark-gate-btn:disabled { opacity: 0.6; cursor: default; }

.ark-gate-back {
  display: block;
  width: 100%;
  margin: 12px 0 0;
  padding: 8px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 12.5px;
  color: #6e6a63;
  cursor: pointer;
}
.ark-gate-back:hover { color: #15161a; }

/* ── Error ── */
.ark-gate-error {
  margin-bottom: 16px;
  padding: 11px 13px;
  background: #fdf3f3;
  border: 1px solid #e6c9c9;
  border-left: 2px solid #b4453f;
  border-radius: 2px;
  font-size: 13px;
  color: #8d332e;
}

/* Honeypot — off-screen, never shown to a person. */
.ark-gate-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Foot ── */
.ark-gate-foot {
  margin-top: 22px;
  padding: 13px 20px;
  background: #15161a;
  text-align: center;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.ark-gate-foot i { font-style: normal; margin: 0 8px; opacity: 0.55; }

/* ── Small screens ── */
@media (max-width: 560px) {
  .ark-gate-scroll { padding: 0; align-items: flex-start; }
  .ark-gate-card {
    margin: 0;
    max-width: none;
    min-height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .ark-gate-head { padding: 22px 20px 18px; }
  .ark-gate-wordmark { font-size: 24px; letter-spacing: 0.34em; text-indent: 0.34em; }
  .ark-gate-body { padding: 22px 20px 4px; }
  .ark-gate-title { font-size: 23px; }
  .ark-gate-field-row,
  .ark-gate-field-row--3 { grid-template-columns: 1fr; gap: 0; }
  .ark-gate-field-row .ark-gate-field { margin-bottom: 14px; }
  /* 16px stops iOS Safari zooming the page when a field takes focus. */
  .ark-gate-field input,
  .ark-gate-field select { font-size: 16px; padding: 12px; }
}

/* Phones: the card fills the screen, so pin the ink foot to the bottom of it.
   Without this the foot sat under the form and left an empty cream band
   below it on tall screens (iOS Safari once the URL bar hides). */
@media (max-width: 560px) {
  .ark-gate-card { display: flex; flex-direction: column; }
  .ark-gate-body { flex: 1 0 auto; }
}

/* TranslatePress EN/ES switcher: keep it reachable while the gate is open
   (it sits under the backdrop otherwise) and park it top-right, over the ink
   head band, so it never covers the form or the foot. */
body.ark-gate-active .trp-floating-switcher {
  z-index: 1000000;
  top: 12px;
  bottom: auto;
  right: 12px;
  --switcher-padding: 2px 0 !important;
  --border-radius: 2px !important;
}