/* GALLERY + MAKE LOOK (F0451): the /gallery and /make/<slug> pages (server-rendered by lib/growth/seo-pages.mjs) in the main site's own clothes (design1's blind pick, variant c).
   Reused, not invented: the DM Sans files /fonts/dm-sans-*.ttf (the same URLs style.css loads, so a visitor from /code already has them cached),
   the .code-header + .mode-nav pill group of /code (values copied from code.css and theme-dark.css, light and dark), the wordmark pair, the .sky-scene of style.css,
   the Georgia headline of /code's h1. All rules sit under body.gl. No JS beyond the 1-line theme reader in the head. */
@font-face{font-family:"DM Sans";src:url('/fonts/dm-sans-400.woff2') format('woff2'),url('/fonts/dm-sans-400.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url('/fonts/dm-sans-600.woff2') format('woff2'),url('/fonts/dm-sans-600.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:"DM Sans";src:url('/fonts/dm-sans-700.woff2') format('woff2'),url('/fonts/dm-sans-700.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}

:root{--gl-hb:#dce7ec;--gl-hbg:#f9fbfcdb;--gl-nb:#dce7ed;--gl-nbg:#eef4f7;--gl-na:#577182;--gl-nah:#2d5d7c;--gl-curbg:#fff;--gl-cursh:0 1px 5px #24516c1b;--gl-curc:#244a62;--gl-page:#f5f8f8}
:root[data-theme="dark"]{--gl-hb:#31353a;--gl-hbg:rgba(20,23,28,.859);--gl-nb:#31353a;--gl-nbg:#16191d;--gl-na:#97b2c5;--gl-nah:#92bbd7;--gl-curbg:#13161b;--gl-cursh:0 1px 5px rgba(0,0,0,.241);--gl-curc:#98c1dd;--gl-page:#10161d}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--gl-hb:#31353a;--gl-hbg:rgba(20,23,28,.859);--gl-nb:#31353a;--gl-nbg:#16191d;--gl-na:#97b2c5;--gl-nah:#92bbd7;--gl-curbg:#13161b;--gl-cursh:0 1px 5px rgba(0,0,0,.241);--gl-curc:#98c1dd;--gl-page:#10161d}}
/* the page tokens sit on body.gl, not :root: the page's own inline <style> redefines them on :root after this file loads, and the nearer scope wins */
body.gl{color-scheme:light;--bg:#f5f8f8;--ink:#294b63;--deep:#26495e;--muted:#57758a;--line:rgba(30,73,100,.15);--card:#fff;--accent:#345f78;--accent-ink:#fff;--soft:#e9f0f3}
:root[data-theme="dark"] body.gl{color-scheme:dark;--bg:#10161d;--ink:#c9d5de;--deep:#dde6ec;--muted:#9fb1be;--line:#31353a;--card:#13161b;--accent:#8cc0e3;--accent-ink:#10161d;--soft:#1a222b}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.gl{color-scheme:dark;--bg:#10161d;--ink:#c9d5de;--deep:#dde6ec;--muted:#9fb1be;--line:#31353a;--card:#13161b;--accent:#8cc0e3;--accent-ink:#10161d;--soft:#1a222b}}
html:has(body.gl){background:var(--gl-page)}
body.gl{min-width:320px;min-height:100vh;background:var(--gl-page);color:var(--ink);font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-synthesis:none;position:relative}

/* THE SKY (style.css .sky-scene): a fixed band behind the top only, faded out smoothly above the first card row; in dark it takes /chat's dusk treatment, a little stronger so the band reads against the ground */
body.gl .sky-scene{position:fixed;z-index:0;inset:0;pointer-events:none;background:url('/assets/james-sunset-2026.png') right center / cover no-repeat;background-image:image-set(url('/assets/james-sunset-2026.webp') type('image/webp'),url('/assets/james-sunset-2026.png') type('image/png'))}
body.gl .sky-scene{inset:0 0 auto 0;height:min(42vh,320px);opacity:.36;background-position:right 18%;-webkit-mask-image:linear-gradient(#000 0%,rgba(0,0,0,.82) 22%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.28) 68%,rgba(0,0,0,.1) 86%,transparent 100%);mask-image:linear-gradient(#000 0%,rgba(0,0,0,.82) 22%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.28) 68%,rgba(0,0,0,.1) 86%,transparent 100%)}
:root[data-theme="dark"] body.gl .sky-scene{filter:brightness(.3) saturate(.7) contrast(1.05);opacity:.6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.gl .sky-scene{filter:brightness(.3) saturate(.7) contrast(1.05);opacity:.6}}
@media(max-width:700px){body.gl .sky-scene{background-position:85% 18%}}

/* THE HEADER: /code's .code-header + .mode-nav (code.css 5-11, 282-283, 700, 778; theme-dark.css), Chat | Code | Gallery only */
body.gl .code-header{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;height:76px;padding:0 24px;border-bottom:1px solid var(--gl-hb);background:var(--gl-hbg);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
body.gl .code-header-left{display:flex;align-items:center;gap:24px;min-width:0}
body.gl .chat-brand{display:inline-flex;align-items:center;flex:0 0 auto}
body.gl .code-header .chat-brand img{display:block;width:119px;height:auto}
body.gl .code-header .chat-brand img.gl-logo-d{display:none}
:root[data-theme="dark"] body.gl .code-header .chat-brand img.gl-logo-l{display:none}:root[data-theme="dark"] body.gl .code-header .chat-brand img.gl-logo-d{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.gl .code-header .chat-brand img.gl-logo-l{display:none}:root:not([data-theme="light"]) body.gl .code-header .chat-brand img.gl-logo-d{display:block}}
body.gl .mode-nav{display:flex;align-items:center;gap:3px;padding:4px;border:1px solid var(--gl-nb);border-radius:12px;background:var(--gl-nbg)}
body.gl .mode-nav a{min-width:64px;padding:6px 13px;border-radius:8px;color:var(--gl-na);font-size:.8rem;font-weight:700;line-height:1.5;text-align:center;text-decoration:none;transition:background .15s,color .15s}
body.gl .mode-nav a:hover{color:var(--gl-nah)}
body.gl .mode-nav a[aria-current]{background:var(--gl-curbg);box-shadow:var(--gl-cursh);color:var(--gl-curc)}
body.gl .mode-nav a:focus-visible{outline:2px solid #287eaa;outline-offset:2px}
@media(min-width:701px) and (max-width:1000px){body.gl .code-header{padding:0 16px}body.gl .code-header-left{gap:10px}body.gl .mode-nav a{min-width:0;padding:6px 9px}body.gl .code-header .chat-brand img{width:96px}}
@media(max-width:900px){body.gl .mode-nav a{min-width:0;padding:6px 8px}}
@media(max-width:700px){body.gl .code-header{height:67px;padding:0 14px}body.gl .code-header-left{gap:10px}body.gl .code-header .chat-brand img{width:99px}body.gl .mode-nav a{min-width:50px;padding:6px 8px;font-size:.74rem}}
@media(max-width:380px){body.gl .code-header{padding:0 9px}body.gl .code-header .chat-brand img{width:87px}body.gl .mode-nav a{min-width:44px;padding:5px 6px}}
@media (pointer:coarse),(max-width:700px){body.gl .code-header .mode-nav a,body.gl .code-header .chat-brand{position:relative}
  body.gl .code-header .mode-nav a::after,body.gl .code-header .chat-brand::after{content:'';position:absolute;top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px));left:min(0px,calc(50% - 22px));right:min(0px,calc(50% - 22px))}}

/* THE PAGE: same structure and cards as today; only the type, the tokens and the ground change */
body.gl .wrap{position:relative;z-index:1;padding-top:22px}
body.gl h1{font:500 clamp(30px,5vw,46px)/1.1 Georgia,"Times New Roman",serif;letter-spacing:-.04em;color:var(--deep)}
body.gl h2,body.gl h3{letter-spacing:-.01em}
body.gl .grow{font-size:22px}
body.gl .btn,body.gl .filters button,body.gl .gsafe button,body.gl .gact a,body.gl .gact button,body.gl .gremix button{font-family:inherit}
body.gl a{color:var(--accent)}
body.gl .gact a,body.gl .grid a,body.gl .related a,body.gl .btn.ghost{color:var(--ink)}
body.gl .btn.primary,body.gl .gact button,body.gl .gremix button{color:var(--accent-ink)}
body.gl .filters button{color:var(--ink)}body.gl .filters button[aria-pressed=true]{color:var(--bg)}
body.gl .crumbs a{color:var(--muted)}
body.gl footer{border-top-color:var(--line)}
body.gl a:focus-visible,body.gl button:focus-visible,body.gl textarea:focus-visible{outline:2px solid #287eaa;outline-offset:2px}