:root { --blue:#183d70; --blue-hover:#102d55; --yellow:#ffcf36; --ink:#25364a; --muted:#5d6978; --line:#dce3ec; --paper:#fff; --wash:#f1f5fa; --warm:#fff7d7; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.75 Arial,Helvetica,sans-serif; }
a { color:var(--blue); text-underline-offset:4px; }
a:hover { color:var(--blue-hover); text-decoration-thickness:2px; }
a:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
.skip-link { position:absolute; top:-100px; left:16px; background:var(--paper); padding:12px; z-index:5; }
.skip-link:focus { top:12px; }
.header-inner,.page-shell,.footer-inner { max-width:1240px; margin:auto; padding-left:40px; padding-right:40px; }
.site-header { background:var(--blue); border-bottom:5px solid var(--yellow); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:110px; }
.wordmark { display:block; line-height:0; }
.wordmark img { width:260px; max-width:100%; height:auto; }
.site-header a:focus-visible { outline-color:var(--yellow); }
.header-inner nav { display:flex; gap:28px; align-items:center; }
.header-inner nav a { color:var(--paper); white-space:nowrap; text-decoration:none; font-size:14px; }
.header-inner nav a:last-child { background:var(--yellow); color:var(--blue-hover); border-radius:4px; padding:9px 16px; font-weight:bold; }
.header-inner nav a:hover { text-decoration:underline; }
.page-shell { padding-top:40px; padding-bottom:64px; min-height:68vh; }
h1,h2,h3 { line-height:1.18; letter-spacing:-0.035em; margin:0; }
h1 { font-size:clamp(34px,4vw,50px); margin-bottom:28px; overflow-wrap:anywhere; }
h2 { font-size:30px; }
h3 { font-size:22px; }
p { margin:0 0 20px; }
.toy-intro { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr); gap:64px; align-items:center; padding:16px 0 48px; }
.eyebrow { font-size:12px; font-weight:bold; text-transform:uppercase; letter-spacing:0.09em; color:var(--blue); margin-bottom:18px; }
.toy-intro h1 { font-size:clamp(44px,5vw,64px); letter-spacing:-0.055em; line-height:1.04; }
.intro-text { font-size:18px; color:var(--muted); max-width:580px; }
.browse-button { display:inline-flex; gap:28px; background:var(--blue); color:var(--paper); border-radius:4px; padding:12px 20px; text-decoration:none; font-size:14px; font-weight:bold; margin-top:10px; }
.browse-button:hover { background:var(--blue-hover); color:var(--paper); }
.characters { margin:0; min-height:290px; position:relative; display:flex; justify-content:center; align-items:center; gap:32px; }
.characters img { display:block; width:auto; max-width:42%; height:250px; object-fit:contain; }
.characters img:last-child { margin-top:28px; }
.featured-section { border-top:1px solid var(--line); padding-top:32px; margin-bottom:48px; }
.section-title { display:flex; gap:24px; justify-content:space-between; align-items:baseline; margin-bottom:28px; }
.section-title > a { font-size:14px; white-space:nowrap; }
.section-title > p { margin:0; font-size:14px; color:var(--muted); }
.feature-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.feature-tile { display:flex; flex-direction:column; gap:14px; background:var(--wash); border-top:4px solid var(--yellow); padding:22px; text-decoration:none; color:var(--ink); border-radius:4px; }
.feature-tile p { color:var(--muted); font-size:14px; line-height:1.7; margin:0; }
.feature-tile > span { margin-top:auto; align-self:flex-end; color:var(--blue); font-size:22px; }
.feature-tile:hover h3 { text-decoration:underline; text-underline-offset:5px; }
.browse-section { border-top:1px solid var(--line); padding-top:32px; }
.directory { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; margin-top:28px; }
.category-group h3 { font-size:17px; margin-bottom:16px; }
.category-group ul { list-style:none; padding:0; margin:0; }
.category-group li { border-top:1px solid var(--line); }
.category-group a { display:block; padding:6px 0; font-size:14px; text-decoration:none; overflow-wrap:anywhere; }
.category-group a:hover { text-decoration:underline; }
.category-group a[aria-current] { color:var(--ink); font-weight:bold; text-decoration:underline; }
.update-note { display:flex; gap:24px; align-items:baseline; background:var(--warm); border-left:4px solid var(--yellow); padding:24px; margin-top:44px; font-size:14px; }
.update-note > strong { white-space:nowrap; }
.update-note p { color:var(--muted); margin:0; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:12px; font-size:13px; color:var(--muted); margin-bottom:32px; }
.breadcrumbs a { white-space:nowrap; }
.article-layout { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:72px; align-items:start; }
main { min-width:0; }
.category-copy { font-size:18px; line-height:1.85; }
.category-copy p { margin-top:20px; }
.category-copy a { overflow-wrap:anywhere; }
.lead { font-size:18px; color:var(--muted); max-width:760px; }
aside { border-left:1px solid var(--line); padding-left:28px; }
aside h2 { font-size:21px; }
aside .directory { display:block; margin-top:24px; }
aside .category-group { margin-top:24px; }
aside .category-group h3 { font-size:14px; }
aside .category-group li { border:none; }
aside .category-group a { padding:3px 0; font-size:14px; }
.related-section,.subcategories { border-top:1px solid var(--line); padding-top:28px; margin-top:40px; }
.related-section h2,.subcategories h2 { font-size:25px; margin-bottom:22px; }
.subcategories ul { margin:0; padding-left:20px; }
.reading-row { display:grid; grid-template-columns:minmax(0,1fr) 24px; gap:10px 24px; border-bottom:1px solid var(--line); padding:20px 0; text-decoration:none; color:var(--ink); }
.reading-row:first-child { padding-top:0; }
.reading-row h3 { font-size:20px; }
.reading-row p { color:var(--muted); font-size:14px; grid-column:1; margin:0; }
.reading-row > span { grid-column:2; grid-row:1; color:var(--blue); font-size:22px; line-height:1; }
.reading-row:hover h3 { text-decoration:underline; text-underline-offset:5px; }
.back-link { font-size:14px; margin-top:24px; }
.site-footer { background:var(--wash); border-top:1px solid var(--line); }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:32px; padding-bottom:32px; }
.footer-brand { font-size:23px; font-weight:bold; color:var(--ink); text-decoration:none; letter-spacing:-0.7px; }
.footer-inner p { margin:4px 0 0; font-size:13px; color:var(--muted); }
.footer-inner > a { font-size:14px; }
@media (max-width:950px) {
  .toy-intro { gap:32px; }
  .characters { gap:16px; }
  .characters img { height:220px; }
  .feature-grid,.directory { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .article-layout { grid-template-columns:minmax(0,1fr) 210px; gap:36px; }
  aside { padding-left:20px; }
  .section-title { flex-direction:column; gap:12px; }
}
@media (max-width:700px) {
  .header-inner,.page-shell,.footer-inner { padding-left:24px; padding-right:24px; }
  .header-inner { flex-direction:column; align-items:flex-start; justify-content:center; gap:18px; padding-top:20px; padding-bottom:20px; }
  .wordmark img { width:240px; }
  .header-inner nav { gap:24px; }
  .page-shell { padding-top:28px; padding-bottom:40px; }
  .toy-intro { grid-template-columns:minmax(0,1fr); padding-top:0; padding-bottom:28px; gap:24px; }
  .toy-intro h1 { font-size:48px; }
  .intro-text,.category-copy { font-size:17px; }
  .characters { min-height:240px; max-width:340px; width:100%; margin:auto; gap:28px; }
  .characters img { height:210px; }
  .feature-grid { gap:16px; }
  .feature-tile { padding:20px; }
  .feature-tile h3 { overflow-wrap:anywhere; }
  .article-layout { display:block; }
  aside { border-left:0; border-top:1px solid var(--line); padding:28px 0 0; margin-top:40px; }
  aside .category-group ul { columns:2; column-gap:20px; }
  aside .category-group li { break-inside:avoid; }
  .directory { gap:32px 24px; }
  .update-note,.footer-inner { flex-direction:column; align-items:flex-start; gap:12px; }
}
@media (max-width:420px) {
  .feature-grid,.directory { grid-template-columns:minmax(0,1fr); }
  .toy-intro h1 { font-size:43px; }
}
@media (max-width:360px) {
  .header-inner,.page-shell,.footer-inner { padding-left:20px; padding-right:20px; }
  .wordmark img { width:230px; }
  .toy-intro h1 { font-size:39px; }
  aside .category-group ul { columns:1; }
}