/* Video Direction Finder · Kulbeda Brandbook v2. Only brand tokens from brand/styles.css. */
*{box-sizing:border-box}
html{overflow-x:clip}
body{min-height:100dvh;background:var(--vignette) fixed,var(--night);line-height:var(--leading-body);overflow-x:clip}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;border-radius:var(--radius-0)}
button:disabled{cursor:not-allowed;opacity:.4}
a{color:inherit}
button,a{-webkit-tap-highlight-color:transparent;transition:color var(--dur-base) var(--ease-develop),background var(--dur-base) var(--ease-develop),border-color var(--dur-base) var(--ease-develop),box-shadow var(--dur-base) var(--ease-develop)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px}
h1,h2,h3,p,figure{margin:0}
p{margin-bottom:var(--space-4)}

/* Rule 04: dense grain over everything, text included */
.grain{position:fixed;inset:0;z-index:50;pointer-events:none;background-image:var(--grain);opacity:var(--grain-opacity);mix-blend-mode:overlay}

/* Type roles */
h1,h2{font-family:var(--font-display);font-weight:400;line-height:var(--leading-display);letter-spacing:0;-webkit-font-smoothing:none;-moz-osx-font-smoothing:unset;font-smooth:never}
h1{font-size:var(--display-2)}
h2{font-size:var(--display-4)}
.mono{font:400 var(--mono-corner)/1.6 var(--font-mono);letter-spacing:var(--track-corner);text-transform:uppercase}
.label{display:block;color:var(--clay);margin-bottom:var(--space-5)}
.muted{color:var(--fg-2)}
.small{font-size:var(--text-sm)}
.accent{color:var(--scarlet)}

/* Buttons = brand Button: mono caps, square, glow instead of shadow, no press shrink */
.primary,.secondary,.light{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);min-height:48px;padding:13px 22px;font:400 13px/1.2 var(--font-mono);letter-spacing:var(--track-corner);text-transform:uppercase;text-decoration:none;text-align:center}
.primary{background:var(--brick);color:var(--blush)}
.primary:hover:not(:disabled){background:var(--scarlet);box-shadow:var(--glow-scarlet)}
.light{background:var(--blush);color:var(--ink)}
.light:hover{box-shadow:var(--glow-blush)}
.secondary{border:var(--border-strong);color:var(--blush)}
.secondary:hover{background:rgba(241,200,235,.08)}
.text-btn{padding:var(--space-2) 0;font:400 var(--mono-corner)/1.4 var(--font-mono);letter-spacing:var(--track-corner);text-transform:uppercase;color:var(--blush);text-decoration:underline;text-underline-offset:4px}
.text-btn:hover{color:var(--tomato)}

/* Frame */
header,footer{display:flex;align-items:center;gap:var(--space-5);max-width:1440px;margin:auto;padding:var(--space-5) var(--space-7)}
header{border-bottom:var(--border-hair)}
.wordmark img{display:block;width:140px;height:auto}
.header-note{margin-left:auto;color:var(--clay)}
/* Language switch: the brightest control in the header, brand Scarlet with glow */
.lang-switch{display:inline-flex;border:1px solid var(--scarlet);box-shadow:var(--glow-scarlet)}
.lang-switch button{min-width:48px;min-height:40px;padding:0 var(--space-3);font:400 var(--mono-corner)/1 var(--font-mono);letter-spacing:var(--track-corner);color:var(--blush)}
.lang-switch button[aria-pressed=true]{background:var(--scarlet);cursor:default}
.lang-switch button[aria-pressed=false]:hover{background:rgba(234,48,53,.2)}
footer{justify-content:space-between;color:var(--clay);border-top:var(--border-hair)}
#app{max-width:1344px;min-height:calc(100dvh - 170px);margin:auto;padding:var(--space-8) var(--space-7) var(--space-9)}

/* Intro */
.intro{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-8);align-items:stretch}
.intro-copy{padding:var(--space-6) 0}
.intro h1{font-size:var(--display-3);margin-bottom:var(--space-6)}
.lead{font-size:var(--text-lg);font-weight:300;max-width:540px;color:var(--blush)}
.intro-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5);margin:var(--space-6) 0 var(--space-5)}
.intro-meta{margin:0}
/* Photo enters from the right edge, cut diagonally, develops from dim */
.art{position:relative;min-height:520px;margin-right:calc((min(1344px,100vw) - 100vw)/2 - var(--space-7))}
.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%;clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);animation:develop-img 1.6s var(--ease-develop) both}
.art .mono{position:absolute;color:var(--blush);z-index:1}
.art-number{top:var(--space-5);right:var(--space-7)}
.art-caption{bottom:var(--space-5);left:var(--space-8)}
@keyframes develop-img{from{filter:brightness(.25) saturate(.3)}to{filter:none}}
.intro-scale{margin-top:var(--space-8)}
.intro-scale p{margin-top:var(--space-4);font-size:var(--text-sm)}

