:root{--bg:#0d0d0c;--fg:#ebe9e3;--mute:#6f6c65;--line:#2a2926;--sel:#c6ff3d;--selfg:#0d0d0c}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.6 "Inter Tight",system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
figure{margin:0}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px}
::selection{background:var(--sel);color:var(--selfg)}

.grain{position:fixed;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;z-index:6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.scan{position:fixed;inset:0;pointer-events:none;z-index:4;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px)}

header{position:relative;z-index:2;display:flex;justify-content:space-between;padding:20px 32px}
header nav{display:flex;gap:20px}
header nav a::before{content:"["}header nav a::after{content:"]"}
header nav a:hover,header nav a.on{color:var(--sel)}

.back{position:relative;z-index:2;padding:0 32px;margin-top:2px}
.back a{color:var(--mute);transition:color .15s}
.back a:hover{color:var(--sel)}
.back a::before{content:"← "}

main{position:relative;max-width:1180px;margin:0 auto;padding:36px 32px 100px}

.meta{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start;border-bottom:1px solid var(--line);padding-bottom:28px;margin-bottom:36px}
h1{font-size:clamp(40px,6.5vw,88px);line-height:1;letter-spacing:-.02em;margin:0 0 6px;font-weight:500}
h1 sup{font:500 .22em/1 "IBM Plex Mono",monospace;letter-spacing:0;vertical-align:2.3em;margin-left:.2em;color:var(--sel)}
.tagline{color:var(--mute);font-size:16px;max-width:46ch;margin:10px 0 0}
.metablock{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;line-height:1.9;color:var(--mute);max-width:56ch}
.metablock .row{display:flex;gap:16px}
.metablock b{color:var(--fg);font-weight:500;min-width:8.5em;flex:0 0 auto}

.hero{position:relative;z-index:5;margin-bottom:44px}
.hero img{width:100%;display:block;filter:saturate(.94)}
.hero figcaption{margin-top:8px;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--mute)}

.gallery3{position:relative;z-index:5;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:44px}
.gallery3 img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;filter:saturate(.94)}

.vidwrap{position:relative;z-index:5;margin-bottom:24px;border:1px solid var(--line);background:#000}
.vidwrap iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.vidwrap .cap{padding:8px 12px;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--mute);display:flex;justify-content:space-between}

.vidgrid{position:relative;z-index:5;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
@media (max-width:760px){.vidgrid{grid-template-columns:1fr}}

.vidlist{border:1px solid var(--line);margin-bottom:44px}
.vidlist .hd{padding:10px 14px;border-bottom:1px solid var(--line);font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--mute)}
.vidlist ul{margin:0;padding:0;list-style:none}
.vidlist li{display:flex;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line);font-family:"IBM Plex Mono",monospace;font-size:12px}
.vidlist li:last-child{border-bottom:0}
.vidlist a{transition:color .15s}
.vidlist a:hover{color:var(--sel)}
.vidlist .t{color:var(--fg);min-width:11em}
.vidlist .d{color:var(--mute);margin-left:auto}

.body{display:grid;grid-template-columns:2fr 1fr;gap:60px}
.copy{max-width:64ch}
.copy p{margin:0 0 20px}
.copy blockquote{margin:0 0 20px;padding-left:16px;border-left:2px solid var(--line);color:var(--mute);font-size:15px}
.credit{font-size:13px;color:var(--mute)}

.side h2{font:500 12px/1 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);margin:0 0 14px}
.side + .side{margin-top:32px}
.rel a{display:block;padding:10px 0;border-bottom:1px solid var(--line);transition:color .15s}
.rel a:hover{color:var(--sel)}
.rel a sup{font-family:"IBM Plex Mono",monospace;font-size:.7em;color:var(--mute);margin-left:.5em}
.rel p{color:var(--mute);font-size:13px;margin:2px 0 0;max-width:32ch}

.press{padding:0;margin:0}
.press li{list-style:none;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;display:flex;gap:10px;justify-content:space-between}
.press li span.d{color:var(--mute);font-family:"IBM Plex Mono",monospace;font-size:11px;white-space:nowrap;padding-top:2px}

.link{display:inline-flex;align-items:center;gap:6px;font-family:"IBM Plex Mono",monospace;font-size:12px;border:1px solid var(--line);padding:8px 12px;transition:.15s}
.link:hover{border-color:var(--sel);color:var(--sel)}
.link::after{content:"↗"}

