/* 🐝 BeeEasy Russian — Reading hub pages (shared style) */
:root{
  --honey:#F5A623; --honey-dark:#E0911C; --beeswax:#F5C842;
  --brown:#3D1C02; --brown-soft:#5b4326;
  --cream:#FFF9E6; --cream-bg:#FFFBF4; --wing:#DFF4FF;
  --green:#5bb24a; --card:#FFFFFF; --muted:#9a8a73; --border:#F3DCA6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:'Nunito',sans-serif; color:var(--brown);
  background-color:var(--cream-bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23F5C842' stroke-opacity='0.22' stroke-width='1.5'%3E%3Cpath d='M28 0L56 16v34L28 66 0 50V16z'/%3E%3Cpath d='M28 66l28 16v18M28 66L0 82v18'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- HEADER (remove this block if main.js injects the site header) ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--honey);
  box-shadow:0 2px 10px rgba(61,28,2,.12)}
.site-header .inner{max-width:1180px;margin:0 auto;padding:14px 22px;
  display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand .mark{width:38px;height:38px;border-radius:50%;background:var(--cream);
  display:grid;place-items:center;font-size:20px;box-shadow:0 1px 4px rgba(61,28,2,.2)}
.brand .name{font-family:'Unbounded',sans-serif;font-weight:700;font-size:20px;color:var(--brown)}
.brand .name b{font-weight:900}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.site-nav a{text-decoration:none;color:var(--brown);font-weight:800;font-size:15px}
.site-nav a:hover{color:#fff}
.site-nav a.cta{position:relative}
.site-nav a.cta::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;
  border-radius:3px;background:var(--brown);opacity:.6}

/* ---------- PAGE HEADER ---------- */
.page-head{background:var(--cream);border-bottom:1px solid var(--border)}
.page-head .inner{max-width:1180px;margin:0 auto;padding:46px 22px 40px}
.eyebrow{display:inline-block;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  font-size:13px;color:var(--honey-dark);margin-bottom:10px}
.page-head h1{font-family:'Unbounded',sans-serif;font-weight:900;color:var(--brown);
  font-size:clamp(34px,6vw,56px);line-height:1.05;margin:0 0 14px}
.lead{font-size:18px;color:var(--brown-soft);max-width:680px;line-height:1.5;margin:0}
.crumbs{margin-bottom:18px;font-size:14px;font-weight:700}
.crumbs a{color:var(--honey-dark);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span{color:var(--muted)}

/* ---------- CARDS ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:40px 22px 70px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}

.card{position:relative;display:flex;flex-direction:column;background:var(--card);
  border:2px solid var(--border);border-radius:22px;padding:24px;
  text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(245,166,35,.18);border-color:var(--honey)}
.card:focus-visible{outline:3px solid var(--honey);outline-offset:3px}

.hex{width:74px;height:82px;margin-bottom:16px;display:grid;place-items:center;
  background:var(--beeswax);color:var(--brown);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  font-family:'Unbounded',sans-serif;font-weight:900;font-size:30px}
.hex.small{font-size:24px}

.pill{display:inline-block;align-self:flex-start;background:var(--honey);color:#fff;
  font-weight:900;font-size:12px;padding:5px 12px;border-radius:999px;margin-bottom:10px}
.pill.new{background:var(--green);margin-left:8px}
.pill.soon{background:#e7ddcb;color:var(--muted)}
.badges{display:flex;align-items:center;margin-bottom:10px}

.card h3{font-family:'Unbounded',sans-serif;font-weight:700;font-size:21px;color:var(--brown);margin:0 0 8px}
.card p{font-size:15px;color:var(--muted);line-height:1.45;margin:0 0 18px}
.go{margin-top:auto;font-weight:900;color:var(--honey-dark);font-size:15px}
.card:hover .go{color:var(--honey)}

/* locked / soon card */
.card.soon{cursor:default;background:#fdfaf2;border-style:dashed}
.card.soon:hover{transform:none;box-shadow:none;border-color:var(--border)}
.card.soon .hex{background:#efe6d4;color:var(--muted)}
.card.soon h3{color:var(--muted)}
.card.soon .go{color:var(--muted)}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--brown);color:#f3e6cf;text-align:center;padding:26px 22px;
  font-weight:700;font-size:14px}
.site-footer b{color:var(--beeswax)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}