:root { color-scheme: light; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #14182b; background: #f4f6fb; line-height: 1.65; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #3f41bf; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid #5557e8; outline-offset: 4px; border-radius: 3px; }
header { width: 100%; height: 68px; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 clamp(16px, 4vw, 48px); border-bottom: 2px solid #14182b; background: #fff; }
.brand { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 950; letter-spacing: .14em; color: #14182b; text-decoration: none; }
.brand-logo { width: 31px; height: 31px; flex: 0 0 31px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; transform: rotate(-3deg); }
.brand-logo i { border: 2px solid currentColor; background: #5557e8; }
.brand-logo i:nth-child(2), .brand-logo i:nth-child(3) { background: #dafa58; }
nav { display: flex; gap: 4px; }
nav a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 12px; border: 2px solid transparent; border-radius: 5px; color: #667085; font-size: .75rem; font-weight: 900; text-decoration: none; }
nav a[aria-current] { background: #dafa58; border-color: #14182b; color: #14182b; }
header nav { align-items: center; }
header nav a { justify-content: center; padding: 0 10px; border: 0; color: #14182b; font-size: .8rem; font-weight: 800; }
main { width: min(760px, calc(100% - 40px)); margin-inline: auto; padding: clamp(30px, 6vw, 56px) 0 48px; }
h1, h2, h3 { line-height: 1.15; overflow-wrap: anywhere; font-weight: 950; }
h1 { font-size: clamp(2.1rem, 7vw, 3.7rem); letter-spacing: -.055em; margin: 8px 0 18px; }
h2 { font-size: 1.4rem; letter-spacing: -.035em; }
h3 { font-size: 1.15rem; letter-spacing: -.025em; }
p { margin-block: 12px; }
section { margin-block: 40px; }
.eyebrow { font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #3f41bf; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 16px; }
.cards article, .question, .story { background: white; border: 2px solid #14182b; padding: clamp(18px, 4vw, 30px); box-shadow: 5px 5px 0 #dce0ec; }
.cards article { padding: 20px; display: flex; flex-direction: column; }
.cards h3 { margin: 6px 0 10px; font-size: 1.35rem; }
.cards h3 a { color: #14182b; text-decoration: none; }
.cards article > p:not(.eyebrow), main > p:not(.eyebrow) { color: #667085; }
.cards article > p:not(.eyebrow) { font-size: .88rem; line-height: 1.6; }
.cards article > a { margin-top: auto; padding-top: 12px; font-size: .78rem; font-weight: 900; }
.cards article .eyebrow { margin-top: 0; }
.question > h2 { font-size: clamp(1.4rem, 4vw, 2rem); letter-spacing: -.04em; }
.answer { padding: 12px 14px; border: 1px solid #cfd5e3; background: #f5f6ff; font-size: 1rem; }
.answer strong { font-weight: 900; }
blockquote { margin: 20px 0; padding: 12px 14px; border-left: 4px solid #dafa58; background: #f5f6ff; color: #4c5368; }
dl { display: grid; gap: 7px; }
dl > div { padding: 12px; border: 1px solid #cfd5e3; background: #f7f8fc; }
dt { font-size: .9rem; font-weight: 900; }
dd { margin: 4px 0 0; color: #667085; font-size: .88rem; }
aside { border: 2px solid #14182b; padding: clamp(18px, 4vw, 26px); margin-block: 24px; background: #fff; }
main > aside { box-shadow: 5px 5px 0 #5557e8; }
aside h2, aside h3 { margin-top: 0; }
.story aside { border: 0; border-left: 4px solid #dafa58; background: #f5f6ff; }
.correction { border: 1px solid #cfd5e3; border-left: 4px solid #5557e8; background: #f5f6ff; font-size: .88rem; }
.correction h3 { font-size: .95rem; }
.sources { color: #667085; font-size: .8rem; overflow-wrap: anywhere; }
.action, .secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 18px; margin: 8px 10px 4px 0; border: 2px solid #14182b; border-radius: 5px; box-shadow: 3px 3px 0 #14182b; color: #14182b; text-decoration: none; font-size: .85rem; font-weight: 950; line-height: 1.2; text-align: center; transition: transform 100ms ease, box-shadow 100ms ease; }
.action { background: #dafa58; }
.secondary { background: #fff; }
.action:active, .secondary:active { transform: translate(3px, 3px); box-shadow: none; }
.back { display: inline-flex; min-height: 44px; align-items: center; margin-bottom: 12px; font-size: .8rem; font-weight: 900; }
li { margin-block: 10px; }
footer { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; border-top: 1px solid #cfd5e3; padding: 24px 16px 40px; background: #fff; }
footer a { display: inline-flex; min-height: 44px; align-items: center; font-size: .72rem; font-weight: 850; color: #14182b; }
.skip { position: absolute; top: -100px; left: 16px; background: white; padding: 12px; }
.skip:focus { top: 8px; }
.word-search label { display: block; font-weight: 800; }
.word-search > div { display: flex; gap: 8px; margin: 8px 0; }
.word-search input { min-width: 0; flex: 1; padding: 12px; border: 2px solid #14182b; border-radius: 5px; font: inherit; }
.word-search button { padding: 10px 16px; border: 2px solid #14182b; border-radius: 5px; background: #dafa58; font: inherit; font-weight: 800; cursor: pointer; }
.word-alphabet { flex-wrap: wrap; margin: 20px 0; }
.word-alphabet a { min-width: 36px; justify-content: center; padding: 0 8px; }
.words-navigation { flex-wrap: wrap; margin: 12px 0 24px; border-bottom: 1px solid #cfd5e3; gap: 4px; }
.words-navigation a { padding-inline: 12px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; }
.words-navigation a[aria-current] { background: transparent; border-color: #5557e8; color: #14182b; }
.topic-links { flex-wrap: wrap; }
.topic-links a { background: #dafa58; color: #14182b; }
.social-slides { display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 400px); gap: 18px; overflow-x: auto; scroll-snap-type: x proximity; padding: 8px 8px 18px 0; list-style: none; }
.social-slides li { scroll-snap-align: start; margin: 0; padding: 28px; border: 2px solid #14182b; box-shadow: 5px 5px 0 #dce0ec; background: #fff; overflow-wrap: anywhere; }
.social-slides li:first-child { background: #dafa58; }
.social-slides li p { font-size: 1.15rem; font-weight: 750; line-height: 1.55; }
.social-slides:focus-visible, summary:focus-visible { outline: 3px solid #5557e8; outline-offset: 4px; }
summary { cursor: pointer; padding-block: 12px; font-weight: 800; }
iframe[name="wordsmith"] { display: block; width: 100%; height: 180px; margin-top: 16px; border: 1px solid #cfd5e3; background: #fff; }
.wordsmith-widget { padding: 20px; background: #fff; }
@media (hover: hover) { .action:hover, .secondary:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #14182b; } .cards h3 a:hover { color: #3f41bf; text-decoration: underline; } nav a:not([aria-current]):hover { color: #14182b; background: #f4f6fb; } }
@media (max-width: 880px) { header { height: auto; min-height: 62px; padding: 8px 12px 0; flex-wrap: wrap; gap: 4px 12px; } header nav { width: 100%; flex-wrap: wrap; justify-content: space-between; border-top: 1px solid #cfd5e3; } header nav a { flex: 1; padding-inline: 4px; } }
@media (max-width: 700px) { main { width: calc(100% - 32px); } .action, .secondary { width: 100%; margin-right: 0; } }
@media (max-width: 320px) { header { gap: 4px 6px; padding: 8px 8px 0; } .brand-wordmark { display: none; } }
@media (prefers-reduced-motion: reduce) { .brand-logo { transform: none; } .action, .secondary { transition: none; } }