/* Direction scale: hairline cells, like the letter tiles */
.scale{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--border-hair);border-left:var(--border-hair)}
.cell{position:relative;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);min-height:150px;border-right:var(--border-hair);border-bottom:var(--border-hair);transition:opacity var(--dur-slow) var(--ease-develop)}
.cell img{width:48px;height:48px;object-fit:contain}
.cell-title{margin-top:auto;font-weight:700;font-size:var(--text-md);line-height:1.25}
.cell-state{position:absolute;top:var(--space-4);right:var(--space-4);color:var(--clay)}
.cell.main{background:var(--brick);outline:1px solid var(--scarlet);outline-offset:-1px}
.cell.main .cell-state{color:var(--blush)}
.cell.second{outline:1px dashed var(--line-2);outline-offset:-6px}
.cell.dim{opacity:.4}

/* Quiz */
.quiz-layout{display:grid;grid-template-columns:240px 1fr;gap:var(--space-8)}
.rail ol{list-style:none;padding:0;margin:0 0 var(--space-6);border-top:var(--border-hair)}
.rail li{border-bottom:var(--border-hair)}
.step-link{display:flex;gap:var(--space-4);width:100%;padding:var(--space-3) 0;text-align:left;color:var(--clay);font-size:var(--text-sm)}
.step-link:hover:not(:disabled){color:var(--scarlet)}
.step-link.current{color:var(--blush)}
.step-num{font:400 var(--mono-corner)/1.9 var(--font-mono);letter-spacing:var(--track-corner)}
.step-link.current .step-num{color:var(--scarlet)}
.step-link.done .step-num{color:var(--tomato)}
.rail-icon{display:block;width:96px;height:96px;object-fit:contain;margin-bottom:var(--space-4)}
.step-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-5)}
.step-top .label{margin:0}
.progress{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-1);margin:var(--space-4) 0 var(--space-7)}
.progress span{height:6px;background:var(--line-1)}
.progress .done{background:var(--brick)}
.progress .now{background:var(--scarlet);box-shadow:var(--glow-scarlet)}
.question h2{max-width:820px;margin-bottom:var(--space-4)}
.question-hint{color:var(--clay);max-width:720px}
.options{display:grid;grid-template-columns:1fr 1fr;margin:var(--space-6) 0;border-top:var(--border-hair);border-left:var(--border-hair)}
.option{display:flex;flex-direction:column;gap:var(--space-3);min-height:128px;padding:var(--space-4) var(--space-5) var(--space-5);text-align:left;color:var(--blush);border-right:var(--border-hair);border-bottom:var(--border-hair)}
.option-top{display:flex;justify-content:space-between;align-items:center;color:var(--clay)}
.marker{width:18px;height:18px;display:grid;place-items:center;border:var(--border-strong);font-size:12px;line-height:1}
.option-title{display:block;font-weight:700;font-size:var(--text-md);line-height:1.3}
.option small{display:block;margin-top:var(--space-1);color:var(--clay);font-size:var(--text-sm);line-height:1.45}
.option:hover{background:rgba(241,200,235,.04)}
.option:hover .option-title{color:var(--scarlet)}
.option.selected{background:var(--brick)}
.option.selected .option-title{color:var(--blush)}
.option.selected small,.option.selected .option-top{color:var(--blush)}
.option.selected .marker{background:var(--blush);border-color:var(--blush);color:var(--ink)}
.navigation{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);margin-top:var(--space-6)}
.save-note{margin-top:var(--space-5);font-size:13px;color:var(--clay)}

/* Result */
.result-heading{max-width:1000px;margin-bottom:var(--space-7)}
.result-heading h1{font-size:var(--display-3);margin-bottom:var(--space-5)}
.result-heading + .scale{margin-bottom:var(--space-8)}
.result-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--space-8);align-items:start}
.result-section{padding:var(--space-5) 0 var(--space-4);border-top:var(--border-hair)}
.sec-title{margin-bottom:var(--space-4);color:var(--clay);font-weight:400}
.sec-title span{color:var(--scarlet);margin-right:var(--space-2)}
.result-section ul,.result-section ol{padding-left:var(--space-5);margin:0 0 var(--space-4)}
.result-section li{margin-bottom:var(--space-3)}
.result-section li::marker{color:var(--scarlet)}
.steps li::marker{font-family:var(--font-mono);font-size:13px}
.format-name{font-weight:700;font-size:var(--text-lg);margin-bottom:var(--space-3)}
.open-label{margin:var(--space-5) 0 var(--space-3)}
.variants{display:grid;grid-template-columns:1fr 1fr;border-top:var(--border-hair);border-left:var(--border-hair)}
.variant{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);border-right:var(--border-hair);border-bottom:var(--border-hair)}
.variant .mono{color:var(--scarlet)}
.variant strong{font-size:var(--text-lg)}
.variant p{margin:0;color:var(--clay);font-size:var(--text-sm)}
.result-aside{position:sticky;top:var(--space-5)}
.next-box{padding:var(--space-6);background:var(--brick);margin-bottom:var(--space-5)}
.next-box .label{color:var(--blush);margin-bottom:var(--space-4)}
.criterion{font-weight:300;font-size:var(--text-lg);line-height:1.35;margin-bottom:var(--space-5)}
.next-box .light{width:100%}
.save-actions{display:grid;gap:var(--space-3)}
.save-actions .text-btn{justify-self:start}
.result-small{font-size:13px;color:var(--clay);margin-top:var(--space-4)}

