/* ============================================================ [Brand] — shared stylesheet ------------------------------------------------------------ HOW TO RETHEME (edit here, every page updates): 1. Colours & fonts live in :root below — change a value once. 2. Per-page accent: put a category class on , e.g. (bullet / blitz / rapid / classical) The page then uses --accent automatically. 3. New skin later? Duplicate :root values under a class like .theme-light and toggle that class on . ============================================================ */ :root{ /* core palette */ --bg:#17110b; --ink:#f0ece3; --ink-soft:#d7d1c4; --muted:#8a857a; --faint:#666; --gold:#e8d5a3; --gold-hi:#f0e4bc; --gold-soft:rgba(232,213,163,.1); --line:rgba(255,255,255,.1); /* accent — overridden per category by the body classes below */ --accent:#e8d5a3; /* type */ --font-display:'Playfair Display',serif; --font-body:'DM Sans',sans-serif; --font-mono:'DM Mono',monospace; /* layout */ --maxw-read:760px; /* article measure */ --maxw-chrome:1100px; /* header / footer width */ --radius:10px; } /* category accents */ .cat-bullet {--accent:#e87b5a;} .cat-blitz {--accent:#e8c45a;} .cat-rapid {--accent:#7be8a3;} .cat-classical {--accent:#5ab4e8;} /* ---------- reset / base ---------- */ *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{font-family:var(--font-body);background:var(--bg);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased;position:relative;min-height:100vh;} .board-pattern{ position:fixed; inset:0; z-index:0; pointer-events:none; background-color:#17110b; background-image: radial-gradient(130% 95% at 50% -12%, rgba(150,92,46,.16), rgba(150,92,46,0) 55%), repeating-conic-gradient(#241710 0% 25%, #1b120b 0% 50%); background-size:100% 100%, 58px 58px; background-repeat:no-repeat, repeat; } .wrap{position:relative;z-index:1;max-width:var(--maxw-read);margin:0 auto;padding:0 clamp(1.25rem,5vw,2rem);} .skip{position:absolute;left:-999px;top:0;background:var(--gold);color:#0d0d0d;padding:8px 14px;border-radius:0 0 8px 0;z-index:50;} .skip:focus{left:0;} /* ---------- header / nav ---------- */ header{position:relative;z-index:2;border-bottom:.5px solid var(--line);background:rgba(13,13,13,.85);backdrop-filter:blur(8px);} .nav{max-width:var(--maxw-chrome);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:14px clamp(1.25rem,5vw,2rem);} .brand{font-family:var(--font-display);font-weight:900;font-size:1.25rem;letter-spacing:.04em;color:var(--gold);text-decoration:none;white-space:nowrap;} .nav-links{display:flex;gap:clamp(8px,2vw,20px);flex-wrap:wrap;justify-content:flex-end;} .nav-links a{color:var(--muted);text-decoration:none;font-size:13px;letter-spacing:.05em;text-transform:uppercase;transition:color .15s;} .nav-links a:hover,.nav-links a[aria-current]{color:var(--gold);} /* ---------- breadcrumb ---------- */ .crumbs{font-size:12px;color:var(--faint);letter-spacing:.04em;padding:18px 0 0;} .crumbs a{color:var(--muted);text-decoration:none;} .crumbs a:hover{color:var(--gold);} .crumbs span{color:var(--gold);} /* ---------- hero ---------- */ .hero{padding:clamp(1.5rem,5vw,2.75rem) 0 clamp(1.5rem,4vw,2.25rem);} .eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;} h1{font-family:var(--font-display);font-weight:900;font-size:clamp(2.4rem,8vw,3.6rem);line-height:1.02;letter-spacing:.01em;color:var(--ink);margin-bottom:14px;} .lede{font-size:clamp(1rem,2.5vw,1.18rem);color:#cfc8b8;font-weight:300;max-width:60ch;} .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;} .inline-cta{margin-top:1.4rem;} /* ---------- buttons ---------- */ .btn{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--font-body);font-size:15px;font-weight:500;letter-spacing:.04em;border-radius:var(--radius);padding:14px 24px;cursor:pointer;transition:all .15s;border:1px solid transparent;} .btn-primary{background:var(--gold);color:#0d0d0d;border-color:var(--gold);} .btn-primary:hover{background:var(--gold-hi);transform:translateY(-1px);} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);} .btn-ghost:hover{border-color:var(--gold);color:var(--gold);} /* ---------- article ---------- */ main{padding-bottom:3rem;} article h2,.section-head{font-family:var(--font-display);font-weight:700;font-size:clamp(1.4rem,4vw,1.85rem);color:var(--gold);margin:2.4rem 0 .8rem;letter-spacing:.01em;} .section-head.sm{font-size:clamp(1.2rem,3.5vw,1.5rem);margin:2.4rem 0 .2rem;} article p{margin-bottom:1.1rem;color:var(--ink-soft);} article p .key{color:var(--ink);font-weight:500;} article a{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent);transition:border-color .15s;} article a:hover{border-bottom-color:var(--accent);} .def{font-family:var(--font-mono);color:var(--ink);} article h3{font-family:var(--font-display);font-weight:700;font-size:clamp(1.1rem,3vw,1.35rem);color:var(--ink);margin:1.7rem 0 .5rem;} article ul,article ol{margin:0 0 1.1rem 1.25rem;color:var(--ink-soft);} article li{margin-bottom:.5rem;} article li::marker{color:var(--accent);} article strong{color:var(--ink);font-weight:500;} article blockquote{border-left:2px solid var(--accent);padding-left:14px;margin:0 0 1.1rem;color:var(--muted);} .legal-meta{font-size:13px;color:var(--faint);margin:-.4rem 0 1.6rem;} /* ---------- control cards ---------- */ .controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:1.2rem 0 .4rem;} .ctrl{display:block;text-decoration:none;background:rgba(255,255,255,.03);border:.5px solid var(--line);border-radius:12px;padding:18px;transition:all .15s;} .ctrl:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);transform:translateY(-2px);} .ctrl .tc{font-family:var(--font-mono);font-size:1.5rem;font-weight:500;color:var(--ink);} .ctrl .nm{font-size:13px;color:var(--muted);margin-top:4px;} .ctrl .go{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-top:12px;} /* ---------- faq ---------- */ .faq{margin-top:1rem;border-top:.5px solid var(--line);} .faq details{border-bottom:.5px solid var(--line);} .faq summary{cursor:pointer;list-style:none;padding:18px 32px 18px 0;font-weight:500;color:var(--ink);position:relative;font-size:1.02rem;} .faq summary::-webkit-details-marker{display:none;} .faq summary::after{content:'+';position:absolute;right:4px;top:16px;font-size:1.4rem;color:var(--accent);transition:transform .2s;} .faq details[open] summary::after{transform:rotate(45deg);} .faq p{padding:0 0 18px;color:#cfc8b8;} /* ---------- related ---------- */ .related{display:flex;flex-wrap:wrap;gap:10px;margin-top:1rem;} .related a{font-size:13px;color:var(--muted);text-decoration:none;border:.5px solid var(--line);border-radius:20px;padding:8px 16px;transition:all .15s;} .related a:hover{color:var(--gold);border-color:rgba(232,213,163,.4);} /* ---------- footer ---------- */ footer{position:relative;z-index:2;border-top:.5px solid var(--line);background:rgba(0,0,0,.5);margin-top:2rem;} .foot{max-width:var(--maxw-chrome);margin:0 auto;padding:28px clamp(1.25rem,5vw,2rem);display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;font-size:13px;color:var(--faint);} .foot a{color:var(--muted);text-decoration:none;margin-right:16px;} .foot a:hover{color:var(--gold);} .foot-cols{display:flex;gap:clamp(20px,5vw,48px);flex-wrap:wrap;} .foot-tag{margin-top:8px;color:var(--faint);}