/* Passcode gate for protected case studies: a needlepoint pasture of cows that smile at the cursor */
html.is-gated, html.is-gated body { overflow: hidden; }
html.is-gated body > *:not(.gate) { visibility: hidden; }
html.is-gated .loader { display: none !important; }

.gate {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 16px;
  background: #5b9733; transition: opacity .55s var(--ease-standard, ease);
}
.gate.is-leaving { opacity: 0; pointer-events: none; }
body[data-page="case"] .gate .gate__bg { filter: none; }
.gate__bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.gate__card {
  position: relative; width: min(380px, 100%); padding: 28px 28px 24px;
  background: #FBFAF6; color: #161616; border-radius: 12px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .12), 0 24px 60px -12px rgb(20 50 10 / .55);
}
.gate__card.is-shaking { animation: gate-shake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes gate-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }

.gate__label { margin: 0 0 14px; font: 400 12px/1 var(--font-mono, monospace); text-transform: uppercase; letter-spacing: .04em; color: #5c5c5a; display: flex; gap: 8px; align-items: center; }
.gate__label::before { content: ""; width: 8px; height: 8px; background: #161616; border-radius: 1px; }
.gate__title { margin: 0 0 6px; font: 400 32px/1.1 var(--font-serif, "Newsreader", serif); letter-spacing: -.01em; }
.gate__hint { margin: 0 0 20px; font: 400 15px/1.45 var(--font-body, sans-serif); color: #4a4a48; }

.gate__field { display: flex; gap: 8px; }
.gate__input {
  flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 8px;
  border: 1px solid #b9b9b4; background: #fff; color: #161616;
  font: 400 16px/1 var(--font-mono, monospace); letter-spacing: .08em;
}
.gate__input:focus-visible { outline: 2px solid #161616; outline-offset: 1px; }
.gate__card.has-error .gate__input { border-color: #B7471D; }
.gate__btn {
  height: 44px; padding: 0 18px; border: 0; border-radius: 8px; cursor: pointer;
  background: #161616; color: #fff; font: 500 14px/1 var(--font-ntype, sans-serif);
  transition: transform .2s var(--ease-out, ease), background-color .2s;
}
.gate__btn:hover { background: #333; }
.gate__btn:active { transform: scale(.97); }
.gate__msg { min-height: 20px; margin: 10px 0 0; font: 400 13px/1.4 var(--font-body, sans-serif); color: #B7471D; }
.gate__back { display: inline-block; margin-top: 6px; font: 400 12px/1 var(--font-mono, monospace); text-transform: uppercase; letter-spacing: .04em; color: #161616; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 480px) { .gate__card { padding: 22px 20px 20px; } .gate__title { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { .gate__card.is-shaking { animation: none; } .gate { transition: none; } }