/* ==================================================================
   Private Access — gate stylesheet
   No imagery. Type, rule, geometry and colour only.
   ================================================================== */

:root{
  --forest:#173A32;
  --heritage:#315B4E;
  --bronze:#A56A3A;
  --sandstone:#D8C9B4;
  --mist:#F2F0EA;
  --charcoal:#202523;
  --rule:rgba(216,201,180,.20);
  --ease:cubic-bezier(.22,.61,.36,1);
}

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

html,body{height:100%;}

body{
  margin:0;
  background:var(--forest);
  color:var(--sandstone);
  font-family:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  overflow-x:hidden;
}

/* ---- Ambient field: two very slow, very subtle drifting washes ---- */
.field{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}
.field::before,
.field::after{
  content:"";
  position:absolute;
  width:70vmax;
  height:70vmax;
  border-radius:50%;
  opacity:.5;
  filter:blur(90px);
}
.field::before{
  background:radial-gradient(circle at 50% 50%, rgba(49,91,78,.85), transparent 65%);
  top:-26vmax; left:-20vmax;
  animation:drift-a 34s var(--ease) infinite alternate;
}
.field::after{
  background:radial-gradient(circle at 50% 50%, rgba(165,106,58,.24), transparent 62%);
  bottom:-30vmax; right:-22vmax;
  animation:drift-b 42s var(--ease) infinite alternate;
}
@keyframes drift-a{ to{ transform:translate3d(7vmax,4vmax,0) scale(1.12);} }
@keyframes drift-b{ to{ transform:translate3d(-6vmax,-5vmax,0) scale(1.08);} }

/* ---- Faint measured grid, like a drawing sheet ---- */
.grid{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(216,201,180,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(216,201,180,.055) 1px, transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(ellipse at 50% 45%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 45%, #000 0%, transparent 78%);
}

/* ---- The panel ---- */
.panel{
  position:relative;
  z-index:1;
  width:min(468px,100%);
  padding:clamp(34px,6vw,54px) clamp(26px,5vw,46px);
  background:rgba(23,58,50,.62);
  border:1px solid var(--rule);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  animation:panel-in 1s var(--ease) both;
}
@keyframes panel-in{ from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:none;} }

/* Bronze corner brackets — the architectural signature */
.panel::before,
.panel::after{
  content:"";
  position:absolute;
  width:22px;height:22px;
  border:1px solid var(--bronze);
  opacity:.8;
}
.panel::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.panel::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

/* ---- Abstract mark: three stacked rules, the shortest in bronze ---- */
.mark{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:30px;
}
.mark span{ display:block; height:1px; background:var(--sandstone); opacity:.55; }
.mark span:nth-child(1){ width:52px; }
.mark span:nth-child(2){ width:34px; }
.mark span:nth-child(3){
  width:16px; height:2px; background:var(--bronze); opacity:1;
  animation:pulse 3.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1;transform:none;} 50%{opacity:.42;transform:scaleX(1.7);transform-origin:left;} }

.eyebrow{
  margin:0 0 14px;
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.66rem;
  letter-spacing:.30em;
  text-transform:uppercase;
  color:var(--bronze);
}

.headline{
  margin:0 0 12px;
  font-family:"Fraunces",Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:clamp(1.85rem,6vw,2.6rem);
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--mist);
}

.note{
  margin:0 0 34px;
  font-size:.9rem;
  line-height:1.65;
  color:rgba(216,201,180,.72);
  max-width:34ch;
}

/* ---- Field ---- */
.row{ position:relative; margin-bottom:8px; }

.label{
  display:block;
  margin-bottom:10px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.63rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(216,201,180,.62);
}

.input{
  width:100%;
  padding:14px 2px;
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(216,201,180,.34);
  color:var(--mist);
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:1.02rem;
  letter-spacing:.30em;
  border-radius:0;
  transition:border-color .35s var(--ease);
}
.input::placeholder{ color:rgba(216,201,180,.26); letter-spacing:.3em; }
.input:focus{ outline:none; border-bottom-color:var(--bronze); }
.input:focus-visible{ outline:2px solid var(--bronze); outline-offset:6px; }

/* travelling underline on focus */
.row::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  height:2px; width:0;
  background:var(--bronze);
  transition:width .5s var(--ease);
}
.row:focus-within::after{ width:100%; }

/* ---- Message ---- */
.msg{
  min-height:22px;
  margin:12px 0 24px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:transparent;
  transition:color .3s var(--ease);
}
.msg.is-error{ color:#E0A175; }
.msg.is-ok{ color:var(--sandstone); }

/* ---- Button ---- */
.submit{
  position:relative;
  width:100%;
  padding:15px 22px;
  background:transparent;
  border:1px solid rgba(216,201,180,.38);
  color:var(--mist);
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.7rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  cursor:pointer;
  overflow:hidden;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.submit span{ position:relative; z-index:1; }
.submit::before{
  content:"";
  position:absolute; inset:0;
  background:var(--bronze);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.submit:hover,.submit:focus-visible{ color:#12241E; border-color:var(--bronze); }
.submit:hover::before,.submit:focus-visible::before{ transform:scaleX(1); }
.submit:focus-visible{ outline:2px solid var(--bronze); outline-offset:4px; }
.submit:active{ transform:translateY(1px); }

/* ---- Shake on refusal ---- */
.panel.is-refused{ animation:shake .5s var(--ease); }
@keyframes shake{
  0%,100%{transform:none;}
  18%{transform:translateX(-8px);}
  38%{transform:translateX(7px);}
  58%{transform:translateX(-4px);}
  80%{transform:translateX(2px);}
}

/* ---- Foot rule inside the panel ---- */
.rule{
  margin-top:30px;
  padding-top:16px;
  border-top:1px solid var(--rule);
  display:flex;
  justify-content:space-between;
  gap:14px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.58rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(216,201,180,.4);
}

@media (max-width:400px){
  body{ padding:16px; }
  .input{ letter-spacing:.18em; }
  .rule{ flex-direction:column; gap:6px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}