.hero{position:relative;display:block;background-image:linear-gradient(90deg,rgba(14,11,16,.96) 0%,rgba(14,11,16,.82) 28%,rgba(14,11,16,.25) 58%,rgba(14,11,16,.04) 100%),url('ranchos-halloween-hero.jpg');background-size:cover;background-position:center;min-height:706px}
.hero-copy{max-width:680px}
.retro-wordmark{display:flex;align-items:center;margin:0 0 10px;filter:drop-shadow(0 5px 8px #0008)}
.retro-wordmark span{display:grid;place-items:center;width:58px;height:82px;background:#101014;color:#f5ead4;font-family:Rye,Georgia,serif;font-size:45px;line-height:1;transform:skewY(-3deg);margin-right:-2px;border-left:2px solid #ed5b22}
.retro-wordmark span:nth-child(even){background:#ed5b22;color:#fff;transform:skewY(4deg);height:74px}
.location-line{font-weight:700;letter-spacing:.55em;color:#f3d89b;margin:14px 0 24px;padding-left:9px}
.hero h1{font-size:clamp(42px,5vw,70px);text-transform:uppercase;letter-spacing:.025em;margin:.15em 0}
.photo-note{margin:25px 0;padding:20px;background:#e9e0d2;border-left:5px solid var(--orange)}
.photo-note p{margin:6px 0 0;color:var(--muted)}
.admin-photo{position:relative;flex:0 0 220px}
.admin-photo img{width:100%;height:100%;object-fit:cover}
.admin-photo form{position:absolute;right:6px;top:6px}
.admin-photo button{width:30px;height:30px;border:0;border-radius:50%;background:#111c;color:#fff;font-size:22px;cursor:pointer}
.no-photo{margin:auto;padding:25px;color:var(--muted);text-align:center}
.photo-upload{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin:16px 0;padding:14px;background:#f4efe4}
.photo-upload input{padding:8px;background:#fff}
.photo-upload button{border:0;background:var(--purple);color:#fff;padding:13px 18px;font-weight:700;cursor:pointer}
@media(max-width:540px){.photo-upload{grid-template-columns:1fr}}
@media(max-width:850px){.hero{background-position:68% center;background-image:linear-gradient(90deg,rgba(14,11,16,.97) 0%,rgba(14,11,16,.85) 55%,rgba(14,11,16,.3) 100%),url('ranchos-halloween-hero.jpg');min-height:720px}.hero-copy{max-width:610px}.retro-wordmark span{width:47px;height:68px;font-size:36px}.retro-wordmark span:nth-child(even){height:62px}}
@media(max-width:540px){.hero{background-position:62% center;min-height:740px;padding-top:48px}.retro-wordmark span{width:39px;height:59px;font-size:30px}.retro-wordmark span:nth-child(even){height:54px}.location-line{letter-spacing:.36em}.hero h1{font-size:38px}.hero .lede{font-size:17px;background:#17131ac7;padding:12px}}