/* ============================================================
   MIRRIM — Blog stylesheet (hub + single post)
   Light, readable, brand accents only. Manrope.
   ============================================================ */

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }

:root {
  /* purple scale */
  --p50:#F4F0FF; --p100:#E7DEFF; --p200:#C9B8FF; --p300:#A78BFA; --p400:#8B5CF6;
  --p500:#7C3AED; --p600:#6D28D9; --p700:#5B21B6; --p800:#4C1D95; --p900:#2E1065;
  /* lime CTA */
  --lime:#C6F432; --lime-600:#A8D920; --on-lime:#0A0A0A;
  --info:#2563EB; --success:#5DD33C;
  /* ink */
  --ink-900:#0A0A0A; --ink-700:#2A2A2A; --ink-500:#6B6B6B; --ink-400:#9A9A9A;
  --ink-300:#C7C7C7; --ink-200:#E5E5E5; --ink-100:#F2F2F4; --ink-50:#F7F7F8; --white:#FFFFFF;
  /* radii */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:24px; --pill:999px;
  /* shadow */
  --sh-card:0 4px 24px rgba(20,10,60,.08);
  --sh-hover:0 22px 48px -18px rgba(20,10,60,.22);
  --sh-cta:0 12px 26px -8px rgba(168,217,32,.5);
  --font:"Manrope","SF Pro Text",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --maxw:1120px; --readw:680px;
}

body { background:var(--white); color:var(--ink-900); font-family:var(--font); font-weight:500;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { max-width:100%; display:block; }
a { color:inherit; }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 clamp(18px,4vw,40px); }
.read { max-width:var(--readw); margin:0 auto; padding:0 20px; }

/* ── type scale (px/lh per spec) ── */
.d1 { font:800 clamp(28px,4.6vw,34px)/1.05 var(--font); letter-spacing:-.025em; }
.d2 { font:800 clamp(24px,3.2vw,28px)/1.1 var(--font); letter-spacing:-.02em; }
.d3 { font:700 clamp(20px,2.3vw,22px)/1.2 var(--font); letter-spacing:-.01em; }
.t-h1 { font:700 20px/1.25 var(--font); letter-spacing:-.01em; }
.t-h2 { font:700 17px/1.3 var(--font); }
.t-body { font:500 15px/1.4 var(--font); }
.t-cap { font:600 13px/1.3 var(--font); }
.t-micro { font:600 11px/1.2 var(--font); letter-spacing:.13em; text-transform:uppercase; }

/* ── buttons ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border-radius:var(--pill); font:700 15px/1 var(--font);
  border:0; cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s, color .18s; }
.btn-lime { background:var(--lime); color:var(--on-lime); box-shadow:var(--sh-cta); }
.btn-lime:hover { transform:translateY(-2px); box-shadow:0 16px 32px -8px rgba(168,217,32,.66); }
.btn-lime:active { transform:translateY(0); }
.btn-purple { background:var(--p500); color:#fff; box-shadow:0 10px 22px -10px rgba(124,58,237,.6); }
.btn-purple:hover { transform:translateY(-2px); background:var(--p600); }
.btn-outline { background:#fff; color:var(--ink-900); border:1.5px solid var(--ink-200); }
.btn-outline:hover { border-color:var(--ink-900); background:var(--ink-50); }
.btn-sm { padding:10px 16px; font-size:14px; }
.btn-lg { padding:16px 28px; font-size:16px; }

/* ════════════ NAV ════════════ */
.nav { position:sticky; top:0; z-index:600; background:rgba(255,255,255,.86);
  backdrop-filter:blur(20px) saturate(1.4); border-bottom:1px solid var(--ink-200); }
.nav__inner { display:flex; align-items:center; justify-content:space-between; gap:18px; height:64px; }
.nav__logo { display:flex; align-items:center; gap:9px; text-decoration:none; }
.nav__logo img { height:25px; }
.nav__nav { display:flex; align-items:center; gap:4px; }
.nav__link { color:var(--ink-700); font:600 15px/1 var(--font); text-decoration:none;
  padding:9px 13px; border-radius:var(--pill); transition:background .15s, color .15s; }
