/* The original directory, using Meet Cluzy's shared palette and typography. */
.directory-hero { padding-top:44px; padding-bottom:48px; }
.directory-hero h1 em { color:var(--blue); font-style:normal; }
.directory-hero .hero-eycon img { width:240px; height:240px; object-fit:contain; }
.directory-series { padding-top:48px; }
.directory-series-grid,.directory-related { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.directory-series-grid article { padding:28px; border-top:4px solid var(--blue); background:var(--soft); border-radius:0 0 14px 14px; }
.directory-series-grid article > span { display:block; color:var(--blue); font-weight:900; font-size:2rem; }
.directory-series-grid small { display:block; margin:10px 0 16px; font-size:.875rem; font-weight:800; }
.directory-series-grid h3 { font-size:1.8rem; }
.directory-series-grid p { margin-bottom:0; color:var(--muted); }
.directory-controls { max-width:820px; margin-bottom:40px; }
.directory-controls label { display:block; font-weight:850; margin-bottom:8px; }
.directory-search-row { display:flex; gap:12px; }
.directory-search-row input { width:100%; min-width:0; min-height:54px; padding:12px 16px; border:2px solid var(--ink); border-radius:10px; font:inherit; background:var(--paper); }
.directory-filters { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:14px; }
.directory-controls button,.directory-empty button,.directory-share button,.directory-share a { min-height:44px; padding:9px 16px; border:2px solid var(--blue); border-radius:8px; font:inherit; font-weight:800; color:var(--blue-dark); background:var(--paper); cursor:pointer; text-decoration:none; }
.directory-filters button[aria-pressed="true"] { background:var(--blue); color:white; }
.directory-filters p { margin:0 0 0 auto; color:var(--muted); font-weight:750; }
.directory-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.directory-card { display:flex; flex-direction:column; padding:24px; border:2px solid var(--line); border-radius:18px; color:var(--ink); background:var(--paper); text-decoration:none; }
.directory-card:hover,.directory-card:target { border-color:var(--blue); box-shadow:5px 5px 0 var(--line); }
.directory-meta { display:flex; justify-content:space-between; color:var(--blue-dark); font-size:.875rem; letter-spacing:.06em; }
.directory-card img { width:180px; height:180px; object-fit:contain; margin:22px auto; }
.directory-card h3 { font-size:1.8rem; }
.directory-card p { color:var(--muted); }
.directory-card p b { color:var(--ink); }
.directory-card > strong { margin-top:auto; padding-top:14px; color:var(--blue-dark); text-decoration:underline; text-underline-offset:4px; }
.directory-empty { padding:30px; border:2px solid var(--line); border-radius:18px; background:white; }
.directory-empty img { margin-bottom:22px; }
.directory-empty h3 { font-size:1.7rem; }
.directory-ideas { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,80px); }
.directory-ideas h2 { font-size:clamp(2.3rem,4vw,4rem); }
.directory-ideas aside { padding:24px; margin-top:28px; border:1px solid #7b86b5; border-radius:14px; }
.directory-ideas aside > b { color:var(--yellow); }
.directory-ideas small { font-size:.875rem; }
.directory-ideas form { display:grid; gap:18px; }
.directory-ideas label { display:grid; gap:7px; font-weight:750; }
.directory-ideas label small { font-weight:400; }
.directory-ideas input,.directory-ideas textarea,.directory-ideas select { width:100%; min-width:0; padding:12px 14px; border:1px solid var(--line); border-radius:8px; font:inherit; color:var(--ink); background:var(--paper); }
.directory-ideas textarea { resize:vertical; }
.directory-ideas button { cursor:pointer; font:inherit; font-weight:850; }
.directory-ideas [data-idea-note] { margin:0; font-size:.875rem; }
.directory-detail { max-width:var(--max); margin:auto; padding:40px 24px 70px; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:32px 64px; }
.directory-issue { grid-column:1/-1; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding-bottom:20px; color:var(--blue-dark); font-weight:800; font-size:.875rem; }
.directory-art { align-self:start; padding:clamp(28px,5vw,64px); background:var(--soft); border:2px solid var(--line); border-radius:22px; }
.directory-art img { width:100%; height:auto; aspect-ratio:1; object-fit:contain; }
.directory-copy h1 { font-size:clamp(2.7rem,5vw,4.8rem); }
.directory-copy p { font-size:1.1rem; }
.directory-copy .directory-lead { font-size:1.5rem; font-weight:800; line-height:1.4; }
.directory-copy dl { margin:28px 0; }
.directory-copy dl > div { border-top:1px solid var(--line); padding:18px 0; }
.directory-copy dt { font-weight:850; color:var(--blue-dark); }
.directory-copy dd { margin:6px 0 0; }
.directory-share { border-top:3px solid var(--blue); padding-top:24px; }
.directory-share > strong { display:block; font-size:1.4rem; }
.directory-share nav { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.directory-share [data-share-status] { font-size:1rem; overflow-wrap:anywhere; }
.directory-related a { display:flex; flex-direction:column; gap:12px; padding:24px; background:white; border:1px solid var(--line); border-radius:12px; text-decoration:none; }
.directory-related b { color:var(--blue-dark); font-size:1.3rem; }
.directory-related a:hover { border-color:var(--blue); }
[data-directory-entry][hidden],[data-directory-empty][hidden],[data-directory-clear][hidden] { display:none; }
@media(max-width:980px) { .directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .directory-hero { grid-template-columns:minmax(0,1fr) 220px; gap:30px; } .directory-detail { gap:28px; } }
@media(max-width:700px) { .directory-series-grid,.directory-related,.directory-ideas,.directory-detail,.directory-hero { grid-template-columns:1fr; } .directory-hero .hero-eycon { max-width:300px; } .directory-detail { padding-bottom:44px; } .directory-art { max-width:400px; width:100%; margin:auto; } .directory-issue { grid-column:auto; } }
@media(max-width:520px) { .directory-grid { grid-template-columns:1fr; } .directory-filters p { width:100%; margin:4px 0 0; } .directory-card img { width:160px; height:160px; } }

/* Data-literacy navigation and reading views. */
.learning-intro { padding-top:48px; padding-bottom:36px; }
.learning-intro h1 { font-size:clamp(2.7rem,6vw,4.8rem); }
.learning-intro p { max-width:790px; font-size:1.125rem; }
.learning-hint { color:var(--muted); font-size:1rem; }
.directory-card { scroll-margin-top:130px; }
.directory-meta { gap:12px; letter-spacing:0; }
.directory-meta span:last-child { white-space:nowrap; }
.directory-card h3 { font-size:1.65rem; line-height:1.2; }
.learning-category { display:grid; grid-template-columns:180px minmax(0,1fr); gap:40px; align-items:center; padding-bottom:30px; }
.learning-category img { background:var(--soft); padding:20px; border-radius:18px; }
.learning-category h1 { font-size:clamp(2.3rem,5vw,4rem); }
.learning-category p { max-width:720px; font-size:1.125rem; }
.factoid-section { padding-top:0; padding-bottom:32px; }
.factoid-list { max-width:850px; margin:auto; display:grid; gap:20px; }
.factoid-tile { background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--blue); border-radius:0 0 14px 14px; padding:28px; scroll-margin-top:130px; }
.factoid-number { color:var(--muted); font-size:.875rem; font-weight:700; }
.factoid-tile h2 { font-size:clamp(1.4rem,3vw,1.8rem); line-height:1.25; margin:12px 0; }
.factoid-tile p { font-size:1.125rem; margin:12px 0 0; }
.eyecon-background { max-width:898px; padding-top:0; padding-bottom:32px; }
.eyecon-background details { margin-bottom:28px; }
.eyecon-background summary { cursor:pointer; padding:14px 0; font-weight:700; }
.learning-next { display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; padding-top:0; }
.learning-next a { min-height:44px; display:inline-flex; align-items:center; }
.featured-factoids { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.featured-factoid { display:flex; flex-direction:column; align-items:flex-start; }
.featured-factoid img { margin-bottom:20px; }
.featured-factoid h3 { font-size:1.5rem; line-height:1.25; margin:12px 0 0; }
.featured-factoid a { color:var(--blue-dark); font-weight:750; margin-top:auto; padding-top:24px; min-height:44px; }
@media(max-width:600px) { .learning-category { grid-template-columns:1fr; gap:20px; } .learning-category img { width:120px; height:120px; } .featured-factoids { grid-template-columns:1fr; } .factoid-tile { padding:22px; } }

/* Each factoid carries its own visual identity and reading context. */
.factoid-identity { display:flex; align-items:center; gap:20px; margin-bottom:24px; }
.factoid-identity img { width:80px; height:80px; flex:0 0 80px; object-fit:contain; }
.factoid-identity .eyebrow { display:block; font-size:.875rem; letter-spacing:.04em; }
.factoid-category { display:block; color:var(--muted); font-size:.875rem; margin-top:4px; }
@media(max-width:380px) { .factoid-identity { gap:14px; } .factoid-identity img { width:64px; height:64px; flex-basis:64px; } }