:root{--ink:#0b2f63;--muted:#394150;--blue:#2f80ed;--blue2:#1f6fe0;--paper:#fffaf0;--line:#dfe7f3;--white:#fff;--soft:#eaf4ff}*{box-sizing:border-box}html{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6;color:var(--ink);background:linear-gradient(180deg,#fffaf0,#f7fbff)}body{margin:0}a{color:var(--blue)}a:hover{text-decoration:underline}.skip{position:absolute;left:-9999px}.skip:focus{left:1em;top:1em;background:white;padding:1em;z-index:9}.top{padding:19px max(24px,calc((100vw - 1120px)/2));background:#fff;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:24px}.brand{font-weight:900;letter-spacing:.045em;font-size:24px;text-decoration:none;color:#0b2f63}.brand span{color:#1652a4}.brand small{font-size:11px;display:block;color:var(--muted);font-weight:400;letter-spacing:0;margin-top:-3px}.top nav{display:flex;gap:22px;flex-wrap:wrap}.top nav a{text-decoration:none;color:var(--ink);font-weight:600;font-size:14px}.top nav a[aria-current]{color:var(--blue)}.container{max-width:1120px;margin:auto;padding:0 24px}.hero{background:linear-gradient(110deg,#eaf2ff 0%,#f7fbff 75%);border:1px solid #d7e6fb;border-radius:24px;padding:58px 56px;margin:36px 0 40px}.eyebrow{font-size:12px;font-weight:800;color:#125cba;letter-spacing:.16em;text-transform:uppercase}.hero h1{font-size:clamp(32px,5vw,57px);line-height:1.13;max-width:760px;letter-spacing:-.04em;margin:18px 0}.hero p{font-size:18px;color:var(--muted);max-width:690px}.section{margin-bottom:54px}.heading{display:flex;align-items:baseline;justify-content:space-between;gap:15px}.heading h2,.principles h2{font-size:27px}.heading p{color:var(--muted)}.filters{display:flex;gap:15px;align-items:end;flex-wrap:wrap;margin:20px 0 25px}.filters label{display:flex;flex-direction:column;font-size:13px;font-weight:700;gap:6px;flex:1;min-width:165px}.filters select,.filters input{background:white;border:1px solid #cbd8ea;border-radius:9px;padding:12px;color:var(--ink);font:inherit;width:100%}.filters button,.tool-cta a{background:var(--blue);border:0;border-radius:10px;color:white;font-weight:700;padding:12px 24px;cursor:pointer;text-decoration:none}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card{display:flex;flex-direction:column;padding:25px;background:white;border-radius:16px;border:1px solid var(--line);box-shadow:0 7px 22px #1f56900a}.card-cat{font-size:12px;color:var(--blue);font-weight:800;text-transform:uppercase}.card h3{font-size:22px;line-height:1.3}.card h3 a{text-decoration:none;color:var(--ink)}.card p{color:var(--muted)}.card-bottom{margin-top:auto;display:flex;justify-content:space-between;gap:12px;font-size:13px}.card-bottom time{color:var(--muted)}.empty{text-align:center;background:white;border:1px dashed #b7c9e1;border-radius:18px;padding:55px 20px}.empty h3{font-size:24px;margin:12px 0}.empty p{color:var(--muted);max-width:480px;margin:0 auto 22px}.empty-icon{font-size:35px;font-weight:900;color:var(--blue)}.principles{background:#eaf4ff;border-radius:20px;padding:25px 32px;margin:40px 0 60px}.principle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.principle-grid p{color:var(--muted);margin:5px 0}.pager{display:flex;gap:22px;justify-content:center;margin:30px}.crumbs{color:var(--muted);font-size:13px;margin:28px 0}.story{max-width:760px;margin:0 auto 64px}.story h1{font-size:clamp(34px,5vw,55px);line-height:1.13;letter-spacing:-.035em;margin:12px 0}.dek{font-size:20px;color:var(--muted)}.meta{font-size:13px;color:var(--muted);margin:25px 0 28px}.answer{border-left:4px solid var(--blue);padding:12px 22px;background:var(--soft);border-radius:0 12px 12px 0}.answer p{margin:5px 0}.article-body{font-family:Georgia,serif;font-size:19px;line-height:1.85}.article-body p{margin:24px 0}.sources{border-top:1px solid var(--line);margin:40px 0}.sources h2{font-size:22px}.sources li{overflow-wrap:anywhere;margin:12px 0}.tool-cta{border-radius:15px;background:var(--soft);padding:28px}.tool-cta h2{margin:0}.tool-cta p{margin-bottom:25px}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;color:var(--muted);font-size:13px;padding:22px max(24px,calc((100vw - 1120px)/2))}footer a{color:var(--muted)}@media(max-width:750px){.top{flex-direction:column;align-items:start}.top nav{gap:12px}.hero{padding:32px 24px}.cards,.principle-grid{grid-template-columns:1fr}.heading{display:block}.article-body{font-size:18px}.principles{padding:22px}}


/* WordJumble Articles: shared visual language of the approved WordJumble homepage.
   Scoped to /articles/; game, tools, and database code are unchanged. */
:root {
  --ink: #0b2f63;
  --muted: #394150;
  --blue: #2f80ed;
  --blue2: #1f6fe0;
  --paper: #fffaf0;
  --line: #dfe7f3;
  --soft: #eaf4ff;
  --coral: #ff6863;
  --purple: #8155e8;
  --yellow: #f7c948;
  --green: #59c96f;
  --shadow: 0 14px 40px rgba(30,72,130,.10);
}
html {font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#111;background:#fffaf0}
body {background:linear-gradient(180deg,#fffaf0 0,#fffdf8 420px,#f7fbff 100%);color:#111;min-height:100vh}
h1,h2,h3,h4 {color:#0b2f63}
p,.hero p,.card p,.empty p,.heading p,.principle-grid p,.dek,.meta {color:#111}
a {color:#0b2f63}
.container {max-width:1080px}
.top {padding:16px max(24px,calc((100vw - 1080px)/2));border-bottom:1px solid #dfe7f3;gap:24px;background:rgba(255,255,255,.94)}
.brand {display:flex;align-items:center;gap:6px;flex-shrink:0;font-size:inherit;letter-spacing:normal;font-weight:800;text-decoration:none;white-space:nowrap}
.brand-tiles {display:inline-flex;align-items:center;gap:5px}
.brand-tile {display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;color:#0e2f68;font-size:20px;font-weight:900;box-shadow:0 3px 0 rgba(20,48,107,.08)}
.tile-blue {background:#72b8ff;transform:rotate(-2deg)}
.tile-yellow {background:#ffd44f;transform:rotate(1deg)}
.tile-coral {background:#ff7773;transform:rotate(-1deg)}
.tile-green {background:#78d966;transform:rotate(2deg)}
.brand-word {font-size:29px;color:#0b2f63;letter-spacing:-1.2px;font-weight:850;margin-left:2px}
.brand-tagline {font-size:12px;color:#0b2f63;font-weight:800;line-height:1.18;max-width:102px;white-space:normal;text-align:center;margin-left:14px}
.top nav {gap:8px;align-items:center}
.top nav a {padding:9px 12px;border-radius:9px;font-weight:700;color:#0b2f63}
.top nav a:hover {background:#eaf4ff;text-decoration:none}
.top nav a[aria-current] {background:#fff6cf;color:#0b2f63}
.hero {background:linear-gradient(120deg,#eaf4ff 0%,#fff6cf 100%);border:1px solid #d7e8fb;border-radius:18px;box-shadow:0 7px 22px rgba(30,72,130,.045);padding:38px 42px;margin:26px 0 34px}
.eyebrow {color:#1652a4;letter-spacing:.09em}
.hero h1 {font-size:clamp(31px,4vw,45px);line-height:1.15;max-width:740px;margin:12px 0;letter-spacing:-.025em}
.hero p {font-size:16px;line-height:1.7;max-width:690px;margin:8px 0}
.heading h2,.principles h2 {font-size:27px;letter-spacing:-.02em}
.filters {align-items:end;gap:12px}
.filters label {font-size:14px;color:#0b2f63}
.filters select,.filters input {border:1px solid #cfd9e8;border-radius:11px;min-height:50px;color:#071a35}
.filters select:focus,.filters input:focus {outline:2px solid #5aa2ff;outline-offset:2px}
.filters button {background:linear-gradient(135deg,#388cf7,#2774e8);border-radius:11px;min-height:50px;box-shadow:0 6px 14px rgba(31,70,130,.10)}
.filters button:hover,.tool-cta a:hover {filter:brightness(.96);text-decoration:none}
.card {border:1px solid #dfe7f3;border-radius:15px;box-shadow:0 8px 22px rgba(30,72,130,.07)}
.cards .card:nth-child(4n + 1) {background:#eaf4ff}
.cards .card:nth-child(4n + 2) {background:#fff6cf}
.cards .card:nth-child(4n + 3) {background:#ffe6e5}
.cards .card:nth-child(4n + 4) {background:#e9f8e9}
.card:hover {box-shadow:0 12px 26px rgba(30,72,130,.12);transform:translateY(-2px)}
.card {transition:transform .18s ease,box-shadow .18s ease}
.card-cat {color:#0b2f63}
.card h3 a {color:#0b2f63}
.empty {background:#fff;border-color:#d7e8fb;box-shadow:0 7px 22px rgba(30,72,130,.045);padding:34px 20px}
.principles {background:linear-gradient(135deg,#e9f9ee,#f4f9ff);border:1px solid #d7e8fb;border-radius:16px}
.answer {background:#eaf4ff}
.tool-cta {background:#fff6cf;border:1px solid #ebdda8}
.tool-cta a {background:#2f80ed;color:#fff}
footer {padding:20px max(24px,calc((100vw - 1080px)/2));color:#111}
footer a {color:#0b2f63;font-weight:700}
@media(max-width:940px) {
  .top {flex-direction:column;align-items:center;gap:12px}
  .top nav {justify-content:center}
}
@media(max-width:600px) {
  .top {padding:13px 12px;gap:10px}
  .brand-tile {width:27px;height:27px;font-size:16px;border-radius:6px}
  .brand-word {font-size:23px}
  .brand-tagline {font-size:10px;margin-left:6px;max-width:85px}
  .top nav {gap:3px}
  .top nav a {font-size:12px;padding:8px}
  .container {padding:0 12px}
  .hero {margin:17px 0 26px;padding:25px 21px;border-radius:15px}
  .hero h1 {font-size:31px}
  .hero p {font-size:15px}
  .filters {gap:12px}
  .filters label {flex:1 1 100%}
  .filters button {width:100%}
  .section {margin-bottom:28px}
  footer {padding:18px 14px}
}
@media(prefers-reduced-motion:reduce) {.card {transition:none}.card:hover {transform:none}}