/* Offer to talk on Telegram: same words as the Behance funnel */
.kev{max-width:640px;margin-top:var(--space-8);padding-top:var(--space-6);border-top:var(--border-hair)}
.kev-title{font:700 var(--mono-rubric)/1.4 var(--font-mono);letter-spacing:var(--track-rubric);text-transform:uppercase;margin-bottom:var(--space-3)}
.kev p{color:var(--fg-2)}
.result-aside .kev{margin:0 0 var(--space-5);padding:var(--space-5);border:var(--border-strong)}
.result-aside .kev .primary{width:100%}
.live-note{color:var(--fg-2);margin-bottom:var(--space-5)}

/* Motion: write fast, show slow */
.animate-in{animation:develop var(--dur-slow) var(--ease-develop) both}
@keyframes develop{from{opacity:0;filter:brightness(.4)}to{opacity:1;filter:none}}

/* Status and dialog */
#status{position:fixed;bottom:var(--space-5);left:50%;transform:translateX(-50%);z-index:40;max-width:calc(100% - 32px);padding:var(--space-3) var(--space-5);background:var(--blush);color:var(--ink);font:400 var(--mono-corner)/1.5 var(--font-mono);letter-spacing:var(--track-corner);text-transform:uppercase}
#status:empty{display:none}
dialog{width:min(740px,calc(100% - 32px));max-height:90dvh;overflow:auto;padding:var(--space-6);background:var(--night);color:var(--blush);border:var(--border-strong);border-radius:var(--radius-0)}
dialog::backdrop{background:rgba(15,13,12,.8)}
dialog h2{font-size:var(--display-5);margin:var(--space-4) 0}
.close{float:right}
dialog label{font:400 var(--mono-corner)/1.6 var(--font-mono);letter-spacing:var(--track-corner);text-transform:uppercase;color:var(--clay)}
textarea{display:block;width:100%;margin-top:var(--space-2);padding:var(--space-3);background:rgba(15,13,12,.3);border:var(--border-strong);border-radius:var(--radius-0);font-size:var(--text-sm)}
.dialog-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:var(--space-5) 0}
dialog .muted{font-size:13px}

@media(max-width:1000px){
h1{font-size:var(--display-3)}
.intro{grid-template-columns:1fr;gap:var(--space-5)}
.art{min-height:520px;margin-left:calc(-1 * var(--space-7))}
.art img{clip-path:polygon(0 12%,100% 0,100% 100%,0 100%)}
.quiz-layout{grid-template-columns:180px 1fr;gap:var(--space-6)}
.result-grid{grid-template-columns:1fr;gap:0}
.result-aside{position:static;margin-top:var(--space-6)}
.header-note{display:none}
.lang-switch{margin-left:auto}
}
@media(max-width:700px){
header,footer{padding:var(--space-4)}
header{flex-wrap:wrap;gap:var(--space-2) var(--space-4)}
header>a.text-btn{margin-left:auto}
.lang-switch{margin-left:auto}
.lang-switch button{min-height:44px}
.wordmark img{width:112px}
#app{padding:var(--space-6) var(--space-4) var(--space-8)}
h1,.intro h1,.result-heading h1{font-size:var(--display-4)}
h2{font-size:var(--display-5)}
.lead{font-size:var(--text-md)}
.art{min-height:440px;margin:0 calc(-1 * var(--space-4))}
.art-number{right:var(--space-4)}.art-caption{left:var(--space-4)}
.intro-actions{flex-direction:column;align-items:stretch}
.scale{grid-template-columns:1fr 1fr}
.cell{min-height:120px}
.quiz-layout{grid-template-columns:1fr;gap:0}
.rail{display:none}
.progress{margin-bottom:var(--space-6)}
.options,.variants{grid-template-columns:1fr}
.option{min-height:0}
.navigation .primary{flex:1}
.next-box{padding:var(--space-5)}
dialog{padding:var(--space-5)}
footer .mono{font-size:10px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{
body{background:var(--blush);color:var(--ink)}
header,footer,.grain,.lang-switch,.kev,.save-actions,.result-small,button,.cell img{display:none}
#app{padding:0}
.result-grid{display:block}
h1,.result-heading h1{font:700 28px/1.2 var(--font-body)}
.muted,.sec-title,.label,.next-box .label,.variant p,.cell-state{color:var(--ink)}
.scale,.cell,.result-section,.variants,.variant{border-color:var(--ink)}
.cell{min-height:0;background:none!important;outline:0!important;opacity:1}
.cell.main{border:2px solid var(--ink)}
.next-box{background:none;color:var(--ink);border:1px solid var(--ink);padding:16px}
.result-section,.next-box,.scale{break-inside:avoid}
}