/* Celia Vane — celiavane.com */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@500;600&family=Caveat:wght@600&display=swap');

:root{
  --paper:#f6efe4; --panel:#fbf7ee; --ink:#151413; --red:#b01218;
  --line:#d9cec0; --soft:#6f675e; --tint:rgba(176,18,24,.06);
}
*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:Georgia,'Times New Roman',serif; color:var(--ink);
  background:var(--paper); min-height:100vh; line-height:1.65;
}
.wrap{position:relative; max-width:920px; margin:0 auto; padding:34px 20px 70px}

/* type */
.display{font-family:Anton,Impact,sans-serif; letter-spacing:.03em; line-height:1.04; text-transform:uppercase}
h1.display{font-size:clamp(2.7rem,9vw,4.8rem)}
h2.display{font-size:clamp(1.35rem,5vw,2rem); margin-bottom:.6em}
.blood{color:var(--red)}
.type{font-family:Oswald,Arial,sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:.13em}
.hand{font-family:Caveat,cursive; font-size:1.5em; line-height:1.3}
.small{font-size:.85rem; color:var(--soft)}
a{color:var(--ink)}
a:hover{color:var(--red)}

/* header / footer */
header.site{text-align:center; padding:20px 0 8px}
header.site .tag{font-family:Oswald,Arial,sans-serif; font-weight:500; text-transform:uppercase;
  letter-spacing:.22em; font-size:.78rem; color:var(--soft)}
header.site .tag b{color:var(--red); font-weight:600}
nav.site{display:flex; gap:20px; justify-content:center; margin:16px 0 4px; flex-wrap:wrap}
nav.site a{font-family:Oswald,Arial,sans-serif; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  font-size:.86rem; text-decoration:none; border-bottom:2px solid transparent; padding:2px 1px}
nav.site a:hover, nav.site a.here{border-color:var(--red); color:var(--ink)}
footer.site{text-align:center; margin-top:64px; font-family:Oswald,Arial,sans-serif; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; color:var(--soft)}
footer.site a{color:var(--soft)}
footer.site a:hover{color:var(--red)}

/* panels with red corner brackets, as on the cover */
.card{
  background:var(--panel); border:1px solid var(--line);
  padding:32px 30px; margin:26px 0; position:relative;
  box-shadow:0 10px 26px rgba(21,20,19,.07);
}
.card::before{content:''; position:absolute; top:9px; left:9px; width:22px; height:22px;
  border-top:3px solid var(--red); border-left:3px solid var(--red)}
.card::after{content:''; position:absolute; bottom:9px; right:9px; width:22px; height:22px;
  border-bottom:3px solid var(--red); border-right:3px solid var(--red)}
.card.tilt-l, .card.tilt-r{transform:none}
.card h2, .card h3{color:var(--ink)}
.card .blood{color:var(--red)}
.card p{margin:.7em 0}
.card hr{border:0; border-top:1px solid var(--line); margin:1.2em 0}

/* red stamp box — the cover's FIND HER mark */
.sticky{
  display:inline-block; border:3px solid var(--red); color:var(--red); background:transparent;
  padding:10px 18px; font-family:Anton,Impact,sans-serif; letter-spacing:.06em; text-transform:uppercase;
  transform:rotate(-2deg); margin:6px 4px 14px;
}
.sticky u{text-decoration:none; color:var(--ink)}

/* struck city list, horizontal */
.strikerow{display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin:18px 0 4px}
.strikerow span{font-family:Oswald,Arial,sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.12em; font-size:.9rem; position:relative; padding:2px 1px}
.strikerow span::after{content:''; position:absolute; left:-4%; right:-4%; top:52%; height:2.5px;
  background:var(--red); transform:rotate(-3deg)}
.strikerow span:nth-child(2n)::after{transform:rotate(2deg)}
.strikerow .q{color:var(--red); border:2.5px solid var(--red); padding:2px 12px; font-size:1.05rem}
.strikerow .q::after{display:none}

/* buttons */
.btn{
  display:inline-block; font-family:Oswald,Arial,sans-serif; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; background:var(--red); color:#fdf8f0; padding:13px 22px; border:2px solid var(--red);
  font-size:.92rem; text-decoration:none; cursor:pointer; box-shadow:0 6px 16px rgba(176,18,24,.25);
}
.btn:hover{color:#fff}
.btn.ghost{background:transparent; border:2px solid var(--ink); color:var(--ink); box-shadow:none}
.btn.ghost:hover{border-color:var(--red); color:var(--red)}
.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:start; margin-top:10px}
@media(min-width:760px){ .hero{grid-template-columns:1.2fr .8fr} }
.hero img{width:100%; max-width:340px; height:auto; margin:0 auto; display:block; border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(21,20,19,.22); transform:rotate(.8deg)}
.stats{display:flex; gap:18px; flex-wrap:wrap; margin-top:16px}
.stat{font-family:Oswald,Arial,sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.12em;
  font-size:.82rem; border-bottom:3px solid var(--red); padding:2px 2px 6px}

