/* Stilspoke visual layer for two prototype screens: brand cues, app proportions. */
:root{--brand-black:#0d0d0b;--brand-lime:#d9ff7a;--brand-paper:#f2f0e7;--brand-violet:#9185bd}
body.brand-screen{background:var(--brand-paper)}
body.brand-screen :where(body > .shell) > .top{background:var(--brand-black);color:var(--brand-paper);padding:14px 18px;margin-top:14px;border-bottom:1px solid var(--brand-lime)}
body.brand-screen .brand img{width:39px;height:39px;object-fit:contain;filter:invert(91%) sepia(60%) saturate(557%) hue-rotate(27deg) brightness(109%) contrast(105%)}
body.brand-screen .brand span,body.brand-screen :where(body > .shell) > .top .muted{color:#aaa2c8}
body.brand-screen .session select{background:#171713;border-color:#555348;color:var(--brand-paper)}
body.brand-screen .avatar{background:var(--brand-violet);border-color:var(--brand-lime);color:var(--brand-black)}
body.brand-screen .nav{gap:0;padding:0 8px;background:var(--brand-black);border-bottom:1px solid var(--brand-lime)}
body.brand-screen .nav a{padding:12px 13px;color:var(--brand-lime);border-left:1px solid rgba(217,255,122,.32);border-bottom:0}
body.brand-screen .nav a:last-child{border-right:1px solid rgba(217,255,122,.32)}
body.brand-screen .nav a:hover,body.brand-screen .nav a.active{background:var(--brand-lime);color:var(--brand-black)}
body.brand-screen main h1,body.brand-screen main h2,body.brand-screen main h3{font-weight:600}
body.brand-screen main .button,body.brand-screen main .panel,body.brand-screen main .tool-card,body.brand-screen main .stats,body.brand-screen main .project-row,body.brand-screen main .task-card,body.brand-screen main .column,body.brand-screen main .review-card{border-radius:0}
body.brand-screen main .page-head{padding-bottom:20px;border-bottom:1px solid var(--ink)}
body.brand-screen main .page-head h1{font-size:48px;line-height:1.02}
body.brand-screen main .page-head .lede{max-width:600px}
body.brand-screen main .button{transition:background .15s,color .15s,border-color .15s}
body.brand-screen main .tool-card,body.brand-screen main .panel{border-color:rgba(13,13,11,.24)}
body.brand-screen main .section-title{margin-top:34px;padding-top:15px;border-top:1px solid rgba(13,13,11,.6)}
body.brand-screen main .section-title h2{font-size:26px}
body.brand-screen main .tabs button.active{background:var(--brand-lime)}
body.brand-screen main .column{border-top-width:1px}
body.brand-screen main .table-wrap{border-color:rgba(13,13,11,.32)}

.brand-concept h1,.brand-concept h2,.brand-concept h3{font-weight:600}
.brand-concept .button,.brand-concept .panel,.brand-concept .tool-card,.brand-concept .stats,.brand-concept .project-row,.brand-concept .task-card{border-radius:0}
.brand-concept .page-head{padding-bottom:20px;border-bottom:1px solid var(--ink)}
.brand-concept .page-head h1{font-size:48px;line-height:1.02}
.brand-concept .page-head .lede{max-width:600px}
.brand-concept .button{transition:background .15s,color .15s,border-color .15s}
.brand-concept .tool-card{border-color:rgba(13,13,11,.24)}
.brand-concept .tool-card:hover{border-color:var(--ink);transform:none}
.brand-concept .tool-card h2{font-size:15px}
.brand-concept .panel{border-color:rgba(13,13,11,.24)}
.brand-concept .section-title{margin-top:34px;padding-top:15px;border-top:1px solid rgba(13,13,11,.6)}
.brand-concept .section-title h2{font-size:26px}
.brand-concept .tabs button.active{background:var(--brand-lime)}

/* Home remains a dashboard. The existing owned-channel block carries the image. */
.brand-home>.owned-home{position:relative;isolation:isolate;overflow:hidden;min-height:205px;margin-bottom:28px;padding:30px 34px;background:var(--brand-black);color:var(--brand-paper)}
.brand-home>.owned-home:before{content:'';position:absolute;z-index:-2;right:0;top:0;width:34%;height:100%;background:url('assets/christopher-select.webp') center 39%/cover no-repeat;filter:grayscale(1) contrast(1.05)}
.brand-home>.owned-home:after{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,var(--brand-black) 0%,var(--brand-black) 57%,rgba(13,13,11,.82) 72%,rgba(13,13,11,.12) 100%)}
.brand-home>.owned-home>div:first-child{max-width:520px}
.brand-home>.owned-home h2{font-size:39px;line-height:1.04;color:var(--brand-lime)}
.brand-home>.owned-home p:not(.eyebrow){color:#d8d5cb}
.brand-home>.owned-home .secondary{color:var(--brand-paper);border-color:#777468;background:rgba(13,13,11,.3)}
.brand-home>.page-head{margin-bottom:22px}
.brand-home>.tool-grid{gap:10px}
.brand-home>.tool-grid .tool-card.feature{background:var(--brand-lime)}
.brand-home>.stats{background:transparent;border-color:var(--ink)}
.brand-home>.stats .stat{border-color:var(--ink)}
.brand-home>.stats .num{font-size:38px}

/* Project stays operational: a compact media band, then tabs and work. */
.brand-project>.back{font-family:'Space Mono',monospace;text-transform:uppercase;font-size:9px;letter-spacing:.08em}
.brand-project>.page-head{margin-bottom:18px}
.brand-project>.page-head h1{font-size:56px}
.brand-project.is-avalon>.project-media-hero{grid-template-columns:minmax(0,1.45fr) minmax(155px,.42fr) minmax(245px,.62fr);grid-template-rows:265px;gap:1px;min-height:0;margin:0 0 20px;background:var(--brand-black);border:1px solid var(--brand-black)}
.brand-project.is-avalon>.project-media-hero .project-media-main{grid-row:auto;min-height:0}
.brand-project.is-avalon>.project-media-hero .project-media-stack{grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:1px;min-height:0}
.brand-project.is-avalon>.project-media-hero .project-media-stack img{min-height:0}
.brand-project.is-avalon>.project-media-hero .project-media-main img,.brand-project.is-avalon>.project-media-hero .project-media-stack img{filter:saturate(.82) contrast(1.03)}
.brand-project.is-avalon>.project-media-hero .project-media-caption{display:flex;flex-direction:column;justify-content:flex-end;padding:23px;background:var(--brand-black)}
.brand-project.is-avalon>.project-media-hero .project-media-caption h2{font-size:24px;line-height:1.08}
.brand-project>.tabs{gap:0;border:1px solid var(--ink);margin-bottom:23px}
.brand-project>.tabs button{border-right:1px solid var(--ink);border-bottom:0}
.brand-project>.tabs button:last-child{border-right:0}
.brand-project>.rollout-shortcut,.brand-project .preproduction-panel{border-radius:0;border-color:var(--ink)}
.brand-project .task-card{box-shadow:none}

@media(max-width:900px){
 .brand-home>.owned-home:before{width:42%}
 .brand-home>.owned-home:after{background:linear-gradient(90deg,var(--brand-black) 0%,var(--brand-black) 50%,rgba(13,13,11,.72) 76%,rgba(13,13,11,.16) 100%)}
 .brand-project.is-avalon>.project-media-hero{grid-template-columns:minmax(0,1.35fr) minmax(210px,.65fr);grid-template-rows:235px auto}
 .brand-project.is-avalon>.project-media-hero .project-media-stack{display:none}
 .brand-project.is-avalon>.project-media-hero .project-media-caption{min-height:235px}
}
@media(max-width:650px){
 body.brand-screen :where(body > .shell) > .top{margin-top:8px;padding:12px}
 body.brand-screen .nav{padding:0}
 body.brand-screen .brand img{width:35px;height:35px}
 body.brand-screen main .page-head h1,.brand-concept .page-head h1,.brand-project>.page-head h1{font-size:42px}
 .brand-home>.owned-home{min-height:235px;padding:25px}
 .brand-home>.owned-home:before{width:100%;opacity:.5}
 .brand-home>.owned-home:after{background:rgba(13,13,11,.72)}
 .brand-home>.owned-home h2{font-size:34px}
 .brand-project.is-avalon>.project-media-hero{grid-template-columns:1fr;grid-template-rows:230px auto}
 .brand-project.is-avalon>.project-media-hero .project-media-caption{min-height:0}
 .brand-project>.tabs button{padding:11px 7px;font-size:8px}
}