:root{
  --ink-950:#15120d;
  --gold-500:#c69a4e;
  --gold-300:#e3cd9c;
  --red-600:#8a2a24;
  --cream-100:#f1ead9;
  --cream-200:#e7dcc2;
  --text-on-light:#2a2318;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:'Inter',sans-serif;
  background:var(--cream-100);
  color:var(--text-on-light);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}

.page{min-height:100%; display:flex; flex-wrap:wrap;}

.hero{
  flex:1 1 56%;
  min-width:320px;
  position:relative;
  background:
    repeating-linear-gradient(115deg, rgba(230,205,150,0.05) 0px, rgba(230,205,150,0.05) 2px, transparent 2px, transparent 34px),
    radial-gradient(circle at 30% 20%, #2a2118 0%, var(--ink-950) 62%);
  color:var(--cream-100);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:4.5rem 2rem;
  overflow:hidden;
}
.hero-glow{
  position:absolute; width:620px; height:620px;
  top:50%; left:50%; transform:translate(-50%,-52%);
  background:radial-gradient(circle, rgba(198,154,78,0.16) 0%, rgba(198,154,78,0) 68%);
  pointer-events:none;
}
.logo{
  position:relative;
  width:150px; height:150px; border-radius:50%;
  box-shadow:0 0 0 1px rgba(198,154,78,0.35), 0 22px 40px -18px rgba(0,0,0,0.8);
  margin-bottom:2rem;
}
.hero h1{
  position:relative;
  font-family:'Oswald',sans-serif; font-weight:700;
  font-size:clamp(2.1rem,5vw,3.2rem); letter-spacing:0.03em; line-height:1.05;
}
.hero .sub{
  position:relative;
  font-family:'Oswald',sans-serif; font-weight:500;
  font-size:1rem; letter-spacing:0.4em; color:var(--gold-300);
  margin-top:0.6rem;
}
.hero .rule{position:relative; width:64px; height:2px; background:var(--red-600); margin:1.8rem 0 1.4rem;}
.hero p.tagline{position:relative; max-width:34ch; font-size:1rem; line-height:1.6; color:rgba(241,234,217,0.78);}

.access{
  flex:1 1 44%; min-width:320px;
  background:var(--cream-100);
  display:flex; align-items:center; justify-content:center;
  padding:3rem 2rem;
}
.login-card{
  position:relative; width:100%; max-width:360px;
  background:#faf7ef; border:1px solid var(--cream-200);
  padding:2.3rem 2.1rem 2rem;
}
.login-card .brk{position:absolute; width:18px; height:18px; border-color:var(--gold-500); border-style:solid;}
.login-card .brk.tl{top:-1px; left:-1px; border-width:2px 0 0 2px;}
.login-card .brk.tr{top:-1px; right:-1px; border-width:2px 2px 0 0;}
.login-card .brk.bl{bottom:-1px; left:-1px; border-width:0 0 2px 2px;}
.login-card .brk.br{bottom:-1px; right:-1px; border-width:0 2px 2px 0;}

.login-card h2{font-family:'Oswald',sans-serif; font-weight:600; font-size:1.4rem; margin-bottom:0.3rem;}
.login-card .lead{font-size:0.9rem; color:#6b6252; margin-bottom:1.6rem;}
.error{font-size:0.85rem; color:var(--red-600); margin-bottom:1rem;}

.field{margin-bottom:1.1rem;}
.field label{display:block; font-size:0.8rem; font-weight:500; color:#52493a; margin-bottom:0.35rem;}
.field input{
  width:100%; padding:0.7rem 0.8rem; font-family:'Inter',sans-serif; font-size:0.95rem;
  background:#fff; border:1px solid #d8cdb2; color:var(--text-on-light);
}
.field input:focus{outline:2px solid var(--gold-500); outline-offset:1px; border-color:var(--gold-500);}

.submit{
  width:100%; margin-top:0.3rem; padding:0.8rem 1rem;
  background:var(--ink-950); color:var(--cream-100);
  font-family:'Oswald',sans-serif; font-weight:600; font-size:0.95rem; letter-spacing:0.04em;
  border:none; cursor:pointer; transition:background 0.15s ease;
}
.submit:hover{background:var(--red-600);}

.forgot{display:block; text-align:center; margin-top:1rem; font-size:0.82rem; color:#6b6252; text-decoration:none;}
.forgot:hover{text-decoration:underline;}

@media (max-width:760px){
  .hero{padding:3rem 1.5rem 2.4rem;}
  .access{padding:2.2rem 1.3rem 2.8rem;}
}