/* chuck45.com — el estilo */
:root{
  --ink:#0b0908;
  --ink-2:#141010;
  --gold:#d9a441;
  --gold-hi:#f0cd7a;
  --bone:#efe3cc;
  --blood:#8e1b1b;
  --cactus:#4a6b45;
  --dust:#a08256;
  --display:'Rye',ui-serif,Georgia,serif;
  --body:'Oswald',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-weight:300;
  letter-spacing:.02em;
  min-height:100vh;
  overflow-x:hidden;
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(217,164,65,.16), transparent 60%),
    radial-gradient(90% 60% at 50% 110%, rgba(142,27,27,.18), transparent 65%);
  background-attachment:fixed;
}
/* grain */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.32;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
  mix-blend-mode:overlay;
}
.serape{height:12px;width:100%;
  background:repeating-linear-gradient(90deg,
    #ce1126 0 18px, #ffffff 18px 36px, #006847 36px 54px, #0b0908 54px 72px);
  box-shadow:0 2px 18px rgba(0,0,0,.7);position:relative;z-index:10}
.wrap{max-width:1000px;margin:0 auto;padding:0 22px}

/* nav */
nav{position:relative;z-index:11;display:flex;gap:26px;justify-content:center;
  align-items:center;padding:18px 0 6px;flex-wrap:wrap}
nav a{font-family:var(--display);font-size:.95rem;color:var(--dust);text-decoration:none;
  letter-spacing:.06em;padding:6px 4px;border-bottom:2px solid transparent;transition:.18s}
nav a:hover,nav a.on{color:var(--gold);border-bottom-color:var(--blood)}
nav a.locked{opacity:.32;cursor:not-allowed}
nav a.locked::after{content:" 🔒";font-size:.8em}

/* headings */
h1{font-family:var(--display);font-weight:400;color:var(--gold);
  font-size:clamp(2.1rem,7vw,4.4rem);line-height:1.02;margin:.15em 0 .1em;
  text-shadow:0 2px 0 #2a1a08,0 0 34px rgba(217,164,65,.34)}
h2{font-family:var(--display);font-weight:400;color:var(--bone);
  font-size:clamp(1.3rem,3.6vw,2.1rem);margin:1.6em 0 .5em}
.kicker{font-family:var(--display);color:var(--blood);letter-spacing:.34em;
  text-transform:uppercase;font-size:.72rem;margin:0}
.sub{color:var(--dust);font-size:1.02rem;max-width:56ch;margin:.6em auto 0;line-height:1.6}
header.hero{text-align:center;padding:26px 0 8px}

/* poster frame */
.poster{margin:30px auto 8px;max-width:520px;position:relative;
  transform:rotate(-1.1deg);filter:drop-shadow(0 22px 40px rgba(0,0,0,.75))}
.poster-in{border:3px solid var(--gold);outline:1px solid rgba(0,0,0,.6);
  outline-offset:5px;background:#1a1310;padding:12px 12px 16px;position:relative}
.poster-in::before{content:"";position:absolute;inset:6px;border:1px dashed rgba(217,164,65,.4);
  pointer-events:none}
.poster img{width:100%;display:block;filter:sepia(.32) contrast(1.08) saturate(1.05)}
.poster .cap{font-family:var(--display);text-align:center;color:var(--gold);
  font-size:1.05rem;padding-top:12px;letter-spacing:.05em}
.poster .cap small{display:block;font-family:var(--body);color:var(--dust);
  letter-spacing:.22em;font-size:.62rem;text-transform:uppercase;margin-top:5px}
.ph{aspect-ratio:3/4;display:grid;place-items:center;text-align:center;padding:24px;
  border:2px dashed rgba(217,164,65,.45);color:var(--dust);font-size:.82rem;line-height:1.7}
.ph b{display:block;font-family:var(--display);color:var(--gold);font-size:1rem;margin-bottom:8px}

/* password */
.gate{max-width:460px;margin:34px auto 10px;text-align:center}
.gate form{display:flex;gap:10px;margin-top:14px}
.gate input{flex:1;background:#100c0a;border:2px solid rgba(217,164,65,.5);color:var(--bone);
  font-family:var(--body);font-size:1rem;padding:13px 15px;letter-spacing:.12em;outline:none;
  transition:.18s;min-width:0}
.gate input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,164,65,.16)}
.gate button{font-family:var(--display);background:var(--blood);color:var(--bone);
  border:2px solid #b2452c;padding:13px 20px;font-size:.95rem;cursor:pointer;
  letter-spacing:.06em;transition:.18s;white-space:nowrap}
.gate button:hover{background:#a82323;transform:translateY(-1px)}
.msg{min-height:1.5em;margin-top:14px;font-size:.95rem;letter-spacing:.04em;color:var(--dust)}
.msg.bad{color:#e07a5f}
.msg.good{color:#8fbf72}
.shake{animation:sh .4s}
@keyframes sh{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}
  40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:26px 0 10px}
.card{background:linear-gradient(180deg,rgba(30,22,18,.9),rgba(14,11,9,.9));
  border:1px solid rgba(217,164,65,.25);padding:20px;position:relative;transition:.2s}
.card:hover{border-color:var(--gold);transform:translateY(-3px)}
.card h3{font-family:var(--display);color:var(--gold);margin:.1em 0 .5em;font-size:1.15rem;font-weight:400}
.card p{color:var(--dust);font-size:.9rem;line-height:1.6;margin:0}

footer{text-align:center;color:#6b5945;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;padding:52px 0 34px}
footer .rule{width:90px;height:1px;background:rgba(217,164,65,.35);margin:0 auto 16px}
.hidden{display:none}
@media(max-width:520px){.gate form{flex-direction:column}.poster{transform:none}}