/* Find Her If You Can — findherifyoucan.com */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Caveat:wght@600&family=Special+Elite&display=swap');

:root{
  --maroon:#3d0a0a; --paper:#e9dcbb; --paper-dark:#dccb9f;
  --ink:#241f1a; --blood:#a32e24; --cream:#f6f1e9; --tape:rgba(210,190,150,.55);
}
*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:Georgia,'Times New Roman',serif; color:var(--cream);
  background:var(--maroon) url('/assets/bg.jpg') center/cover fixed;
  min-height:100vh; line-height:1.6;
}
body::before{content:''; position:fixed; inset:0; background:rgba(20,4,4,.35); pointer-events:none; z-index:0}
.wrap{position:relative; z-index:1; max-width:880px; margin:0 auto; padding:32px 20px 80px}

/* type */
.display{font-family:Anton,Impact,sans-serif; letter-spacing:.04em; line-height:1.05; text-transform:uppercase}
h1.display{font-size:clamp(2.6rem,9vw,4.6rem)}
h2.display{font-size:clamp(1.4rem,5vw,2.1rem); margin-bottom:.6em}
.blood{color:var(--blood)}
.type{font-family:'Special Elite',monospace}
.hand{font-family:Caveat,cursive; font-size:1.5em; line-height:1.3}
.small{font-size:.85rem; opacity:.85}
a{color:var(--cream)}

/* header / footer */
header.site{ text-align:center; padding:26px 0 10px}
header.site .tag{font-family:'Special Elite',monospace; letter-spacing:.12em; font-size:.8rem; opacity:.9}
nav.site{display:flex; gap:18px; justify-content:center; margin:14px 0 6px; flex-wrap:wrap}
nav.site a{font-family:Anton,sans-serif; letter-spacing:.08em; text-transform:uppercase; font-size:.9rem;
  text-decoration:none; border-bottom:2px solid transparent; padding:2px 1px}
nav.site a:hover, nav.site a.here{border-color:var(--blood)}
footer.site{text-align:center; margin-top:70px; font-family:'Special Elite',monospace; font-size:.78rem; opacity:.8}

/* parchment cards */
.card{
  background:
    radial-gradient(1200px 500px at 20% -10%, rgba(120,80,30,.20), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(90,50,20,.22), transparent 55%),
    linear-gradient(var(--paper), var(--paper-dark));
  color:var(--ink); border-radius:6px; padding:30px 26px; margin:26px 0;
  box-shadow:0 14px 34px rgba(0,0,0,.55), inset 0 0 60px rgba(120,80,30,.15);
  position:relative;
}
.card.tilt-l{transform:rotate(-.6deg)} .card.tilt-r{transform:rotate(.5deg)}
.card::before,.card::after{ /* tape corners */
  content:''; position:absolute; width:86px; height:26px; background:var(--tape);
  top:-12px; transform:rotate(-4deg); box-shadow:0 2px 6px rgba(0,0,0,.25)
}
.card::before{left:18px} .card::after{right:18px; transform:rotate(5deg)}
.card h2, .card h3{color:var(--ink)}
.card .blood{color:var(--blood)}
.card p{margin:.7em 0}
.card hr{border:0; border-top:1px solid rgba(60,40,20,.35); margin:1.2em 0}

/* sticky note */
.sticky{
  display:inline-block; background:#cfe6ea; color:#152233; padding:16px 20px;
  font-family:Anton,sans-serif; letter-spacing:.05em; transform:rotate(-2.5deg);
  box-shadow:0 8px 18px rgba(0,0,0,.45); position:relative; margin:10px 8px;
}
.sticky u{text-decoration:none; border-bottom:3px solid var(--blood)}

/* buttons */
.btn{
  display:inline-block; font-family:Anton,sans-serif; letter-spacing:.07em; text-transform:uppercase;
  background:var(--blood); color:var(--cream); padding:14px 22px; border:0; border-radius:4px;
  font-size:1rem; text-decoration:none; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.5);
}
.btn.ghost{background:transparent; border:2px solid var(--cream)}
.btn:active{transform:translateY(1px)}
.btnrow{display:flex; gap:14px; flex-wrap:wrap; margin-top:18px}

/* hero */
.hero{display:grid; grid-template-columns:1fr; gap:26px; align-items:center; margin-top:10px}
@media(min-width:760px){ .hero{grid-template-columns:1.2fr .8fr} }
.hero img{width:100%; max-width:340px; margin:0 auto; display:block;
  box-shadow:0 20px 50px rgba(0,0,0,.65); transform:rotate(1.2deg); border-radius:3px}
.stats{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.stat{font-family:'Special Elite',monospace; font-size:.85rem; border:1px dashed rgba(246,241,233,.5);
  padding:8px 12px; border-radius:3px}

/* the clue card */
.cluecard{ text-align:center; padding:44px 26px }
.cluecard .hand{font-size:clamp(1.7rem,6vw,2.5rem); color:#20140c}
.strike{text-decoration:line-through; text-decoration-color:rgba(36,31,26,.8); text-decoration-thickness:2px}

/* answer input */
.answer{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:18px}
.answer input{
  font-family:'Special Elite',monospace; font-size:1.15rem; padding:12px 14px; min-width:min(340px,80vw);
  background:#f3ead2; border:2px solid #6b4a23; border-radius:4px; color:var(--ink); text-transform:uppercase;
}
.hidden{display:none}
.result{margin-top:22px}
.certificate{border:3px double #6b4a23; padding:22px; margin-top:14px; text-align:center}
.qa{margin:18px 0}
.qa h3{font-family:'Special Elite',monospace; font-size:1.02rem; margin-bottom:.35em}
.notice{border-left:4px solid var(--blood); padding:8px 14px; background:rgba(163,46,36,.07)}