/* the clue card */
.cluecard{text-align:center; padding:46px 28px}
.cluecard .hand{font-size:clamp(1.7rem,6vw,2.5rem); color:var(--ink)}
.strike{text-decoration:line-through; text-decoration-color:var(--red); text-decoration-thickness:2.5px}

/* answer input */
.answer{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:18px}
.answer input{
  font-family:Oswald,Arial,sans-serif; font-weight:500; font-size:1.1rem; letter-spacing:.08em;
  padding:12px 14px; min-width:min(340px,80vw);
  background:#fff; border:2px solid var(--ink); color:var(--ink); text-transform:uppercase;
}
.answer input:focus{outline:2px solid var(--red); outline-offset:1px}
.hidden{display:none}
.result{margin-top:22px}
.certificate{border:3px double var(--red); padding:22px; margin-top:14px; text-align:center; background:#fff}
/* a printed clue — sentence case, typeset apart from body text */
.clue{font-family:Oswald,Arial,sans-serif; font-weight:500; letter-spacing:.03em; font-size:1.04rem;
  margin:.95em 0; padding-left:14px; border-left:3px solid var(--red)}

.card ul{margin:.8em 0 .3em 1.25em}
.card li{margin:.35em 0}

/* CaseSearch: its cover's noir dossier. On <body> it themes a page; on a .card, one panel. */
.noir{
  --paper:#121a27; --panel:#1a2434; --ink:#f2efe9; --red:#e3212f;
  --line:#2e3c52; --soft:#a4adbb; --tint:rgba(227,33,47,.12);
  color:var(--ink);
}
body.noir{background:radial-gradient(1200px 640px at 50% -12%, #23324c 0%, rgba(35,50,76,0) 70%) no-repeat, var(--paper)}
.noir .card, .card.noir{box-shadow:0 14px 34px rgba(0,0,0,.34)}

/* the cover's word-search grid, red frame and paper tags */
.wsboard{display:flex; align-items:center; justify-content:center; gap:16px; margin:24px 0 10px}
.wstags{display:flex; flex-direction:column; gap:30px}
.wstags span{background:#fff; color:#151515; font-family:Oswald,Arial,sans-serif; font-weight:600;
  letter-spacing:.06em; padding:6px 13px; position:relative; box-shadow:0 4px 10px rgba(0,0,0,.35)}
.wstags span::before{content:''; position:absolute; left:-9px; top:-5px; width:20px; height:9px;
  background:var(--red); transform:rotate(-32deg)}
.wstags span:nth-child(1){transform:rotate(-8deg)}
.wstags span:nth-child(2){transform:rotate(3deg)}
.wstags span:nth-child(3){transform:rotate(9deg)}
.wsgrid{display:grid; grid-template-columns:repeat(10,1fr); width:min(100%,330px); background:#fff; color:#151515;
  border:12px solid var(--red); padding:8px; transform:rotate(-1.2deg); box-shadow:0 16px 36px rgba(0,0,0,.4);
  font-family:Arial,Helvetica,sans-serif; font-weight:700}
.wsgrid span{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; font-size:clamp(.7rem,2.6vw,.98rem)}
.wsgrid .h{background:rgba(227,33,47,.28); color:#a3101a; border-radius:5px}
@media(max-width:560px){ .wstags{display:none} }

/* the bookshelf on the author page */
.books{display:grid; grid-template-columns:1fr; gap:26px; margin:22px 0 26px}
@media(min-width:760px){ .books{grid-template-columns:1fr 1fr} }
.books .card{margin:0; display:flex; flex-direction:column}
.books .cover{display:block; width:min(100%,230px); margin:6px auto 20px}
.books .cover img{width:100%; height:auto; display:block; border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(21,20,19,.28)}
.books .btnrow{margin-top:auto; padding-top:18px}
.kicker{font-family:Oswald,Arial,sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.16em;
  font-size:.74rem; color:var(--red); margin-bottom:.45em}

.qa{margin:18px 0}
.qa h3{font-family:Oswald,Arial,sans-serif; font-weight:600; letter-spacing:.05em; font-size:1rem; margin-bottom:.35em}
.qa h3::first-letter{color:var(--red)}
.notice{border-left:4px solid var(--red); padding:8px 14px; background:var(--tint)}