/* ==========================================================
   VERDURE — a garden at dusk (password landing page only)
   Harry's page still uses style.css.
   ========================================================== */
:root{
  --parch:#f3ecd9; --sage:#7d9273; --moss:#55673f;
  --gold:#b08d3e; --rose:#c98d8d; --bark:#4a4436;
  --r-sm:4px; --r-md:8px; --r-lg:16px;
  --serif:Georgia,"Times New Roman",serif;
  --ui:system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;min-height:100svh;overflow-x:hidden;
  color:var(--bark);font-family:var(--serif);font-size:1.0625rem;line-height:1.6;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(201,141,141,.55), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(125,146,115,.45), transparent 65%),
    radial-gradient(80% 50% at 0% 90%, rgba(176,141,62,.25), transparent 60%),
    linear-gradient(180deg,#efe2cf 0%,var(--parch) 45%,#e9e4cf 100%);
  background-attachment:fixed;
}
/* Grain */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.12;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px}
[hidden]{display:none!important}

.garden{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:clamp(2.5rem,8vw,5rem) 1.25rem}

/* Vines */
.vine{position:absolute;bottom:0;width:clamp(110px,22vw,200px);height:auto;pointer-events:none;z-index:0}
.vine--left{left:max(-30px,calc(50% - 22rem));transform-origin:50% 100%;animation:sway 9s ease-in-out infinite}
.vine--right{right:max(-30px,calc(50% - 22rem));transform-origin:50% 100%;animation:sway-r 11s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(2deg)}}
@keyframes sway-r{0%,100%{transform:scaleX(-1) rotate(-1.5deg)}50%{transform:scaleX(-1) rotate(2deg)}}

/* Fireflies */
.firefly{position:absolute;z-index:0;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px 3px rgba(176,141,62,.55);opacity:0;animation:drift 8s ease-in-out infinite}
.firefly:nth-of-type(1){left:14%;top:22%;animation-delay:0s}
.firefly:nth-of-type(2){left:82%;top:30%;animation-delay:2.2s}
.firefly:nth-of-type(3){left:24%;top:72%;animation-delay:4.1s}
.firefly:nth-of-type(4){left:74%;top:78%;animation-delay:1.3s}
.firefly:nth-of-type(5){left:50%;top:10%;animation-delay:5.6s}
@keyframes drift{0%{opacity:0;transform:translate(0,0)}25%{opacity:.9}50%{transform:translate(14px,-22px)}75%{opacity:.7}100%{opacity:0;transform:translate(-10px,-40px)}}

/* Arched gate */
.gate{position:relative;z-index:1;width:min(100%,27rem);padding:clamp(4rem,14vw,5.5rem) clamp(1.5rem,6vw,2.5rem) 2.5rem;text-align:center;
  background:linear-gradient(180deg,rgba(243,236,217,.92),rgba(243,236,217,.82));
  border:1px solid rgba(176,141,62,.55);border-radius:999px 999px var(--r-lg) var(--r-lg);
  box-shadow:0 0 0 6px rgba(243,236,217,.6),0 0 0 7px rgba(176,141,62,.35),0 30px 60px -20px rgba(74,68,54,.35);
  animation:bloom 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes bloom{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

.crest{display:block;width:44px;height:44px;margin:0 auto 1rem;color:var(--moss)}
.eyebrow{margin:0 0 .75rem;font-family:var(--ui);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--moss)}
.title{margin:0 0 1rem;font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,7.5vw,2.5rem);line-height:1.15;color:var(--bark);text-shadow:0 1px 0 rgba(255,255,255,.6);text-wrap:balance}
.title:focus{outline:none}
.sub{margin:0 0 1.5rem;font-style:italic;color:#5e5745}
.flourish{display:block;width:120px;height:14px;margin:0 auto 1.75rem;color:var(--gold)}

form{text-align:left}
.field-label{display:block;margin-bottom:.45rem;font-family:var(--ui);font-size:.8125rem;font-weight:600;color:var(--moss)}
.field{display:block;width:100%;min-height:3rem;padding:.75rem 1rem;font:1.0625rem var(--ui);color:var(--bark);
  background:rgba(255,255,255,.55);border:1px solid rgba(85,103,63,.45);border-radius:var(--r-md);
  transition:border-color .25s ease,box-shadow .25s ease,background-color .25s ease}
.field:hover{border-color:var(--sage)}
.field:focus{outline:none;border-color:var(--moss);background:rgba(255,255,255,.8);box-shadow:0 0 0 3px rgba(125,146,115,.35)}
.field[aria-invalid="true"]{border-color:var(--rose);box-shadow:0 0 0 3px rgba(201,141,141,.35)}

.button{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:3rem;margin-top:1rem;padding:.8rem 1.25rem;cursor:pointer;
  font:600 1rem var(--ui);letter-spacing:.02em;color:var(--parch);
  background:linear-gradient(135deg,var(--sage),var(--moss));border:0;border-radius:var(--r-md);
  box-shadow:0 8px 20px -10px rgba(85,103,63,.8);transition:all .3s ease}
.button svg{width:18px;height:18px;transition:transform .3s ease}
.button:hover{background:linear-gradient(135deg,var(--moss),#3f4d2f);box-shadow:0 12px 26px -10px rgba(85,103,63,.9);transform:translateY(-1px)}
.button:hover svg{transform:translateX(3px)}
.button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.error{min-height:1.5em;margin:.9rem 0 0;font-family:var(--ui);font-size:.9375rem;color:#8a3f3f;text-align:center}

.foot-note{margin:1.75rem 0 0;font-family:var(--ui);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}

@media (prefers-reduced-motion:reduce){
  .vine--left,.vine--right,.firefly,.gate{animation:none}
  .vine--right{transform:scaleX(-1)}
  .firefly{opacity:.6}
  .button,.button svg,.field{transition:none}
}

/* Intro text above the password form */
.intro{margin:0 0 1.75rem;font-family:var(--serif);font-size:1rem;line-height:1.65;color:var(--bark)}
.intro p{margin:0 0 .75rem}
.intro p:last-child{margin-bottom:0}