/* Landing / book-selection page for "The Lie in the Graph".
   Shares the game's dark + gold palette. Fonts come from CSS variables so the
   Hebrew layer (landing-he.css) can swap them. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');
:root{
  --bg:#0c1420; --panel:#121e2e; --panel2:#0f1926; --line:#23344a;
  --ink:#dce7f2; --dim:#7d93ab; --accent:#e8b44a;
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-body:'Libre Baskerville',Georgia,'Times New Roman',serif;
}
*{box-sizing:border-box; margin:0; padding:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--font-body); line-height:1.5;
  min-height:100vh; min-height:100dvh;
  background-image:radial-gradient(1100px 480px at 50% -8%, rgba(232,180,74,.07), transparent 62%);
}
.wrap{max-width:1040px; margin:0 auto; padding:52px 20px 64px}
header.site{text-align:center; margin-bottom:38px}
.site-logo{width:78px; height:78px; display:block; margin:0 auto 16px; border-radius:18px; border:1px solid var(--line); box-shadow:0 6px 20px rgba(0,0,0,.35)}
header.site h1{font-family:var(--font-display); font-weight:700; font-size:clamp(34px,7vw,56px); color:var(--accent); letter-spacing:.5px; line-height:1.05}
header.site .tagline{color:var(--dim); font-size:clamp(14px,2.5vw,17px); max-width:640px; margin:14px auto 0; line-height:1.65}
.lang-switch{display:inline-block; margin-top:20px; color:var(--dim); text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:7px 18px; font-size:14px; min-height:40px; transition:border-color .18s ease, color .18s ease}
.lang-switch:hover, .lang-switch:focus-visible{border-color:var(--accent); color:var(--ink); outline:none}
.lang-switch:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.book-grid{list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:16px}
.book-card{
  display:flex; flex-direction:column; gap:6px; height:100%; min-height:124px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px 22px;
  text-decoration:none; color:inherit;
  transition:border-color .18s ease, transform .18s ease, background .18s ease;
}
.book-card:hover, .book-card:focus-visible{border-color:var(--accent); transform:translateY(-2px); background:#16273b; outline:none}
.book-card:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.book-title{font-family:var(--font-display); font-weight:700; font-size:24px; color:var(--accent); line-height:1.15}
.book-author{color:var(--ink); font-style:italic; font-size:14px; opacity:.82}
.book-teaser{margin-top:auto; color:var(--dim); font-size:12.5px; letter-spacing:.3px}
.book-score{color:var(--accent); font-size:12.5px; font-weight:700; margin-top:6px; line-height:1.35}
.score-summary{text-align:center; color:var(--dim); font-size:13px; margin:0 auto 26px; max-width:680px}
.reset-scores{background:none; border:none; color:var(--dim); font:inherit; font-size:13px; text-decoration:underline; cursor:pointer; padding:0; min-height:32px}
.reset-scores:hover, .reset-scores:focus-visible{color:var(--accent); outline:none}
footer.site{text-align:center; color:var(--dim); font-size:12px; margin-top:42px; line-height:1.7}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} .book-card:hover{transform:none} }
@media (max-width:560px){ .wrap{padding:34px 16px 48px} .book-grid{grid-template-columns:1fr} }