/* Beginner Chess Principles blog: shared styles for every /blog/ post (nav, article, boards, CTA). */
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(/coaching/fonts/inter-400.ttf) format("truetype")}
@font-face{font-family:Inter;font-weight:700;font-display:swap;src:url(/coaching/fonts/inter-700.ttf) format("truetype")}
@font-face{font-family:Inter;font-weight:800 900;font-display:swap;src:url(/coaching/fonts/inter-800.ttf) format("truetype")}
:root{--navy:#09234a;--ink:#162033;--muted:#687187;--orange:#ff7a3d;--orange-2:#f2662a;--cream:#fbf7ef;--paper:#fff;--line:#e8dfd0;--blue-soft:#edf5ff;--green:#1f8a4c;--red:#d23b2f;--light:#efe4d2;--dark:#b88a62;--shadow:0 22px 55px rgba(9,35,74,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body.bl{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--cream);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;font-size:18px}
.bl a{color:var(--navy)}.bl img{max-width:100%;height:auto;display:block}
.bl-wrap{width:min(760px,calc(100% - 32px));margin:0 auto}
/* top nav: always visible, never a hamburger; wraps on small screens */
.bl-top{position:sticky;top:0;z-index:30;background:rgba(251,247,239,.95);backdrop-filter:blur(10px);border-bottom:1px solid rgba(9,35,74,.09)}
.bl-bar{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;padding:10px 0;flex-wrap:wrap;width:min(1040px,calc(100% - 24px))}
.bl-brand{display:flex;align-items:center;gap:9px;font-weight:900;color:var(--navy);text-decoration:none;letter-spacing:-.02em;font-size:16px}
.bl-brand img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.bl-nav{display:flex;gap:8px;flex-wrap:wrap}
.bl-nav a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid rgba(9,35,74,.14);color:var(--navy);font-weight:800;font-size:15px;text-decoration:none;white-space:nowrap}
.bl-nav a:hover{border-color:var(--navy)}
.bl-nav a.bl-nav-main{background:var(--orange);border-color:var(--orange);color:#fff}
@media (max-width:620px){.bl-brand span{display:none}.bl-bar{justify-content:center}.bl-brand{display:none}.bl-nav{justify-content:center;gap:6px}.bl-nav a{font-size:13px;padding:8px 10px}.bl-nav{gap:5px}.bl-h1m{}.bl h1{font-size:30px}.bl-lead{font-size:18px}}
/* article */
.bl-art{padding:34px 0 50px}
.bl-eyebrow{display:inline-block;font-size:13px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin-bottom:10px}
.bl h1,.bl h2,.bl h3{color:var(--navy);letter-spacing:-.03em;line-height:1.12}
.bl h1{font-size:clamp(32px,6vw,50px);font-weight:900;margin:0 0 16px}
.bl h2{font-size:clamp(25px,4.4vw,34px);font-weight:900;margin:48px 0 14px}
.bl h3{font-size:21px;font-weight:850;margin:26px 0 8px}
.bl p{margin:0 0 16px}.bl-lead{font-size:20px;color:#3d4659}
.bl-meta{color:var(--muted);font-size:15px;margin-bottom:22px}
.bl-pitch{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px 20px;margin:22px 0;box-shadow:var(--shadow)}
.bl-pitch p{margin:14px 0 0}.bl-pitch .bl-btn{width:100%;max-width:420px}
.bl-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;border-radius:999px;padding:14px 26px;font-size:18px;font-weight:900;background:var(--orange);color:#fff!important;text-decoration:none;box-shadow:0 12px 28px rgba(255,122,61,.28);letter-spacing:-.01em}
.bl-btn:after{content:"\2192";margin-left:10px}.bl-btn:hover{background:var(--orange-2)}
.bl-btn.big{font-size:22px;min-height:64px;padding:18px 34px;width:100%;max-width:460px}
.bl-cta{text-align:center;background:var(--navy);color:#fff;border-radius:24px;padding:30px 22px;margin:44px 0 10px}
.bl-cta h2{color:#fff;margin-top:0}.bl-cta p{color:#d7deea}
.bl-check{background:var(--blue-soft);border-left:6px solid var(--navy);border-radius:14px;padding:16px 20px;margin:18px 0}
.bl-check ol{margin:8px 0 0;padding-left:22px}.bl-check li{margin:6px 0}
.bl-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:18px 0;padding:0;list-style:none}
.bl-links a{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;text-decoration:none;font-weight:850;min-height:44px}
.bl-links a small{display:block;font-weight:400;color:var(--muted);font-size:14px;margin-top:3px}
.bl-fig{margin:18px 0}.bl-fig figcaption{font-size:15px;color:var(--muted);margin-top:8px}
.bl-fig img{width:100%;max-width:420px;border-radius:10px}
/* interactive board (story + puzzles) */
.bb{background:#fff;border:1px solid var(--line);border-radius:20px;padding:14px;margin:20px 0;box-shadow:var(--shadow)}
.bb-board{position:relative;width:100%;max-width:440px;aspect-ratio:1/1;margin:0 auto;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);border-radius:8px;overflow:hidden;user-select:none}
.bb-sq{position:relative;background:var(--light)}.bb-sq.d{background:var(--dark)}
.bb-sq.lm{box-shadow:inset 0 0 0 999px rgba(255,190,60,.45)}
.bb-sq img{position:absolute;inset:0;width:100%;height:100%}
.bb-sq .co{position:absolute;font-size:10px;font-weight:800;line-height:1;opacity:.75;pointer-events:none}
.bb-sq .co.f{right:2px;bottom:2px}.bb-sq .co.r{left:2px;top:2px}
.bb-arr{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bb-static img{max-width:440px;margin:0 auto;border-radius:8px}
.bb-tabs,.bb-ctl,.bb-opts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:12px 0 4px}
.bb button{font:inherit;font-size:16px;font-weight:850;min-height:46px;padding:10px 16px;border-radius:999px;border:1px solid rgba(9,35,74,.18);background:#fff;color:var(--navy);cursor:pointer}
.bb button[aria-pressed=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
.bb button.bad[aria-pressed=true]{background:var(--red);border-color:var(--red)}
.bb button.good[aria-pressed=true]{background:var(--green);border-color:var(--green)}
.bb button:disabled{opacity:.4;cursor:default}
.bb-ctl button{min-width:64px;font-size:20px}
.bb-moves{display:flex;flex-wrap:wrap;gap:4px 6px;justify-content:center;margin:8px 0;font-size:16px}
.bb-moves span{padding:3px 8px;border-radius:8px;cursor:pointer}.bb-moves span.n{cursor:default;color:var(--muted);padding:3px 0}
.bb-moves span.cur{background:var(--orange);color:#fff}
.bb-note{text-align:center;font-size:16px;margin:8px 4px 2px;min-height:1.6em}
.bb-opts button{min-width:110px;font-size:19px}
.bb-res{margin:10px 4px 0;padding:12px 14px;border-radius:14px;font-size:16px}
.bb-res.ok{background:#e7f6ec;border:1px solid #b8e2c6}.bb-res.no{background:#fdeceb;border:1px solid #f3c2bd}
.bb-q{font-weight:850;color:var(--navy);text-align:center;margin:4px 0 8px}
.bl-hide{display:none}
.bl-small{font-size:15px;color:var(--muted)}
/* "Why use the Blunderer?" section: real screenshots */
.bl-sub{font-size:19px;font-weight:800;color:var(--orange-2);margin:-6px 0 14px}
.bl-shot{margin:18px auto 24px;text-align:center}
.bl-shot img{width:100%;max-width:620px;margin:0 auto;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}
.bl-shot.narrow img{max-width:390px}
.bl-shot figcaption{text-align:center}
.bl-shots{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 24px}
.bl-shots .bl-shot{margin:0}
@media (max-width:620px){.bl-shots{grid-template-columns:1fr}.bl-shots .bl-shot img{max-width:390px}}
.bl-why-list{padding-left:22px;margin:0 0 16px}.bl-why-list li{margin:8px 0}