/* bsandova.com — techno register: concrete, mono, a serif name, one acid accent. Colours of the sequencer come from delayed-all-the-time. */
:root{--bg:#161616;--bg-2:#1F1F1F;--fg:#DCDCD6;--fg-2:#7E7E78;--line:#3A3A36;--hot:#F2F2EE;--coral:#D6FF3A;--bus:#FF6A3D;--tram:#7ED9A6;--trol:#B78CFF;--sea:#D6FF3A;--mono:'JetBrains Mono',monospace;--sans:'Space Grotesk',sans-serif;--serif:'Fraunces',serif}
*{box-sizing:border-box}html,body{margin:0;overflow-x:hidden}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;background:url(assets/grain.png);opacity:.13;mix-blend-mode:screen;pointer-events:none;z-index:9}
a{color:inherit;text-decoration:none}
.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 1.5rem;height:44px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2)}
.top b{color:var(--fg);font-weight:400}.top nav{display:flex;gap:2rem}.top nav a:hover{color:var(--coral)}.top .tr{text-align:right;white-space:nowrap}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:0}
.l{min-width:0;padding:2.5rem 1.5rem 2rem;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-start;gap:2.25rem}
.name{font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 144;color:transparent;-webkit-text-stroke:1.25px var(--hot);font-size:clamp(3rem,7.4vw,7.4rem);line-height:.98;letter-spacing:-.035em;margin:0;padding-top:.12em;color:var(--hot)}
.name em{font-style:italic;font-weight:300;color:var(--hot);-webkit-text-stroke:0}
.role{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2);margin:1rem 0 0}
.stmt{font-family:var(--serif);font-weight:300;font-size:clamp(1.2rem,1.9vw,1.8rem);line-height:1.2;letter-spacing:-.015em;margin:0;max-width:22em;color:var(--fg)}
.stmt em{font-style:italic}.stmt i{font-style:normal;color:var(--hot);border-bottom:2px solid var(--coral)}
.sea{display:flex;flex-direction:column;justify-content:center;margin:0}
.sea canvas{display:block;width:100%;height:130px}
.sea .lbl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2);padding-top:.5rem;border-top:1px solid var(--line)}
.sea .lbl b{color:var(--coral);font-weight:400}
.meta{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:2rem;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2)}
.meta{gap:0}.meta div{padding:1rem 1.25rem 1rem 0;border-right:1px solid var(--line)}.meta div+div{padding-left:1.25rem}.meta div:last-child{border:0}.meta b{display:block;color:var(--fg);font-weight:400;margin-top:.45rem;line-height:1.7}
.r{position:relative;display:grid;grid-template-rows:auto 1fr;min-width:0}
.cards{border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:end;padding:1.5rem 1.5rem 0}
.card{display:flex;flex-direction:column;gap:.6rem}
.card figcaption{padding-bottom:1rem}
.bio{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2);margin:0 0 1rem;text-align:right;line-height:1.8}
.card img{width:auto;height:clamp(170px,18vw,240px);display:block}.card img.tall{height:clamp(200px,20vw,280px)}
.card figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2);line-height:1.8}
.card figcaption b{color:var(--fg);font-weight:400}
.seq{position:relative;padding:1.5rem 1.5rem 0;display:flex;flex-direction:column;justify-content:flex-end}
.seq canvas{display:block;width:100%;height:100%;cursor:crosshair}
.seq .lbl{display:flex;justify-content:space-between;gap:1rem;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2);padding:.6rem 0}
.seq .lbl b{color:var(--hot);font-weight:400}
.works{border-top:1px solid var(--line)}
.w{display:grid;grid-template-columns:2.5rem minmax(0,1fr) auto auto;gap:1.25rem;align-items:baseline;padding:.8rem 1.5rem;border-bottom:1px solid var(--line)}
.w:hover{background:var(--hot);color:var(--bg)}.w:hover .i,.w:hover .y,.w:hover .go{color:var(--bg)}
.w .i,.w .y,.w .go{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2)}
.w .t{font-family:var(--serif);font-weight:400;font-size:clamp(1.05rem,1.5vw,1.35rem);letter-spacing:-.01em;line-height:1.15;color:var(--hot)}
.w .t em{font-style:italic;font-weight:300}.w .t small{display:block;font-family:var(--sans);font-size:.8rem;color:var(--fg-2);margin-top:.15rem;letter-spacing:0}
.w:hover .t,.w:hover .t small{color:var(--bg)}
.w .go{color:var(--fg)}
#listen .go{color:var(--coral)}
.meta b i{font-style:normal;color:var(--sea)}
.seq .lbl b{color:var(--coral)}
.seq .lbl i{font-style:normal}
.deck{position:fixed;left:0;right:0;bottom:0;height:min(82vh,760px);background:#1a0a12;transform:translateY(102%);transition:transform .35s steps(6);z-index:20;border-top:1px solid var(--line)}
.deck{visibility:hidden}.deck.open{transform:none;visibility:visible}.deck iframe{width:100%;height:100%;border:0;display:block}
.deck .x{position:absolute;right:1rem;top:-2.4rem;background:var(--hot);color:var(--bg);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:.55rem .9rem;cursor:pointer;display:none;border:0}.deck.open .x{display:block}
@media (max-width:64rem){
 .top{grid-template-columns:auto 1fr;height:auto;padding:.7rem 1rem;gap:.5rem 1rem}
 .top nav{display:none}.top .tr{white-space:normal;text-align:right;font-size:10px}
 .hero{grid-template-columns:1fr;min-height:0}
 .l{border-right:0;border-bottom:1px solid var(--line);padding:1.75rem 1rem 1.5rem;gap:1.5rem}
 .name{font-size:2.4rem}.name em{font-size:1.7em}
 .meta{grid-template-columns:1fr;border-top:1px solid var(--line)}
 .meta div{border-right:0;border-bottom:1px solid var(--line);padding:.75rem 0}.meta div+div{padding-left:0}.meta div:last-child{border-bottom:0}
 .cards{grid-template-columns:1fr;padding:1.25rem 1rem 0;gap:.75rem}.bio{text-align:left;margin-bottom:.75rem}
 .card img{height:200px}
 .seq{padding:1rem 1rem 0;min-height:180px}.seq .lbl{flex-direction:column;gap:.15rem}
 .w{grid-template-columns:2rem minmax(0,1fr);grid-template-areas:"i t" ". meta";padding:.8rem 1rem;gap:.35rem 1rem}
 .w .i{grid-area:i}.w .t{grid-area:t}.w .y{grid-area:meta}.w .go{grid-area:meta;justify-self:end}
 .deck{height:88vh}
}

/* photo card: acid green behind the figure, photo as black duotone */
.cards{background:var(--coral);color:#161616;padding:1.25rem 1.5rem 0;align-items:end}
.card img{filter:grayscale(1) contrast(1.25) brightness(.95);mix-blend-mode:multiply;height:clamp(200px,21vw,270px)}
.card figcaption,.bio{color:#161616}
.card figcaption b{color:#161616}
.bio{opacity:.8}


/* name: Barbora outlined and light, Šandová heavy upright (approved AG1) */
.name{color:transparent;-webkit-text-stroke:1px var(--hot);font-weight:300;font-size:clamp(2.2rem,5vw,5rem);letter-spacing:-.01em;line-height:1}
.name em{display:block;color:var(--hot);-webkit-text-stroke:0;font-weight:700;font-style:normal;font-size:1.7em;letter-spacing:-.045em;line-height:.95;margin-top:.05em}
@media (max-width:64rem){.name{font-size:2.2rem}.name em{font-size:1.7em}}

/* ---------- sections below the hero ---------- */
.sec{border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sec-h{padding:2.5rem 1.5rem;border-right:1px solid var(--line)}
.sec-h h2{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.04em;line-height:1;margin:0 0 .75rem;color:var(--hot)}
.sec-h p{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);margin:0;max-width:26rem;line-height:1.8}
.tx{display:flex;flex-direction:column}
.tx-row{display:grid;grid-template-columns:2.5rem minmax(0,1fr) auto auto;gap:1.25rem;align-items:baseline;padding:1.25rem 1.5rem;border-bottom:1px solid var(--line)}
.tx-row .i,.tx-row .y,.tx-row .go{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2)}
.tx-row .t{font-family:var(--serif);font-weight:400;font-size:clamp(1.15rem,1.7vw,1.5rem);letter-spacing:-.01em;line-height:1.15;color:var(--hot)}
.tx-row .t em{font-style:italic;font-weight:300}
.tx-row .t small{display:block;font-family:var(--sans);font-size:.85rem;line-height:1.5;color:var(--fg-2);margin-top:.5rem;letter-spacing:0;max-width:40rem}
.tx-row .go{color:var(--fg)}
a.tx-row:hover{background:var(--coral)}a.tx-row:hover .t,a.tx-row:hover .t small,a.tx-row:hover .i,a.tx-row:hover .y,a.tx-row:hover .go{color:#161616}
.tx-row.soon .go{color:var(--fg-2)}
.about{display:grid;grid-template-columns:minmax(0,1fr);}
.about-txt{padding:2.5rem 1.5rem 1rem}
.about-txt p{font-size:1.02rem;line-height:1.6;margin:0 0 1rem;color:var(--fg);max-width:40rem}
.about-txt b{color:var(--hot);font-weight:500}
.about-facts{margin:0;padding:0 1.5rem 1.5rem;border-top:1px solid var(--line)}
.about-facts div{display:grid;grid-template-columns:8rem 1fr;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;line-height:1.8}
.about-facts dt{color:var(--fg-2);margin:0}.about-facts dd{margin:0;color:var(--fg)}
.contact{padding:2.5rem 1.5rem}
.mail{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,3vw,2.6rem);letter-spacing:-.02em;color:var(--hot);border-bottom:2px solid var(--coral);display:inline-block;line-height:1.1}
.mail:hover{color:var(--coral)}
.links{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);margin:1.25rem 0 0}
.links a{color:var(--fg)}.links a:hover{color:var(--coral)}
.foot{border-top:1px solid var(--line);padding:1.25rem 1.5rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2)}
@media (max-width:64rem){.sec{grid-template-columns:1fr}.sec-h{border-right:0;border-bottom:1px solid var(--line);padding:1.75rem 1rem}.tx-row{grid-template-columns:2rem minmax(0,1fr);grid-template-areas:"i t" ". m";padding:1rem}.tx-row .i{grid-area:i}.tx-row .t{grid-area:t}.tx-row .y{grid-area:m}.tx-row .go{grid-area:m;justify-self:end}.about-txt,.contact{padding:1.5rem 1rem}.about-facts{padding:0 1rem 1rem}.about-facts div{grid-template-columns:6rem 1fr}}

/* ---------- section bands (I–IV) ---------- */
.sec{display:block;border-top:0}
.band-h{display:grid;grid-template-columns:4.5rem minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:baseline;padding:1.1rem 1.5rem;border-top:3px solid var(--hot);border-bottom:1px solid var(--line);background:var(--bg-2)}
.band-h .n{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--coral)}
.band-h h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.035em;line-height:1;margin:0;color:var(--hot)}
.band-h p{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);margin:0;text-align:right;line-height:1.7}
.sec .works{border-top:0}
.w{grid-template-columns:4.5rem minmax(0,1fr) auto auto;padding:1.1rem 1.5rem;gap:1.5rem}
.w .t{font-size:clamp(1.2rem,1.8vw,1.6rem)}
.tx-row{grid-template-columns:4.5rem minmax(0,1fr) auto auto;gap:1.5rem}
.about{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.about-facts{border-top:0;border-left:1px solid var(--line);padding:1.25rem 1.5rem}
.about-txt{padding:2rem 1.5rem}
@media (max-width:64rem){.band-h{grid-template-columns:3rem 1fr;padding:.9rem 1rem}.band-h p{grid-column:1/-1;text-align:left}.about{grid-template-columns:1fr}.about-facts{border-left:0;border-top:1px solid var(--line);padding:1rem}.w,.tx-row{grid-template-columns:3rem minmax(0,1fr)}}


/* ---------- quieter sections (2026-09-14, "přeplácaný") ---------- */
.band-h{background:transparent;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.8rem 1.5rem;grid-template-columns:4.5rem minmax(0,1fr) minmax(0,1fr)}
.band-h h2{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg)}
.band-h .n{font-size:11px}
.band-h p{font-size:10px;color:var(--fg-2)}
.w,.tx-row{padding:.9rem 1.5rem;gap:1.25rem;align-items:baseline}
.w .t,.tx-row .t{font-size:1.2rem;font-weight:400}
.w .t small,.tx-row .t small{font-size:.82rem;margin-top:.25rem;color:var(--fg-2)}
.w .i,.w .y,.w .go,.tx-row .i,.tx-row .y,.tx-row .go{font-size:10px}
.w:hover,a.tx-row:hover{background:var(--coral);color:#161616}
.w:hover .t,.w:hover .t small,.w:hover .i,.w:hover .y,.w:hover .go,#listen:hover .go{color:#161616}
.tx-row.soon .t small{max-width:44rem}
.about-txt p{font-size:.98rem}
.mail{font-size:clamp(1.3rem,2.4vw,2rem)}

/* ---------- projects by theme ---------- */
.grp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);border-bottom:1px solid var(--line)}
.grp-h{padding:1.5rem 1.5rem;border-right:1px solid var(--line)}
.grp-h .n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--coral)}
.grp-h h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:-.02em;line-height:1.05;margin:.35rem 0 .6rem;color:var(--hot)}
.grp-h p{font-size:.85rem;line-height:1.5;color:var(--fg-2);margin:0;max-width:24rem}
.prj{grid-column:2;padding:1.1rem 1.5rem;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.35rem 2rem;align-items:start}
.prj:last-child{border-bottom:0}
.prj-t{font-family:var(--serif);font-weight:400;font-size:1.25rem;letter-spacing:-.01em;line-height:1.15;color:var(--hot)}
.prj-t em{font-style:italic;font-weight:300}
a.prj-t:hover{color:var(--coral)}
.prj p{grid-column:1;margin:0;font-size:.88rem;line-height:1.5;color:var(--fg-2);max-width:44rem}
.out{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;align-items:flex-end;gap:.35rem}
.chip{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:.35rem .6rem;border:1px solid var(--line);color:var(--fg)}
.chip.hot{background:var(--coral);color:#161616;border-color:var(--coral)}
.chip.y{border:0;color:var(--fg-2);padding:.35rem 0}
.chip.soon{color:var(--fg-2)}
a.chip:hover{background:var(--hot);color:#161616;border-color:var(--hot)}
@media (max-width:64rem){.grp{grid-template-columns:1fr}.grp-h{border-right:0;border-bottom:1px solid var(--line);padding:1.25rem 1rem}.prj{grid-column:1;grid-template-columns:1fr;padding:1rem}.out{grid-column:1;grid-row:auto;flex-direction:row;flex-wrap:wrap;align-items:center;margin-top:.5rem}}


/* projects: title + chips on one line, description below (fix for the stretched rows) */
.grp{grid-template-columns:minmax(0,1fr) minmax(0,2.4fr)}
.grp-h{padding:1.25rem 1.5rem}
.grp-h h3{font-size:1.5rem;margin:.3rem 0 .5rem}
.grp-h p{font-size:.82rem}
.prj{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:.4rem 1.5rem;align-items:baseline;padding:1rem 1.5rem}
.prj-t{grid-column:1;grid-row:1}
.out{grid-column:2;grid-row:1;flex-direction:row;align-items:center;gap:.4rem}
.prj p{grid-column:1/-1;grid-row:2;max-width:52rem}
.chip{padding:.3rem .55rem}
@media (max-width:64rem){.prj{grid-template-columns:1fr}.prj-t,.out,.prj p{grid-column:1}.out{grid-row:3;margin-top:.25rem}.prj p{grid-row:2}}