/* Recommended HTTP headers:
   Content-Type: text/css; charset=utf-8
   Cache-Control: public, max-age=31536000, immutable
   X-Content-Type-Options: nosniff
*/

/* Family gate (encryption mode). Shared by the tribute page and the family tree.

   The real content isn't in the HTML — it's ciphertext that gate.js decrypts
   once the date of birth is entered (see public/js/gate.js + crypto-gate.js).
   So the DEFAULT state hides everything but the gate screen, with no class
   needed: a no-JS visitor or the moment before JS runs shows only the gate, and
   there's nothing else in the document to leak. JS adds .gate-ok to reveal. */
.gate-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: #F8F4EF;
  color: #1A1410;
  font-family: 'Lora', Georgia, serif;
}
html:not(.gate-ok) body { overflow: hidden; }
html:not(.gate-ok) body > *:not(.gate-screen) { display: none !important; }
html.gate-ok .gate-screen { display: none; }

/* While silently retrying a remembered DOB, hide the prompt so returning
   visitors don't see the form flash before the content appears. */
html.gate-checking .gate-card { visibility: hidden; }

.gate-card {
  width: 100%;
  max-width: 24rem;
  text-align: center;
}

.gate-card h1 {
  font-family: 'Cormorant Garibaldi', Georgia, serif;
  font-weight: 400;
  font-size: 2.4rem;
  margin: 0 0 0.25rem;
}

.gate-card .gate-sub {
  margin: 0 0 1.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #6b5f52;
}

.gate-form { display: flex; flex-direction: column; gap: 0.75rem; }

.gate-form label {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b5f52;
  text-align: left;
}

.gate-input {
  font: inherit;
  font-size: 1.15rem;
  text-align: center;
  letter-spacing: 0.12em;
  padding: 0.7rem 0.9rem;
  border: 1px solid #d8cdbe;
  border-radius: 0.5rem;
  background: #fffdf9;
  color: inherit;
}

.gate-input:focus-visible {
  outline: none;
  border-color: #9a7b4f;
  box-shadow: 0 0 0 3px rgba(154, 123, 79, 0.18);
}

.gate-btn {
  font: inherit;
  font-size: 1rem;
  padding: 0.65rem 1rem;
  border: 0;
  border-radius: 0.5rem;
  background: #9a7b4f;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.gate-btn:hover,
.gate-btn:focus-visible { background: #856a43; }
.gate-btn:disabled { opacity: 0.7; cursor: default; }

.gate-error {
  min-height: 1.25rem;
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: #a23b2e;
}
.gate-error[hidden] { display: block; visibility: hidden; }

/* Visitors with JS off can never satisfy the gate (the content is encrypted and
   only JS can decrypt it), so tell them plainly. .has-js is set by the head guard. */
.gate-nojs { margin-top: 1rem; font-size: 0.85rem; color: #a23b2e; }
.has-js .gate-nojs { display: none; }

@media (prefers-color-scheme: dark) {
  .gate-screen { background: #1A1410; color: #F3ECE1; }
  .gate-card .gate-sub { color: #b6a691; }
  .gate-form label { color: #b6a691; }
  .gate-input { background: #241c14; border-color: #4a3d2d; }
  .gate-input:focus-visible { border-color: #c9a86f; box-shadow: 0 0 0 3px rgba(201, 168, 111, 0.22); }
  .gate-btn { background: #c9a86f; color: #1A1410; }
  .gate-btn:hover, .gate-btn:focus-visible { background: #d8bd8a; }
}