/* Approved mixed-media direction. The three creator cards retain the original
   artwork byte-for-byte; SVG viewports provide independent responsive links. */
:root { --paper:#faf7ef; --line:#e0dacf; }
.mixed-hero { grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); gap:38px; padding:44px 0 36px; }
.mixed-hero h1 { font-size:clamp(52px,6.3vw,92px); line-height:.99; max-width:9ch; }
.mixed-hero .hero-description { max-width:30ch; font-size:clamp(16px,1.5vw,20px); margin-top:25px; }
.mixed-hero .drawn-hero-actions { gap:22px; padding:0; }
.mixed-hero-art { position:static; width:100%; max-width:none; padding:0; margin:0; border-radius:var(--media-radius-large); overflow:hidden; }
.mixed-hero-art > picture img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; transform:none!important; }
.mixed-hero .drawn-text-button svg { color:var(--ink); }
.illustrated-paths { display:block; padding:24px 0 36px; margin:0 0 32px; border-bottom:0; }
.creator-paths-heading { display:flex; justify-content:space-between; gap:20px; align-items:center; margin:0 0 20px; }
.creator-paths-heading h2 { margin:0; font-size:16px; font-weight:550; letter-spacing:-.02em; }
.creator-paths-heading p { color:var(--muted); font-size:12px; margin:0; }
.creator-art-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.creator-art-card { position:relative; display:block; width:100%; min-width:0; margin:0; padding:0; overflow:hidden; border:0; border-radius:var(--media-radius-large); background:#eee5f4; text-align:left; color:var(--ink); cursor:pointer; transition:transform .2s ease,box-shadow .2s ease; }
.creator-art-card:nth-child(2) { background:#eaf0df; }
.creator-art-card:nth-child(3) { background:#fbf0d8; }
.creator-card-visual { display:block; width:100%; height:auto; aspect-ratio:425/340; overflow:hidden; }
.creator-art-card:focus-visible { outline:3px solid var(--focus); outline-offset:5px; }
.creator-card-details { position:relative; display:flex; flex-direction:column; gap:14px; padding:20px 22px 25px; min-height:150px; }
.creator-card-details > span:first-child { font-size:14px; line-height:1.55; padding-right:10px; }
.creator-card-details small { font-size:11px; color:var(--muted); margin-top:auto; padding-right:26px; }
.creator-card-next { position:absolute; bottom:24px; right:22px; }
.creator-start-grid { margin-bottom:26px; }
.compact-paths { padding:20px 0 22px; margin-bottom:14px; }
.compact-paths .creator-art-grid { max-width:1080px; gap:16px; }
.compact-paths .creator-paths-heading { max-width:1080px; }
.category-icon { display:block; flex:0 0 auto; width:30px; height:30px; object-fit:contain; pointer-events:none; }
.category-rail.chips { gap:20px; flex-wrap:nowrap; }
.category-link { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:9px 1px 7px; min-height:76px; font-size:11px; }
.category-link .category-icon { width:32px; height:32px; transition:transform .16s ease; }
.category-link.active { color:var(--ink); border-bottom-color:var(--blue); }
.all-categories { gap:7px; }
.all-categories .category-icon { width:28px; height:28px; }
.category-directory button { display:flex; align-items:center; gap:12px; padding:8px; min-height:52px; }
.category-directory button > span { flex:1; }
.category-directory .category-icon { width:34px; height:34px; }
.category-selection .category-icon { width:25px; height:25px; }
.project-category { display:inline-flex; gap:6px; align-items:center; }
.project-category .category-icon { width:24px; height:24px; }
.field label:has(#category-field-icon) { display:flex; align-items:center; gap:9px; min-height:32px; }
#category-field-icon .category-icon { width:28px; height:28px; }
.mixed-art { object-fit:contain; }
.empty-state:has(.empty-state-art) { background:#f6f2e9; border:1px solid var(--line); padding:28px 24px 38px; border-radius:var(--media-radius); }
.empty-state-art { display:block; width:190px; height:175px; margin:0 auto 15px; }
.mixed-studio { max-width:1080px; }
.mixed-ai-entry { display:grid; grid-template-columns:75px 1fr; align-items:center; gap:6px 14px; background:#eee8f5; border-radius:14px; padding:16px; }
.mixed-ai-entry .ai-entry-art { width:75px; height:75px; grid-row:1/3; }
.mixed-ai-entry .btn { justify-self:start; background:var(--blue); color:#fff; border:0; }
.mixed-ai-entry small { grid-column:2; line-height:1.4; }
.mixed-private-note { display:flex; align-items:center; gap:15px; background:#edf0e2; border:0; border-radius:12px; }
.privacy-art { width:65px; height:65px; flex:0 0 auto; }
@media (hover:hover) and (pointer:fine) {
  .creator-art-card:hover { transform:translateY(-4px); box-shadow:0 9px 24px #2a201914; }
  .category-link:hover .category-icon { transform:rotate(-6deg) translateY(-2px); }
}
@media (max-width:1050px) and (min-width:601px) {
  .mixed-hero { grid-template-columns:1fr 1.15fr; gap:24px; padding-top:32px; }
  .mixed-hero h1 { font-size:clamp(40px,6vw,64px); }
  .mixed-hero .hero-description { font-size:16px; }
  .mixed-hero .drawn-hero-actions { gap:12px; }
  .creator-art-grid { gap:14px; }
  .creator-art-card { border-radius:var(--media-radius-small); }
  .creator-card-details { padding:16px; min-height:175px; }
}
@media (max-width:760px) {
  .illustrated-paths .btn { margin-top:0; }
  .creator-paths-heading { display:block; margin-bottom:17px; }
  .creator-paths-heading p { margin-top:7px; }
  .creator-card-details > span:first-child { font-size:13px; }
}
@media (max-width:600px) {
  .mixed-hero { display:flex; flex-direction:column; align-items:stretch; gap:24px; padding:30px 0 27px; }
  .mixed-hero h1 { font-size:clamp(42px,12.2vw,66px); line-height:1; max-width:9ch; }
  .mixed-hero .hero-description { font-size:16px; max-width:30ch; margin-top:19px; }
  .mixed-hero .drawn-hero-actions { flex-direction:row; align-items:center; padding:0; gap:20px; margin-top:22px; }
  .mixed-hero-art { position:static; width:100%; height:auto; border-radius:14px; }
  .mixed-hero-art > picture img { width:100%; height:auto; transform:none; }
  .creator-art-grid,.compact-paths .creator-art-grid { grid-template-columns:1fr; gap:16px; }
  .creator-art-card { border-radius:var(--media-radius); }
  .illustrated-paths { padding:22px 0 10px; margin-bottom:26px; }
  .creator-paths-heading h2 { font-size:17px; }
  .creator-card-details { min-height:0; padding:16px 20px 22px; }
  .creator-card-details small { margin-top:0; }
  .category-navigation { gap:8px; }
  .category-rail.chips { gap:20px; }
  .category-link { font-size:10px; min-height:69px; }
  .category-link .category-icon { width:29px; height:29px; }
  .all-categories { flex-direction:column; gap:2px; font-size:9px; min-height:63px; padding-left:10px; }
  .all-categories > svg { display:none; }
  .all-categories .category-icon { width:27px; height:27px; }
  .category-directory { gap:22px; }
  .category-selection { gap:12px; align-items:flex-start; }
  .category-selection > span { padding-top:13px; font-size:11px; }
  .empty-state-art { width:160px; height:150px; }
  .mixed-ai-entry { grid-template-columns:55px 1fr; gap:6px 10px; padding:13px; }
  .mixed-ai-entry .ai-entry-art { width:55px; height:65px; }
  .mixed-ai-entry .btn { font-size:12px; padding:10px; }
  .mixed-ai-entry small { font-size:10px; }
  .mixed-private-note { gap:10px; }
  .privacy-art { width:48px; height:56px; }
}
@media(prefers-reduced-motion:reduce) {
  .creator-art-card,.category-link .category-icon { transition:none!important; transform:none!important; }
}
@media(max-width:400px) {
  .header-actions .new-idea { width:36px; padding:0; font-size:0; gap:0; justify-content:center; }
  .header-actions .new-idea svg { width:18px; height:18px; }
  .header-inner { gap:8px; }
}

/* Direction 2: a few substantial editorial moments in the discovery journey. */
.mixed-discovery-hero { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:20px; padding:0; margin:34px 0 42px; border-radius:22px; overflow:hidden; }
.mixed-discovery-copy { padding:38px 0 38px 40px; }
.mixed-discovery-hero h1 { font-size:clamp(44px,5.1vw,72px); line-height:1.04; letter-spacing:-.045em; max-width:11ch; margin:18px 0 22px; }
.mixed-discovery-hero p:not(.eyebrow) { max-width:38ch; font-size:16px; line-height:1.6; }
.mixed-discovery-hero .eyebrow { font-size:10px; letter-spacing:.1em; color:var(--ink); }
.mixed-discovery-art { margin:0; min-width:0; }
.mixed-discovery-art img { display:block; width:100%; height:auto; object-fit:contain; }
.mixed-build-hero { background:#f1d8d0; }
.mixed-build-hero .mixed-discovery-art { padding:26px 28px 26px 0; }
.mixed-build-hero .mixed-discovery-art img { border-radius:50% 50% 12px 12px; aspect-ratio:1/1; object-fit:cover; }
.mixed-back-hero { background:#f5dd56; }
.mixed-back-hero .mixed-discovery-art img { height:360px; padding:12px 24px; }
.mixed-back-hero .back-demo-note { display:inline-flex; color:var(--ink); background:#fff8cc; border:1px solid #3b351a28; margin-top:20px; }
body[data-route="explore"] .feature-banner.mixed-feature-banner { background:#f4dc55; display:grid; grid-template-columns:1fr 190px 1fr; gap:22px; border-radius:var(--media-radius); }
.mixed-feature-banner .mixed-banner-art { width:190px; height:190px; transform:rotate(-10deg); }
.mixed-feature-banner h2 { font-size:clamp(28px,3.4vw,44px); line-height:1.08; }
.mixed-feature-banner p { color:var(--ink); }
/* Direction 3: quiet tools, small tactile signposts, and room for actual work. */
.mixed-editor-heading { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:32px 0; }
.mixed-editor-heading .mixed-heading-art { width:150px; height:150px; flex:0 0 auto; margin:0 30px 0 0; }
.mixed-editor-heading h1 { font-size:clamp(34px,4.8vw,58px); line-height:1.05; margin-bottom:14px; }
.drawn-compose-hero.mixed-editor-heading p:not(.drawn-kicker) { max-width:54ch; padding:0; }
.mixed-editor-heading .eyebrow { margin-bottom:14px; }
.mixed-studio-page .section-hero { max-width:1080px; padding-bottom:18px; }
.mixed-studio-heading { display:flex; align-items:center; gap:22px; }
.mixed-studio-heading .mixed-heading-art { width:96px; height:96px; flex:0 0 auto; }
.mixed-studio-page .compact-paths { max-width:1080px; margin-top:36px; padding-top:24px; border-top:1px solid var(--line); }
.mixed-studio-page .compact-paths .creator-art-grid { max-width:840px; }
.mixed-studio-page .studio-layout { margin-top:20px; }
.drawn-form .upload-drop > .mixed-upload-art { position:static; width:80px; height:72px; object-fit:contain; }
.mixed-panel-art { width:82px; height:82px; float:right; margin:-3px -2px 8px 18px; }
.journey-next .mixed-panel-art { width:104px; height:92px; }
.mixed-document-art { display:block; width:62px; height:62px; margin:0 0 15px; }
.mixed-inbox-empty { text-align:center; padding:24px 12px; }
.mixed-inbox-empty .empty-state-art { width:155px; height:150px; }
.mixed-project-help .mixed-panel-art { width:76px; height:76px; margin-top:-12px; }
.funding-hero.mixed-editor-heading p { max-width:65ch; }
.funding-page > .mixed-ai-entry { max-width:710px; margin-bottom:24px; }
/* Raster miniatures need room to show their materials. Labels remain real text. */
.category-link .category-icon { width:44px; height:44px; }
.category-link { min-height:90px; gap:4px; }
.category-directory .category-icon { width:48px; height:48px; }
.category-directory button { min-height:64px; gap:14px; }
.all-categories .category-icon { width:36px; height:36px; }
.category-selection .category-icon { width:32px; height:32px; }
#category-field-icon .category-icon { width:36px; height:36px; }
@media (max-width:760px) {
  .mixed-discovery-hero { grid-template-columns:1fr; gap:0; margin:24px 0 30px; border-radius:17px; }
  .mixed-discovery-copy { padding:27px 26px 8px; }
  .mixed-discovery-hero h1 { font-size:clamp(36px,9vw,58px); max-width:13ch; margin:14px 0 18px; }
  .mixed-discovery-hero p:not(.eyebrow) { font-size:14px; }
  .mixed-build-hero .mixed-discovery-art { padding:22px 26px 26px; }
  .mixed-build-hero .mixed-discovery-art img { aspect-ratio:1.6; border-radius:12px; }
  .mixed-back-hero .mixed-discovery-art img { height:235px; padding:16px; }
  body[data-route="explore"] .feature-banner.mixed-feature-banner { grid-template-columns:1fr 110px; gap:12px; padding:26px; }
  .mixed-feature-banner .mixed-banner-art { width:110px; height:140px; }
  .mixed-feature-banner > div { grid-column:1/-1; }
  .mixed-feature-banner h2 { font-size:30px; }
  .mixed-editor-heading { gap:16px; padding:28px 0; align-items:flex-start; }
  .mixed-editor-heading .mixed-heading-art { width:90px; height:100px; margin:0; }
  .mixed-editor-heading h1 { font-size:34px; }
  .mixed-editor-heading p { font-size:13px; }
  .drawn-compose-hero.mixed-editor-heading { display:flex; }
  .drawn-compose-hero.mixed-editor-heading h1 { font-size:34px; }
  .mixed-studio-heading { gap:14px; }
  .mixed-studio-heading .mixed-heading-art { width:66px; height:74px; }
  .mixed-studio-page .compact-paths .creator-art-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  .mixed-studio-page .compact-paths { margin-top:28px; }
  .mixed-wishlist-heading .mixed-heading-art { width:86px; }
}
@media (max-width:480px) {
  .category-link .category-icon { width:38px; height:38px; }
  .category-link { min-height:80px; }
  .all-categories .category-icon { width:31px; height:31px; }
  .mixed-editor-heading { gap:8px; }
  .mixed-editor-heading .mixed-heading-art { width:68px; height:84px; }
  .drawn-compose-hero.mixed-editor-heading p:not(.drawn-kicker) { font-size:13px; }
  .mixed-studio-page .compact-paths .creator-art-grid { grid-template-columns:1fr; max-width:360px; }
}

.mixed-hero-art { position:relative; }
.mixed-hero-art > picture { display:block; }