/* Site plan · Kulbeda Brandbook v2. Tokens come from brand/styles.css; structure mirrors Video Direction Finder. */
:root{--grain-opacity:.34}
*{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{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}
[tabindex="-1"]:focus{outline:none}
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. Keleti (.display) only for headings of 1–2 words; long titles are Onest (.title). */
.display{font-family:var(--font-display);font-weight:400;font-size:var(--display-2);line-height:var(--leading-display);letter-spacing:0;-webkit-font-smoothing:none;font-smooth:never}
.display.md{font-size:var(--display-3)}
.title{font:700 clamp(24px,1.4vw + 14px,32px)/1.2 var(--font-body);letter-spacing:-.01em;max-width:28ch;text-wrap:balance}
.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 */
.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{border-color:var(--scarlet);color:var(--scarlet)}
.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(--scarlet)}

/* 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{display:block;width:140px;height:22px;background:var(--logo-on-dark);-webkit-mask:url('brand/assets/logo/kulbeda-wordmark.svg') left center/contain no-repeat;mask:url('brand/assets/logo/kulbeda-wordmark.svg') left center/contain no-repeat}
.header-note{margin-left:auto;color:var(--clay);white-space:pre-line;text-align:right}
/* Language switch: the brightest control in the header, 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)}
footer a{text-decoration:none}
footer a:hover{color:var(--scarlet)}
.handle{color:var(--blush)}
#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 .display{margin-bottom:var(--space-6)}
.intro .title{margin-bottom:var(--space-4)}
.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:560px;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% 40%;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)}

/* Plan scale: hairline cells, like 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:160px;border-right:var(--border-hair);border-bottom:var(--border-hair);transition:background var(--dur-base) 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;transition:color var(--dur-base) var(--ease-develop)}
.cell-text{font-size:var(--text-sm);color:var(--clay);line-height:1.45}
.cell-state{position:absolute;top:var(--space-4);right:var(--space-4);color:var(--clay)}
.cell:hover .cell-title{color:var(--scarlet)}
.cell.main{background:var(--brick);outline:1px solid var(--scarlet);outline-offset:-1px}
.cell.main .cell-state,.cell.main .cell-text,.cell.main:hover .cell-title{color:var(--blush)}
.cell.dim{opacity:.45}

/* 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-auto-flow:column;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 .title{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)}
.option.radio .marker{border-radius:50%}
.option-title{display:block;font-weight:700;font-size:var(--text-md);line-height:1.3;transition:color var(--dur-base) var(--ease-develop)}
.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,.option.selected small,.option.selected .option-top{color:var(--blush)}
.option.selected .marker{background:var(--blush);border-color:var(--blush)}
.option.selected .marker:after{content:'';width:5px;height:9px;border:solid var(--ink);border-width:0 2px 2px 0;transform:translate(0,-1px) rotate(45deg)}
.option.radio.selected .marker:after{width:6px;height:6px;border:0;border-radius:50%;background:var(--ink);transform:none}
.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 .display{margin-bottom:var(--space-5)}
.verdict{font:700 clamp(22px,1.2vw + 14px,30px)/1.25 var(--font-body);max-width:32ch;margin-bottom:var(--space-3)}
.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)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.tag{display:inline-block;padding:3px 7px;line-height:1;border:1px solid var(--line-2);color:var(--blush);vertical-align:2px;margin-left:var(--space-2);font-weight:400}
.t-idea{background:var(--blush);border-color:var(--blush);color:var(--ink)}

/* Checklist: launch items the visitor ticks */
.checklist,.rows{list-style:none;padding:0;margin:0}
.checklist li+li{border-top:var(--border-hair)}
.checklist label{display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--space-4);padding:var(--space-4) 0;cursor:pointer}
.checklist input{position:absolute;opacity:0;pointer-events:none}
.box{width:22px;height:22px;border:var(--border-strong);margin-top:1px;position:relative;transition:background var(--dur-base),border-color var(--dur-base)}
.checklist label:hover .box{border-color:var(--scarlet)}
.checklist label:hover b{color:var(--scarlet)}
.checklist input:focus-visible+.box{outline:2px solid var(--focus-ring);outline-offset:3px}
.checklist input:checked+.box{background:var(--scarlet);border-color:var(--scarlet)}
.checklist input:checked+.box:after{content:'';position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid var(--blush);border-width:0 2px 2px 0;transform:rotate(45deg)}
.checklist input:checked~.ctext b{color:var(--clay)}
.ctext{display:flex;flex-direction:column;gap:var(--space-1)}
.ctext b{font-weight:700;font-size:var(--text-md);line-height:1.35;transition:color var(--dur-base) var(--ease-develop)}
.why{font-size:15px;line-height:1.55;color:var(--clay);max-width:62ch}
/* Rows: a light engraved icon beside each point */
.row{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--space-4);align-items:start;padding:var(--space-3) 0}
.row+.row{border-top:var(--border-hair)}
.row p{font-size:15px;line-height:1.55;margin:0;max-width:62ch}
.row b{display:block;font-weight:700;font-size:16px;line-height:1.4;margin-bottom:2px}
.row .small{color:var(--clay)}
.icon{display:block;width:32px;height:32px;object-fit:contain}

.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)}
.result-small a:hover{color:var(--scarlet)}
.printonly{display:none}

#toast{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}
#toast:empty{display:none}

/* 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}}

@media(max-width:1000px){
.display{font-size:var(--display-3)}
.intro{grid-template-columns:1fr;gap:var(--space-5)}
.art{min-height:420px;margin-left:calc(-1 * var(--space-7))}
.art img{clip-path:polygon(0 12%,100% 0,100% 100%,0 100%)}
.scale{grid-template-columns:1fr 1fr}
.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)}
.wordmark{width:112px;height:18px}
.lang-switch button{min-height:44px}
.headlink{display:none}
#app{padding:var(--space-6) var(--space-4) var(--space-8)}
.display,.display.md{font-size:var(--display-4)}
.lead{font-size:var(--text-md)}
.art{min-height:340px;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}
.cell{min-height:132px}
.quiz-layout{grid-template-columns:1fr;gap:0}
.rail{display:none}
.progress{margin-bottom:var(--space-6)}
.options,.pair{grid-template-columns:1fr}
.option{min-height:0}
.navigation .primary{flex:1}
.next-box{padding:var(--space-5)}
footer{flex-wrap:wrap;gap:var(--space-2) var(--space-4)}
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,.save-actions,.next-box .light,.result-small,button,.cell img,#toast{display:none!important}
#app{padding:0}
.result-grid,.pair{display:block}
.display{font-size:var(--display-5)}
.muted,.sec-title,.label,.next-box .label,.cell-state,.cell-text,.why,.row .small{color:var(--ink)}
.scale,.cell,.result-section,.row,.checklist li{border-color:rgba(15,13,12,.3)}
.cell{min-height:0;background:none!important;outline:0!important;opacity:1}
.next-box{background:none;color:var(--ink);border:1px solid var(--ink);padding:16px}
.box{border-color:var(--ink)}
.checklist input:checked+.box{background:var(--ink)}
.result-section,.next-box,.scale,.checklist li,.row{break-inside:avoid}
.printonly{display:block;margin-top:24px}
}