.nav__link:hover { background:var(--ink-100); }
.nav__link.active { color:var(--p500); background:var(--p50); }
.nav__right { display:flex; align-items:center; gap:10px; }
.nav__burger { display:none; width:42px; height:42px; border-radius:var(--r-md); border:1px solid var(--ink-200);
  background:#fff; cursor:pointer; align-items:center; justify-content:center; }
.nav__burger svg { stroke:var(--ink-900); }
/* mobile drawer */
.drawer { position:fixed; inset:0; z-index:700; background:rgba(10,5,25,.42); opacity:0; pointer-events:none; transition:opacity .25s; }
.drawer.open { opacity:1; pointer-events:auto; }
.drawer__panel { position:absolute; top:0; right:0; width:min(320px,86vw); height:100%; background:#fff;
  padding:22px; transform:translateX(100%); transition:transform .28s ease; display:flex; flex-direction:column; gap:6px; }
.drawer.open .drawer__panel { transform:translateX(0); }
.drawer__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.drawer__panel a.dlink { padding:14px 14px; border-radius:var(--r-md); text-decoration:none; color:var(--ink-900);
  font:600 16px/1 var(--font); transition:background .15s; }
.drawer__panel a.dlink:hover { background:var(--ink-50); }
.drawer__panel a.dlink.active { color:var(--p500); background:var(--p50); }
.drawer__panel .btn { margin-top:14px; }
.iconbtn { width:40px; height:40px; border-radius:var(--r-md); border:1px solid var(--ink-200); background:#fff;
  display:grid; place-items:center; cursor:pointer; }

/* ════════════ category chips palette ════════════ */
.chip { display:inline-flex; align-items:center; gap:6px; font:700 11px/1 var(--font);
  letter-spacing:.04em; text-transform:uppercase; padding:6px 10px; border-radius:var(--pill);
  border:1px solid transparent; white-space:nowrap; }
.chip::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.9; }
.chip.games     { color:#7C3AED; background:#F4F0FF; border-color:#E7DEFF; }
.chip.tips      { color:#B5740A; background:#FFF4E0; border-color:#F4DCAE; }
.chip.school    { color:#1D4ED8; background:#E8F0FE; border-color:#C7DBFB; }
.chip.biz       { color:#4C1D95; background:#ECE6FA; border-color:#D7CCF2; }
.chip.franchise { color:#2E8B1E; background:#E6F8E2; border-color:#C5EDBC; }
.chip.news      { color:#4A4A4A; background:#F2F2F4; border-color:#E1E1E5; }
.chip.stories   { color:#5E7A0E; background:#F2FAD6; border-color:#E1F09B; }

/* ── placeholder cover ── */
.ph { position:relative; display:grid; place-items:center; overflow:hidden;
  background:repeating-linear-gradient(135deg, rgba(124,58,237,.07) 0 11px, rgba(124,58,237,.015) 11px 22px), var(--ink-50);
  border:1px solid var(--ink-200); }
.ph[data-tone="purple"] { background:repeating-linear-gradient(135deg, rgba(124,58,237,.12) 0 11px, rgba(124,58,237,.03) 11px 22px), #F1ECFB; border-color:#E1D6F6; }
.ph[data-tone="blue"]   { background:repeating-linear-gradient(135deg, rgba(37,99,235,.11) 0 11px, rgba(37,99,235,.03) 11px 22px), #ECF1FD; border-color:#CFE0FB; }
.ph[data-tone="green"]  { background:repeating-linear-gradient(135deg, rgba(46,139,30,.11) 0 11px, rgba(46,139,30,.03) 11px 22px), #ECF7E8; border-color:#CDEBC4; }
.ph[data-tone="amber"]  { background:repeating-linear-gradient(135deg, rgba(181,116,10,.12) 0 11px, rgba(181,116,10,.03) 11px 22px), #FBF3E4; border-color:#F1E0BD; }
.ph[data-tone="lime"]   { background:repeating-linear-gradient(135deg, rgba(94,122,14,.12) 0 11px, rgba(94,122,14,.03) 11px 22px), #F6FBE3; border-color:#E6F2A8; }
.ph__tag { font:600 11px/1.3 ui-monospace,"SF Mono",Menlo,monospace; letter-spacing:.03em; text-transform:uppercase;
  color:var(--p500); opacity:.78; padding:5px 11px; border:1px dashed rgba(124,58,237,.4); border-radius:var(--pill); background:rgba(255,255,255,.55); text-align:center; }

/* ── article card ── */
.acard { display:flex; flex-direction:column; background:#fff; border:1px solid var(--ink-200);
  border-radius:var(--r-xl); overflow:hidden; text-decoration:none; box-shadow:var(--sh-card);
  transition:transform .26s ease, box-shadow .26s ease, border-color .2s; }
.acard:hover { transform:translateY(-7px); box-shadow:var(--sh-hover); border-color:var(--p100); }
.acard__cover { position:relative; aspect-ratio:16/9; }
.acard__cover .ph { position:absolute; inset:0; }
.acard__body { padding:18px 19px 20px; display:flex; flex-direction:column; flex:1; }
.acard__body .chip { align-self:flex-start; margin-bottom:12px; }
.acard__title { font:700 18px/1.28 var(--font); letter-spacing:-.01em; color:var(--ink-900); margin-bottom:8px; }
.acard__lead { font:500 14px/1.5 var(--font); color:var(--ink-500); margin-bottom:auto; }
.acard__meta { display:flex; align-items:center; gap:8px; margin-top:16px; font:600 12px/1 var(--font); color:var(--ink-400); }
.acard__meta .dot { width:3px; height:3px; border-radius:50%; background:var(--ink-300); }

/* ── reveal ── */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ════════════ FOOTER ════════════ */
.footer { background:var(--ink-900); color:#fff; padding:52px 0 34px; margin-top:0; }
.footer__grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:30px; margin-bottom:34px; }
.footer__about { max-width:280px; }
.footer__about img { height:23px; margin-bottom:13px; opacity:.95; }
.footer__about p { font:500 13px/1.55 var(--font); color:rgba(255,255,255,.5); }
.footer__social { display:flex; gap:10px; margin-top:16px; }
.footer__social a { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); display:grid; place-items:center; color:#fff; transition:background .2s; }
.footer__social a:hover { background:var(--p500); }
.footer__col h4 { font:700 12px/1 var(--font); letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:13px; }
.footer__col a { display:block; color:rgba(255,255,255,.72); text-decoration:none; font:500 14px/1 var(--font); padding:7px 0; transition:color .15s; }
.footer__col a:hover { color:#fff; }
.footer__bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.1); padding-top:22px; font:500 12px/1.5 var(--font); color:rgba(255,255,255,.4); }

/* ════════════ LEGEND ════════════ */
.legend { background:#0d0a18; color:#fff; padding:48px 0; }
.legend h4 { font:800 13px/1 var(--font); letter-spacing:.12em; text-transform:uppercase; color:var(--lime); margin-bottom:24px; }
.legend__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.legend__b h5 { font:700 12px/1 var(--font); letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:14px; }
.swatch { display:flex; align-items:center; gap:10px; margin-bottom:9px; font:600 12px/1.2 var(--font); color:rgba(255,255,255,.82); }
.swatch i { width:22px; height:22px; border-radius:7px; flex-shrink:0; border:1px solid rgba(255,255,255,.12); }
.legend__b p { font:500 12px/1.6 var(--font); color:rgba(255,255,255,.6); }
.legend__b .anno { display:flex; gap:8px; align-items:flex-start; margin-bottom:8px; font:500 12px/1.45 var(--font); color:rgba(255,255,255,.7); }
.legend__b .anno b { color:var(--lime); font-weight:800; }
.legend__chips { display:flex; flex-wrap:wrap; gap:7px; }

@media (max-width:980px) {
  .footer__grid { grid-template-columns:1fr 1fr; }
  .legend__grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px) {
  .nav__nav, .nav__right .nav__cta-desktop { display:none; }
  .nav__burger { display:flex; }
  .footer__grid { grid-template-columns:1fr; }
  .legend__grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal { opacity:1 !important; transform:none !important; }
}

/* ── generated cover images (article cover + cards) ── */
.post-cover img { width:100%; aspect-ratio:16/8; object-fit:cover; border-radius:var(--r-2xl); display:block; }
.acard__cover img, .featured__cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ── inline article illustrations ── */
.post-body .post-illu { margin:30px 0; }
.post-body .post-illu img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r-lg); display:block; border:1px solid var(--ink-200); }
.post-body .post-illu figcaption { margin-top:9px; text-align:center; font:500 13px/1.4 var(--font); color:var(--ink-400); }