@media (max-width:900px){
  .meta{grid-template-columns:1fr}
  .body{grid-template-columns:1fr;gap:40px}
}
@media (max-width:760px){header{padding:14px 16px;flex-wrap:wrap;gap:6px 0}header nav{gap:10px;flex-wrap:wrap}.back{padding:0 16px}main{padding:24px 16px 60px}.gallery3{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- kuvat: älä rajaa (image_fit: contain) */
.nocrop img{aspect-ratio:auto!important;object-fit:contain!important}

/* ---- 4 kuvan mosaiikki (Somnifer) */
.gallery{position:relative;z-index:5;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:10px;gap:10px;margin-bottom:44px}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.94)}
.gallery figure{margin:0;position:relative;overflow:hidden}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--mute);
  background:linear-gradient(to top,rgba(13,13,12,.85),transparent);opacity:0;transition:opacity .15s}
.gallery figure:hover figcaption{opacity:1}
.g1{grid-column:1/5;grid-row:1/40}
.g2{grid-column:5/7;grid-row:1/20}
.g3{grid-column:5/7;grid-row:20/40}
.g4{grid-column:1/7;grid-row:40/58}
@media (max-width:900px){
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:120px}
  .g1{grid-column:1/3;grid-row:1/3}
  .g2{grid-column:1/2;grid-row:3/4}
  .g3{grid-column:2/3;grid-row:3/4}
  .g4{grid-column:1/3;grid-row:4/5}
}
.gallery3 figure{margin:0}
.rel span.nolink{display:block;padding:10px 0;border-bottom:1px solid var(--line)}
.rel span.nolink sup{font-family:"IBM Plex Mono",monospace;font-size:.7em;color:var(--mute);margin-left:.5em}
.rel a:hover sup{color:var(--sel)}
.side .note{font-size:14px;color:var(--mute);margin:0 0 10px}
.side .link + .link{margin-top:8px}
.todo-note{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--mute)}

/* ---- selaimessa toimiva teos (live) */
.live{border:1px solid var(--line);padding:16px;margin-top:10px}
.live .lbl{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--mute);margin-bottom:8px}
.live p{margin:0 0 10px;font-size:14px;color:var(--mute)}
.live a.btn{display:inline-flex;align-items:center;gap:8px;font-family:"IBM Plex Mono",monospace;font-size:12px;border:1px solid var(--line);padding:8px 12px;transition:.15s}
.live a.btn:hover{border-color:var(--sel);color:var(--sel)}
.live a.btn::after{content:"↗"}

/* ---- oma videotiedosto (Log): hehkuu kuin teoksen LED */
.videoblock{position:relative;z-index:5;margin-bottom:44px;border:1px solid var(--line);background:#000}
.videoblock video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.videoblock .frame{position:relative;aspect-ratio:16/9;overflow:hidden}
.videoblock img.poster{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85) brightness(.9)}
.videoblock .cap{display:flex;justify-content:space-between;padding:10px 14px;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--mute)}

