/* Readable type, bounded photography and content-driven section sizing. */
:root { --content-width: 1280px; --header-width: 1440px; --page-gutter: clamp(18px, 3vw, 48px); }
body { font-size: 16px; line-height: 1.6; }
.category-depth { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 32px; margin: 32px 0; padding: 28px; border: 1px solid var(--line); }
.category-depth h2 { font-size: 28px; line-height: 1.2; margin: 0 0 18px; }
.category-depth p, .category-depth summary { font-size: 16px; line-height: 1.7; }
.category-depth summary { cursor: pointer; font-weight: 700; }
@media (max-width:780px) { .category-depth { grid-template-columns: minmax(0,1fr); padding: 20px; gap: 20px; } }
.shell > *, .guide-content, .prose-grid > *, .platform-detail > *, .ecosystem-row > * { min-width: 0; }
.hero { height: auto; min-height: 0; padding: 150px 0 64px; }
.hero-content { padding-top: 0; }
.hero-photo { z-index: 0; }
.hero-shade { z-index: 1; }
.hero-grid, .hero-orb, .hero::after { display: none; }
.hero-content > .eyebrow { font-size: 12px; line-height: 1.5; }
.page-hero--visual > img, .page-hero--directory > img, .creator-page-hero > img { z-index: 0; }
.page-hero-shade, .directory-hero-shade, .creator-hero-shade { z-index: 1; }
.page-hero .shell, .creator-hero-content { position: relative; z-index: 2; }
.page-hero .shell > .eyebrow { font-size: 12px; line-height: 1.5; }
.page-hero--visual::after, .page-hero--directory::after, .creator-page-hero::after { z-index: 1; pointer-events: none; }
.hero h1 { font-size: clamp(48px, 6.4vw, 88px); line-height: .98; letter-spacing: -.055em; }
.hero-content > p { max-width: 65ch; font-size: 17px; }
.hero-stats { margin-top: 36px; }
.hero-stats dd, .creator-hero-stats dd { font-size: 12px; letter-spacing: .06em; }
.page-hero, .creator-page-hero { min-height: 0; padding: 140px 0 64px; }
.page-hero--visual, .page-hero--directory, .guide-hub-hero, .guide-page-hero, .creator-page-hero { min-height: 0; align-items: center; }
.page-hero h1, .creator-page-hero h1 { max-width: 22ch; font-size: clamp(36px, 4.5vw, 64px); line-height: 1.06; letter-spacing: -.045em; }
.page-hero .shell > p, .creator-page-hero .creator-hero-content > p { max-width: 67ch; font-size: 17px; }
.breadcrumb { flex-wrap: wrap; margin-bottom: 24px; font-size: 12px; line-height: 1.5; letter-spacing: .04em; }
.creator-hero-stats { margin-top: 32px; flex-wrap: wrap; gap: 18px 0; }
.section { padding-block: clamp(48px, 5vw, 76px); }
.section-heading { gap: 24px; margin-bottom: 32px; }
.section-heading h2, .prose-grid h2, .guide-content-section h2 { font-size: clamp(28px, 3vw, 42px); line-height: 1.15; letter-spacing: -.035em; }
.section-heading p, .directory-card p, .feature-card p, .visual-discovery-card p, .creator-card p, .prose-grid p, .guide-related-grid p, .guide-highlight-grid p, .guide-principles p { font-size: 16px; line-height: 1.7; }
.section-kicker, .eyebrow, .guide-hero-meta, .guide-card__meta, .guide-card > p:not(.guide-card__description), .guide-card > strong, .guide-related-grid a > span, .guide-related-grid strong, .feature-card > span, .feature-card strong { font-size: 12px; letter-spacing: .06em; }
.category-tabs :is(button,a), .directory-pagination span, .footer-links a { font-size: 12px; line-height: 1.5; }
.site-header nav { font-size: 12px; gap: 18px; }
.directory-card { min-height: 0; padding: 24px; }
.directory-card h3 { margin-top: 0; font-size: 24px; line-height: 1.2; }
.card-category, .card-tag { font-size: 12px; letter-spacing: .03em; }
.directory-story { align-items: start; gap: clamp(24px,4vw,52px); }
.directory-story figure, .directory-story--reverse figure { aspect-ratio: 16 / 10; max-height: 360px; overflow: hidden; }
.directory-story img { display: block; width: 100%; height: 100%; object-fit: cover; }
.visual-story-grid figure { min-height: 0; aspect-ratio: 16 / 10; max-height: 380px; }
.visual-story-grid figcaption { font-size: 13px; letter-spacing: .04em; }
.visual-discovery-card { min-height: 0; }
.visual-discovery-card figure { height: auto; aspect-ratio: 16 / 10; }
.visual-discovery-card h3 { margin-top: 20px; font-size: 28px; line-height: 1.15; }
.visual-atlas-card { min-height: 280px; }
.visual-atlas-card h3 { font-size: clamp(25px,2.4vw,34px); line-height: 1.12; }
.ecosystem-row { grid-template-columns: 35px 60px minmax(160px,.8fr) minmax(0,1.5fr); gap: 22px; }
.ecosystem-row > :last-child { grid-column: 4; }
.ecosystem-row p, .platform-detail p { font-size: 16px; line-height: 1.7; }
.platform-detail { gap: 24px; }
.platform-meta { min-width: 0; }
.universe-card h2 { font-size: 27px; line-height: 1.2; }
.universe-card div .universe-description, .universe-card .universe-discovery p { font-size: 16px; line-height: 1.7; }
.universe-card div p:not(.universe-description), .universe-card > strong { font-size: 12px; }
.universe-card .universe-discovery p { text-transform: none; letter-spacing: 0; }
.guide-layout { grid-template-columns: 220px minmax(0,1fr); gap: 40px; }
.guide-toc { padding: 20px; }
.guide-toc > p { font-size: 12px; }
.guide-toc a { font-size: 14px; line-height: 1.5; }
.guide-content-section { max-width: 76ch; padding-bottom: 40px; }
.guide-content-section + .guide-content-section { padding-top: 40px; }
.guide-checklist li, .guide-steps span, .guide-sources span, .guide-faq-list details > p { font-size: 16px; }
.guide-table thead th, .comparison-table thead th { font-size: 12px; letter-spacing: .04em; }
.guide-table td, .guide-table tbody th, .comparison-table td { font-size: 15px; line-height: 1.6; }
.guide-table :is(th,td), .comparison-table :is(th,td) { padding: 16px; }
.guide-steps li { grid-template-columns: 30px minmax(100px,.6fr) minmax(0,1.4fr); gap: 16px; }
.guide-grid, .guide-related-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.guide-card { min-height: 0; }
.guide-card h3 { font-size: 28px; line-height: 1.16; margin-top: 22px; }
.guide-card .guide-card__description { font-size: 16px; line-height: 1.65; }
.guide-card__image { height: 190px; }
.guide-related-grid h3 { font-size: 25px; line-height: 1.2; margin-top: 18px; }
.guide-related-grid a { min-height: 0; }
.guide-hero-meta { flex-wrap: wrap; gap: 12px 20px; line-height: 1.6; }
.guide-hero-meta span { font-size: 12px; letter-spacing: .04em; }
.guide-answer-section h2 { font-size: clamp(28px,3vw,42px); line-height: 1.15; }
.guide-answer { font-size: clamp(18px,1.6vw,22px); line-height: 1.65; }
.universe-card div .universe-discovery p { font-size: 16px; }
.creator-body p { font-size: 16px; line-height: 1.7; }
.creator-body > strong, .creator-cta, .creator-filter-group > p, .partner-label, .partner-cta { font-size: 12px; letter-spacing: .04em; }
.resource-paths article { min-height: 0; }
.resource-paths p, .category-insights p, .category-insights li { font-size: 16px; line-height: 1.7; }
.guide-faq-list summary { min-height: 64px; font-size: 18px; line-height: 1.45; }
.photo-credit { display: block; margin: 10px 0 0; color: #62666e; font-size: 12px; line-height: 1.5; }
.photo-credit a { text-decoration: underline; }
@media (max-width:1100px) {
  .header-inner { grid-template-columns: 1fr auto auto; gap: 16px; }
  .guide-grid, .guide-related-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ecosystem-row { grid-template-columns: 30px 54px minmax(0,1fr); }
  .ecosystem-row p, .ecosystem-row > :last-child { grid-column: 3; }
}
@media (max-width:1000px) {
  .guide-layout { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .guide-toc { position: static; }
}
@media (max-width:780px) {
  .hero, .page-hero, .creator-page-hero { min-height: 0; height: auto; padding: 112px 0 44px; }
  .hero h1 { font-size: clamp(42px,11vw,68px); }
  .page-hero h1, .creator-page-hero h1 { font-size: clamp(34px,8.8vw,48px); }
  .hero-content > p, .page-hero .shell > p { font-size: 16px; }
  .section-heading { align-items: start; }
  .prose-grid, .directory-story, .directory-story--reverse { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .directory-story figure { width: 100%; max-height: 300px; }
  .guide-grid, .guide-related-grid { grid-template-columns: minmax(0,1fr); }
  .guide-card { min-height: 0; }
  .guide-card__image { height: 190px; }
  .guide-steps li { grid-template-columns: 28px minmax(0,1fr); }
  .guide-steps span { grid-column: 2; }
  .guide-faq-list details > p { margin-right: 0; }
  .creator-hero-stats div { min-width: 0; margin-right: 16px; padding-right: 16px; }
  .creator-hero-stats dd { max-width: 14ch; }
  .ecosystem-row { gap: 14px; }
  .visual-story-grid--three { grid-template-columns: minmax(0,1fr); }
}