@import url('/assets/scenarios.css');

:root { background:#080b12; color:#f4f4f7; }
.site-header { border-color:#ffffff12; }
.site-main { padding-top:36px; }
.blog-hero { max-width:820px; padding:8px 0 28px; }
.blog-hero h1 { font-size:clamp(32px,4.2vw,48px); line-height:1.12; letter-spacing:-.035em; text-wrap:balance; }
.lead { font-size:18px; line-height:1.65; max-width:760px; color:#a9adbd; }
.blog-hero .lead { margin-bottom:0; }
.site-main>section { margin-bottom:48px; }
.blog-nav { display:flex; flex-wrap:wrap; gap:6px; padding:6px; margin:0 0 36px; width:fit-content; max-width:100%; background:#121722; border:1px solid #ffffff0c; border-radius:14px; }
.blog-nav a { padding:11px 18px; border-radius:9px; color:#a9adbd; font-size:14px; font-weight:600; line-height:1.4; text-decoration:none; transition:background-color .18s,color .18s; }
.blog-nav a:hover { background:#1d2433; color:#fff; }
.blog-nav a[aria-current="page"] { color:#e9e2ff; background:#302644; }
.blog-breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; color:#9098aa; font-size:13px; line-height:1.6; margin-bottom:22px; }
.blog-breadcrumbs a { color:#b6aecb; text-decoration:none; }
.section-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:12px 24px; margin:24px 0 20px; }
.section-heading h2 { margin:0; font-size:26px; }
.section-heading a { font-size:14px; font-weight:600; text-decoration:none; }
.results-summary { margin:20px 0; color:#979fb0; font-size:14px; }
.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 24px; }
.card { min-width:0; padding:0; border:0; }
.card img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:14px; background:#141a26; }
.card>a { display:block; border-radius:14px; }
.card h3 { overflow-wrap:anywhere; font-size:18px; line-height:1.45; margin:0; }
.card h3 a { color:#f4f4f7; text-decoration:none; }
.card h3 a:hover { color:#c4b5fd; }
.card-content { padding:14px 0 0; }
.card-content p { font-size:14px; line-height:1.65; margin:9px 0 0; color:#a9adbd; }
.card-content .card-date { font-size:12px; color:#8891a4; margin:0 0 8px; }
.photo-grid .card img { aspect-ratio:1; }
.photo-grid .card h3 { font-size:16px; font-weight:600; }
.photo-grid .card-content { padding-top:12px; }
.photo-grid .card-date { display:none; }
.category-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; list-style:none; padding:0; margin:0; }
.category-list li { min-width:0; }
.category-card { display:flex; align-items:center; height:100%; padding:10px; gap:16px; color:#f4f4f5; text-decoration:none; background:#121722; border:1px solid #ffffff10; border-radius:12px; transition:background-color .18s,border-color .18s; }
.category-cover { width:88px; height:104px; flex:0 0 88px; object-fit:cover; object-position:center 30%; border-radius:7px; background:#202634; }
.category-card-heading { min-width:0; display:flex; width:100%; align-items:center; gap:16px; justify-content:space-between; }
.category-card h3 { margin:0; font-size:15px; line-height:1.5; font-weight:600; overflow-wrap:anywhere; }
.category-card-arrow { flex:0 0 auto; color:#a99cce; font-size:20px; line-height:1; }
.category-card:hover { background:#1c2230; border-color:#8d79bb66; }
.category-card:active { background:#292237; }
.category-search { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; max-width:680px; margin:0 0 22px; }
.category-search-row { display:flex; flex:1 1 100%; gap:12px; min-width:0; }
.category-search label { flex:1 1 100%; font-size:14px; color:#c1c4d0; }
.category-search input[type="search"] { flex:1 1 220px; min-width:0; width:100%; padding:14px 16px; font:inherit; font-size:16px; line-height:1.4; color:#f4f4f7; background:#121722; border:1px solid #3a4050; border-radius:10px; }
.category-search input::placeholder { color:#858d9f; }
.category-search button { padding:14px 22px; font-size:15px; line-height:1.5; color:#e9e2ff; background:#302644; border:1px solid #665086; border-radius:10px; }
.category-search button:hover { background:#403154; }
.category-search>a { padding:14px 8px; font-size:14px; }
input:focus-visible { outline:3px solid #c4b5fd; outline-offset:3px; }
.pagination { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin:32px 0; }
.pagination a { padding:12px 18px; min-height:44px; border:1px solid #323a4c; border-radius:10px; text-decoration:none; font-size:14px; }
.pagination a:hover { background:#1b2230; }
.pagination span { font-size:14px; color:#a1a8ba; padding:8px; }
.article-page,.post-page,.category-page { padding-bottom:32px; }
.article-page { max-width:800px; }
.post-page { max-width:none; }
.article-page h1,.post-page h1,.category-page h1 { font-size:clamp(30px,4vw,46px); line-height:1.15; overflow-wrap:anywhere; text-wrap:balance; }
.category-page>.card-grid { margin-top:24px; }
.category-page>.photo-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.category-page>.lead { font-size:16px; }
.category-page details { max-width:760px; margin:16px 0 24px; border-color:#ffffff18; }
.category-page details summary { color:#c4b5fd; font-size:14px; }
.original-image-link { display:block; cursor:zoom-in; }
.original-image-link:focus-visible { outline:3px solid #67e8f9; outline-offset:5px; border-radius:14px; }
.article-cover { display:block; width:100%; max-height:700px; height:auto; object-fit:contain; margin:30px 0; background:#121722; border-radius:14px; }
.article-page time,.post-page time { font-size:14px; color:#a1a8ba; }
.prose { font-size:17px; line-height:1.8; overflow-wrap:anywhere; }
.prose h2 { margin:38px 0 18px; }
.prose h3 { margin:30px 0 16px; }
.prose img { max-width:100%; height:auto; border-radius:10px; }
.prose ul,.prose ol { padding-left:24px; color:#bcbcc5; }
.prose li { margin:10px 0; }
.prose blockquote { border-left:3px solid #a99cce; margin:26px 0; padding-left:22px; }
.prose pre { overflow-x:auto; padding:20px; background:#121722; border-radius:10px; white-space:pre; }
.prose code { font-size:.9em; color:#e9d5ff; }
.prose table { display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; }
.prose td,.prose th { padding:12px; border:1px solid #3f3f46; text-align:left; }
.prompt-box { padding:24px; border-left:3px solid #a99cce; background:#121722; margin:30px 0; }
.prompt-box p { white-space:pre-wrap; overflow-wrap:anywhere; }
/* Individual photo example: the image leads, the prompt stays alongside it. */
.post-page h1 { max-width:980px; font-size:clamp(26px,3vw,36px); margin:18px 0 24px; line-height:1.2; text-wrap:pretty; }
.post-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr); grid-template-areas:"photo related" "prompt related"; align-items:start; gap:24px 32px; }
.post-image { grid-area:photo; min-width:0; }
.post-image .article-cover { display:block; width:100%; height:auto; max-height:calc(100svh - 100px); margin:0; object-fit:contain; object-position:top center; background:transparent; border-radius:12px; }
.post-layout>.related-photos { grid-area:related; min-width:0; margin-top:0; }
.post-layout>.prompt-box { grid-area:prompt; min-width:0; }
.post-layout>.prompt-box { margin:0; padding:22px; border:1px solid #ffffff10; border-radius:14px; background:#1a2230; }
.post-layout>.prompt-box h2 { font-size:15px; letter-spacing:0; margin:0 0 14px; color:#f4f4f7; }
.post-layout>.prompt-box .prose { font-size:14px; line-height:1.65; color:#d1d6e1; }
.post-layout>.prompt-box .prose p { margin:0 0 14px; color:inherit; }
.post-layout>.prompt-box .prose p:last-child { margin-bottom:0; }
.post-layout>.prompt-box .prose h2 { margin-top:24px; }
.post-layout>.prompt-box .button { display:block; width:100%; text-align:center; padding:14px 16px; margin:20px 0 0; font-size:14px; line-height:1.45; border-radius:9px; background:#773dd4; }
.post-layout>.prompt-box .button:hover { background:#8752df; }
.prompt-copy-button { display:block; width:100%; margin-top:16px; border-color:#666079; color:#dfd6f4; font-size:14px; padding:11px 14px; }
.prompt-copy-button[hidden] { display:none; }
.prompt-copy-button:hover { background:#302b40; }
.prompt-copy-button:disabled { cursor:wait; opacity:.6; }
#prompt-copy-status { margin:10px 0 0; font-size:12px; line-height:1.5; color:#b8d8c8; }
#prompt-copy-status:empty { display:none; }
.related-photos { margin-top:26px; }

.related-photos h2 { font-size:16px; letter-spacing:0; margin:0 0 14px; }
.related-photo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.related-photo-grid a { display:block; min-width:0; overflow:hidden; border-radius:9px; background:#121722; }
.related-photo-grid img { display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; transition:opacity .18s; }
.related-photo-grid a:hover img { opacity:.8; }
@media(max-width:767px) {
 .post-layout { grid-template-columns:minmax(0,1fr); grid-template-areas:"photo" "related" "prompt"; gap:28px; }
 .post-image { position:static; }
 .post-image .article-cover { max-height:none; }
 .post-layout>.prompt-box { padding:20px; }
 .related-photo-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media(max-width:380px) { .related-photo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.site-footer nav { display:flex; flex-wrap:wrap; gap:18px; font-size:14px; }
.site-header .button { padding:11px 18px; margin:0; }
.site-header nav { flex-wrap:wrap; }
.site-header .blog-nav { margin:0; }
.site-header .blog-nav .button { color:#fff; background:#773dd4; }
@media(max-width:900px) {
 .card-grid,.category-list,.category-page>.photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:540px) {
 .site-main { padding-top:24px; }
 .site-main>section { margin-bottom:36px; }
 .site-header { display:block; padding-block:16px; }
 .site-header .brand { display:inline-block; margin-bottom:14px; }
 .site-header .blog-nav { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .site-header nav { gap:10px; font-size:12px; }
 .site-header .button { width:auto; padding:9px 10px; }
 .blog-hero { padding-bottom:20px; }
 .lead { font-size:16px; }
 .blog-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; gap:4px; margin-bottom:28px; }
 .blog-nav a { text-align:center; padding:11px 8px; font-size:13px; }
 .section-heading h2 { font-size:23px; }
 .section-heading a { font-size:13px; }
 .card-grid { grid-template-columns:minmax(0,1fr); gap:24px; }
 .article-grid .card { display:grid; grid-template-columns:96px minmax(0,1fr); gap:14px; align-items:start; }
 .article-grid .card img { aspect-ratio:1; }
 .article-grid .card-content { padding:0; }
 .article-grid .card h3 { font-size:15px; }
 .article-grid .card-content>p:not(.card-date) { display:none; }
 .photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 12px; }
 .photo-grid .card h3 { font-size:14px; }
 .card img { border-radius:10px; }
 .category-list { grid-template-columns:minmax(0,1fr); gap:8px; }
 .category-card { padding:8px; gap:14px; }
 .category-cover { width:72px; height:88px; flex-basis:72px; }
 .category-search { gap:10px; }
 .category-search input[type="search"] { flex-basis:160px; }
 .category-search button { padding-inline:16px; }
 .prose { font-size:16px; }
 .prompt-box { padding:18px; }
}
@media(prefers-reduced-motion:reduce) { .category-card,.blog-nav a,.related-photo-grid img { transition:none; } }
.gallery-status { color:#a9adbd; font-size:12px; line-height:1.5; margin:12px 0 0; }
.related-photo-grid a[aria-current="page"] { outline:3px solid #b9a0ff; outline-offset:3px; }
.post-page[aria-busy="true"] .post-image { opacity:.6; }

.article-examples { margin-top:44px; padding-top:28px; border-top:1px solid #ffffff16; }
.article-examples .photo-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media(max-width:767px) { .article-examples .photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.related-photos>a { display:inline-block; margin:0 0 14px; font-size:12px; text-decoration:none; }

.post-layout:not(:has(.related-photos)) { grid-template-columns:minmax(0,800px); grid-template-areas:"photo" "prompt"; }