/* ============================================================
   THE ARCHIVE — Passcode gate (index.html only)
   Self-contained. No site content, no branding, no metadata.
   ============================================================ */
:root{
  --ivory:#F1EBDD;--ink:#151719;--indigo:#263747;--oxide:#9A4035;
  --brass:#A98545;--dust:#C8C1B4;--paper:#FAF8F3;--night:#11181E;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --serif:"Source Serif 4","Source Serif Pro",Georgia,"Times New Roman",serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--night);color:var(--paper);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  display:flex;align-items:center;justify-content:center;
  padding:32px 20px;overflow-x:hidden;
}
/* Faint archival grid — texture only, carries no content */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(241,235,221,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(241,235,221,.045) 1px,transparent 1px);
  background-size:64px 64px;
}
.gate{position:relative;z-index:1;width:100%;max-width:440px}
.gate__frame{
  border:1px solid rgba(241,235,221,.22);
  padding:clamp(30px,6vw,52px);
  position:relative;background:rgba(21,23,25,.35);
}
.gate__frame::before,.gate__frame::after{
  content:"";position:absolute;width:16px;height:16px;
}
.gate__frame::before{top:-1px;left:-1px;border-top:2px solid var(--brass);border-left:2px solid var(--brass)}
.gate__frame::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--brass);border-right:2px solid var(--brass)}

.gate__label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--dust);display:block;margin-bottom:26px;
}
.gate__field{position:relative;margin-bottom:8px}
.gate__input{
  width:100%;display:block;
  background:transparent;border:0;border-bottom:1px solid rgba(241,235,221,.35);
  color:var(--paper);
  font-family:var(--mono);font-size:19px;letter-spacing:.16em;
  padding:12px 0 14px;border-radius:0;
  transition:border-color .25s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.gate__input::placeholder{color:rgba(241,235,221,.3);letter-spacing:.2em}
.gate__input:focus{outline:none;border-bottom-color:var(--brass)}
.gate__input:focus-visible{outline:none}
.gate__field::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--brass);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.gate__field:focus-within::after{transform:scaleX(1)}

.gate__msg{
  min-height:22px;margin:14px 0 22px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#E08878;
  opacity:0;transition:opacity .25s var(--ease);
}
.gate__msg.is-shown{opacity:1}

.gate__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  border:1px solid var(--paper);background:var(--paper);color:var(--night);
  padding:16px 22px;
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  transition:background-color .25s var(--ease),color .25s var(--ease);
}
.gate__btn:hover{background:var(--brass);border-color:var(--brass);color:var(--night)}
.gate__btn:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.gate__btn svg{width:15px;height:15px;fill:currentColor;flex:none}

.gate.is-wrong{animation:shake .38s var(--ease)}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  22%{transform:translateX(-7px)}
  44%{transform:translateX(6px)}
  68%{transform:translateX(-3px)}
}
.gate__note{
  margin-top:20px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(241,235,221,.4);text-align:center;
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
@media (max-width:400px){
  .gate__input{font-size:17px}
  .gate__btn{padding:15px 18px;font-size:11px;letter-spacing:.14em}
}