/* Családi ház: the sign-in door */
:root {
  --header-h: 76px;
  --cream: #f3e7d0;
  --cream-2: #e9d8b8;
  --ink: #3b2b20;
  --ink-soft: #6e5946;
  --terracotta: #b65a3c;
  --sage: #6f8a5a;
  --honey: #c99545;
  --card: #fbf4e6;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  color: var(--ink); font: 16px/1.55 "Manrope", sans-serif; -webkit-font-smoothing: antialiased;
  background: radial-gradient(120% 90% at 50% 30%, #f8eedb 0%, var(--cream) 45%, #e4cfa9 100%);
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 80; height: var(--header-h); padding: 0 3.2vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--ink); }
.monogram { font: 700 28px/1 "Cormorant Garamond", serif; letter-spacing: -.08em; justify-self: start; }
.monogram span { color: var(--terracotta); }
.main-nav { display: flex; gap: clamp(44px,5vw,80px); align-items: center; font-weight: 700; text-transform: uppercase; }
.main-nav a { position: relative; padding: 18px 0 14px; color: var(--ink-soft); }
.main-nav a:hover, .main-nav a:focus-visible { color: var(--ink); }
.roll-label { display: inline-flex; white-space: nowrap; }

.door-wrap { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(24px, 6vw, 96px); align-items: center; max-width: 1080px; margin: 0 auto; padding: calc(var(--header-h) + 24px) 24px 40px; }
.door-art { width: 100%; max-width: 460px; justify-self: end; display: block; }
.door-art .roof { fill: none; stroke: var(--terracotta); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.door-art .wall { fill: #f8eedc; stroke: var(--ink); stroke-width: 2.5; }
.door-art .chimney { fill: #c7795a; stroke: var(--ink); stroke-width: 2.5; }
.door-art .door { fill: var(--sage); stroke: var(--ink); stroke-width: 2.5; transform-origin: 128px 228px; transition: transform .7s cubic-bezier(.3,.7,.2,1); }
.door-art .knob { fill: var(--honey); }
.door-art .win { fill: #fbe7b0; stroke: var(--ink); stroke-width: 2.5; }
.door-art .bars { stroke: var(--ink); stroke-width: 2; }
.door-art .ground { stroke: var(--ink-soft); stroke-width: 2.5; stroke-linecap: round; }
.is-opening .door-art .door { transform: perspective(400px) rotateY(-70deg); }
.is-knocking .door-art .door { animation: knock .32s ease 2; }
@keyframes knock { 30% { transform: translateX(-3px); } 60% { transform: translateX(3px); } }

.door-card { padding: 30px 30px 24px; border: 1px solid #6e594633; border-radius: 16px; background: var(--card); box-shadow: 0 18px 50px #5a3d2226, 0 1px 0 #fff8 inset; }
.door-kicker { margin: 0 0 10px; font: 14px/1 "Special Elite", serif; letter-spacing: .08em; color: var(--sage); }
.door-card h1 { margin: 0; font: 600 clamp(40px, 4vw, 54px)/.95 "Cormorant Garamond", serif; letter-spacing: -.035em; }
.door-card h1 em { color: var(--terracotta); font-style: normal; }
.door-lead { margin: 12px 0 20px; color: var(--ink-soft); font-size: 15px; }
.door-card label { display: block; margin: 0 0 14px; }
.door-card label span { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.door-card input { width: 100%; padding: 12px 14px; border: 1px solid #6e594655; border-radius: 10px; background: #fffaf0; font-size: 17px; }
.door-card input:focus { outline: 2px solid var(--sage); outline-offset: 1px; border-color: transparent; }
.door-card button { width: 100%; margin-top: 6px; padding: 13px 16px; border: 0; border-radius: 10px; background: var(--terracotta); color: #fff7ea; font-weight: 700; letter-spacing: .06em; cursor: pointer; transition: background .2s, transform .2s; }
.door-card button:hover, .door-card button:focus-visible { background: #9e4a2f; }
.door-card button:disabled { opacity: .6; cursor: wait; }
.door-msg { min-height: 1.5em; margin: 12px 0 0; color: #a3321d; font-weight: 600; font-size: 14px; }
.door-note { margin: 4px 0 0; font: 20px/1.2 "Caveat", cursive; color: var(--ink-soft); }

@media (max-width: 760px) {
  .site-header { padding: 0 16px; }
  .main-nav { gap: 20px; font-size: 12px; }
  .door-wrap { grid-template-columns: 1fr; gap: 8px; padding-top: calc(var(--header-h) + 4px); }
  .door-art { max-width: 220px; justify-self: center; }
  .door-card { padding: 24px 20px 20px; }
}
@media (prefers-reduced-motion: reduce) { .door-art .door { transition: none; animation: none !important; } }