/* ---- ääniraidat (Log) */
.player{border:1px solid var(--line)}
.player .hd{padding:12px 14px;border-bottom:1px solid var(--line);font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--mute)}
.player ul{margin:0;padding:0;list-style:none;max-height:340px;overflow:auto}
.player li{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line);font-family:"IBM Plex Mono",monospace;font-size:12px;cursor:pointer;transition:background .12s}
.player li:last-child{border-bottom:0}
.player li:hover{background:#151512}
.player li.playing{color:var(--sel);background:#151512}
.player .pdot{width:6px;height:6px;border-radius:50%;background:var(--mute);flex:0 0 auto}
.player li.playing .pdot{background:var(--sel);box-shadow:0 0 6px var(--sel)}
.player .voice{color:var(--fg);min-width:5.5em}
.player .dur{margin-left:auto;color:var(--mute)}

/* ---- Sound ja Workshops: vuosirivit */
.rows{margin:36px 0 0}
.rows h3{font:500 12px/1 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.row2{display:grid;grid-template-columns:5.5em 1fr;gap:14px;padding:6px 0;font-size:14px}
.row2 .y{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--mute);padding-top:2px}
.row2 .n{color:var(--mute)}
.row2 .n b{color:var(--fg);font-weight:500}
.row2 .n a:hover{color:var(--sel)}
details.log{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
details.log summary{cursor:pointer;list-style:none;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--mute)}
details.log summary::-webkit-details-marker{display:none}
details.log summary::before{content:"+ "}
details.log[open] summary::before{content:"\2013 "}
@media (max-width:760px){.row2{grid-template-columns:1fr}.row2 .y{padding-top:0}}

/* ---- About */
.page-about main{max-width:900px}
.page-about h1{font-size:clamp(40px,6.5vw,72px);margin:0 0 28px}
.bio{position:relative;z-index:5;max-width:68ch;margin-bottom:56px;border-bottom:1px solid var(--line);padding-bottom:40px}
.bio p{margin:0 0 20px;color:var(--fg)}
.page-about section{margin-bottom:48px}
.page-about section h2{font:500 12px/1 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cv-row{display:grid;grid-template-columns:5.5em 1fr;gap:16px;padding:7px 0;font-size:14.5px}
.cv-row .y{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--mute);padding-top:2px}
.cv-row .n{color:var(--mute)}
.cv-row .n b{color:var(--fg);font-weight:500}
.essay{border-bottom:1px solid var(--line);padding:12px 0}
.essay summary{cursor:pointer;list-style:none;font-size:15px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.essay summary::-webkit-details-marker{display:none}
.essay summary::after{content:"+";font-family:"IBM Plex Mono",monospace;color:var(--mute)}
.essay[open] summary::after{content:"\2013"}
.essay summary b{font-weight:500}
.essay .by{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--mute)}
.essay-body{max-width:66ch;padding-top:14px}
.essay-body p{margin:0 0 16px;font-size:15.5px;color:var(--fg)}
.essay-body .src{font-size:13px;color:var(--mute)}
#contact .links{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:760px){.cv-row{grid-template-columns:1fr}.cv-row .y{padding-top:0}}

/* ---- Etusivu: teosindeksi */
body.home{line-height:1.5}
.home .grain{opacity:.2;z-index:auto}
.home .scan{z-index:auto}
.bg{position:fixed;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .35s;filter:saturate(.9)}
.bg.on{opacity:.2}
.index{position:relative;z-index:2;padding:40px 32px 60px;font-size:clamp(34px,5.2vw,78px);line-height:1.13;letter-spacing:-.022em;max-width:1500px}
.index a{transition:color .15s}
.index sup{font:500 .19em/1 "IBM Plex Mono",monospace;letter-spacing:0;vertical-align:1.9em;margin-left:.15em;color:var(--mute);white-space:nowrap}
.index a.now sup{color:var(--c,var(--sel))}
.index a.early{font-size:.62em;vertical-align:.1em}
.index .dot{color:var(--mute);font-size:.24em;margin:0 1.1em 0 .8em;vertical-align:.7em;letter-spacing:0}
@media (min-width:761px){.index a{white-space:nowrap}}
.index:hover a{color:#3d3b37}
.index a:hover{color:var(--selfg)!important;background:var(--c,var(--sel))}
.index a:hover sup{color:var(--selfg)}
.index.demo a{color:#3d3b37}.index.demo a.h{color:var(--selfg)!important;background:var(--c,var(--sel))}.index.demo a.h sup{color:var(--selfg)}
.legend{position:relative;z-index:2;display:flex;gap:24px;padding:0 32px 28px;color:var(--mute)}
.legend b{font-weight:500}
.legend i{display:inline-block;width:10px;height:10px;margin-right:4px}
#clona{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
#clona .snap{position:absolute;inset:0;background:var(--bg);overflow:hidden}
#clona .snap>.page{position:absolute;left:0;right:0;padding-inline:0}
#clona .snap .bg{opacity:.26!important}
#clona .tint{position:absolute;inset:0}
.index.spin .dot{opacity:.3}
.index.demo a:not(.h):hover{background:none!important;color:#3d3b37!important}
.index.demo a:not(.h):hover sup{color:var(--mute)!important}
.index.all a{color:var(--selfg)!important;background:var(--c)}.index.all a sup{color:var(--selfg)!important}
.cur{display:inline-block;width:.5em;height:.9em;background:var(--fg);vertical-align:-.05em;animation:blink 1s steps(1) infinite;margin-left:.1em}
@keyframes blink{50%{opacity:0}}
@media (max-width:760px){.index{padding:24px 16px 40px}.legend{padding:0 16px 20px;flex-wrap:wrap;gap:8px 18px}}
@media (prefers-reduced-motion:reduce){.cur{animation:none}.bg{transition:none}}
@media (max-width:760px){.press li span.d{white-space:normal;text-align:right}}