/* Vizlin · September 2026
   Visual refinements on top of the original site's design.
   No build step and no external animation library. */
:root {
  --body:#b5c0cf;
  --muted:#97a6ba;
  --line:rgba(180,203,234,.15);
  --pad:clamp(22px,5vw,70px);
}
body {font-weight:400;font-size:16px;}
body::before,body::after {display:none;}
a,button,summary {-webkit-tap-highlight-color:transparent;}
button,summary {touch-action:manipulation;}
[hidden] {display:none!important;}
:focus-visible {outline:2px solid #aad2ff;outline-offset:6px;border-radius:3px;}
main:focus {outline:none;}
.skip-link {position:fixed;left:20px;top:12px;z-index:10002;padding:12px 18px;background:#eef5ff;color:#08111d;transform:translateY(-180%);}
.skip-link:focus {transform:none;}
.nav {gap:24px;padding-block:18px;min-height:76px;}
header {background:rgba(8,12,20,.35);}
header.scrolled {background:rgba(8,12,20,.93);}
.nav-links {gap:24px;margin-left:auto;align-items:center;}
.nav-links a {font-size:14px;min-height:40px;display:flex;align-items:center;}
.nav-links a::after {bottom:1px;}
.nav-links a[aria-current="location"] {color:#eff6ff;}
.nav-links a[aria-current="location"]::after {transform:scaleX(1);}
.nav-controls {display:flex;align-items:center;gap:12px;flex-shrink:0;}
.motion-toggle,.nav-toggle {font:400 12px var(--mono);letter-spacing:0;color:#c6d5e8;min-height:40px;padding:8px 12px;background:rgba(11,20,33,.65);border:1px solid var(--line);border-radius:4px;cursor:pointer;}
.motion-toggle:hover,.nav-toggle:hover {color:#fff;border-color:#739bcf;}
.motion-toggle[aria-pressed="true"] {color:#b9d8ff;border-color:#6b8db6;}
.hero {min-height:850px;min-height:max(800px,100svh);align-items:center;}
.hero-inner {padding-block:135px 76px;will-change:auto;}
.hero-inner::before {display:none;}
.hero-art {overflow:hidden;}
.hero-art .bg-layer {opacity:.3;object-position:75% center;}
.scrim-hero {background:linear-gradient(90deg,#080c14 0%,rgba(8,12,20,.98) 25%,rgba(8,12,20,.7) 50%,rgba(8,12,20,.18) 80%),linear-gradient(0deg,#080c14 0%,transparent 28%,transparent 80%,rgba(8,12,20,.7));}
.plexus {z-index:2;opacity:1;mix-blend-mode:screen;}
.hero h1 {font-size:clamp(64px,7.3vw,104px);line-height:1.15;margin:15px 0 22px;color:var(--name);letter-spacing:-.025em;max-width:7em;}
.hero h1::after {display:none;}
.hero h1 .mask {padding-bottom:.12em;}
.hero-mid {gap:28px;max-width:520px;flex-wrap:nowrap;}
.hero .lede {font-size:clamp(24px,2.35vw,31px);line-height:1.42;max-width:22ch;}
.hero-portrait {width:102px;aspect-ratio:1;transform:none;filter:drop-shadow(0 10px 20px #0008);}
.hero-cols {display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(32px,6vw,80px);max-width:none;margin-top:30px;}
.hero-cols>p {font-size:17px;line-height:1.75;max-width:48ch;}
.hero .note {margin-top:0;padding:16px 20px;max-width:48ch;font-size:15px;color:#b8c8da;background:rgba(8,12,20,.85);box-shadow:none;backdrop-filter:blur(3px);border-left-color:#416587;text-shadow:none;}
.note::before {display:none;}
.note a {font-size:14px;margin-top:10px;text-shadow:none;letter-spacing:0;}
.hero .eyebrow {font-size:12px;letter-spacing:.19em;}
.hero-actions {display:flex;align-items:center;flex-wrap:wrap;gap:26px;margin-top:30px;}
.primary-link {display:inline-flex;align-items:center;gap:30px;border:1px solid #668fc5;border-radius:5px;background:linear-gradient(115deg,#183552,#122337);padding:12px 20px;color:#edf5ff;font-size:15px;transition:background .2s,border-color .2s;}
.primary-link:hover {background:#234563;border-color:#afd2ff;}
.text-link {font-size:15px;color:#c7d6e9;border-bottom:1px solid #43556d;padding-block:7px;}
.cue {font-size:12px;letter-spacing:.16em;margin-top:36px;min-height:32px;}
.cue i::after {animation:none;transform:none;}
/* Text never waits for the particle animation or for image loading. */
.hero .eyebrow,.hero .lede,.hero .hero-cols>*,.hero .hero-cols,.hero .cue,.hero .up {opacity:1!important;transform:none!important;transition:none!important;}
.hero-name .up {color:var(--name);}
.eyebrow {font-size:12px;letter-spacing:.19em;}
.marquee {padding-block:22px;}
.marquee-track {gap:42px;}
.marquee-track span {font-size:23px;color:#a8b9cd;}
.marquee-track i {color:#89bafa;}
.band {padding-block:100px;}
.band::before {animation:none;transform:none;opacity:.4;background:linear-gradient(90deg,transparent,rgba(125,180,255,.4),transparent);}
.scrim-band {background:linear-gradient(180deg,#080c14 0%,rgba(8,12,20,.88) 20%,rgba(8,12,20,.9) 80%,#080c14 100%);}
.sec-head {padding-top:0;margin-bottom:52px;}
.sec-head h2 {font-size:clamp(34px,4.8vw,56px);line-height:1.15;}
.sec-head .eyebrow {display:block;margin-bottom:18px;}
.sec-head h2 em {font-weight:400;color:#adcded;}
.area p,.side p {font-size:16px;line-height:1.7;}
.area,.side {transition:background .3s,border-color .3s;}
.area:hover,.side:hover {transform:none;}
.area:hover .num {transform:none;}
.area {padding:32px 32px 38px 0;}
.area::before {content:"";position:absolute;top:-1px;left:0;width:0;height:1px;background:#a9ceff;box-shadow:0 0 12px #79a9ec;transition:width .6s ease;}
.area:hover::before,.area:focus-within::before {width:85%;}
em.kw {animation:none;background:none;-webkit-background-clip:initial;background-clip:initial;color:#b7d5f6;filter:none;}
.ghost {opacity:.18;align-items:flex-start;padding-top:25px;}
#texter,#om {background:#080c14;}
#texter>.kinetic-svg {display:none;}
.kinetic-svg {opacity:.25;}
.kinetic-svg .draw,.kinetic-svg.in .draw {animation:none;stroke-dashoffset:0;}
.kinetic-svg .node,.kinetic-svg.in .node {animation:none;}
.post-item {position:relative;scroll-margin-top:108px;padding-bottom:22px;}
.post {list-style:none;grid-template-columns:32px 1fr auto 20px;padding:30px 0 18px;gap:24px;color:var(--body);}
.post::-webkit-details-marker {display:none;}
.post::marker {content:"";}
.post:hover {padding-left:0;transform:none;background:none;}
.post::before {display:none;}
.post .meta {min-width:0;display:block;}
.post-title {display:block;font-family:var(--serif);font-weight:500;color:var(--text);font-size:clamp(22px,2.5vw,29px);line-height:1.3;margin-bottom:8px;transition:color .2s;}
.post:hover .post-title {color:#b7d5f6;}
.post-description {display:block;font-family:var(--sans);font-size:16px;color:#aab9cd;line-height:1.55;}
.post .time {font-size:12px;}
.post .arrow {font-size:25px;color:#b9d4f6;}
.post:hover .arrow {transform:none;color:#fff;}
details[open]>.post .arrow {transform:rotate(45deg);}
.post-full {max-width:76ch;margin-left:56px;padding:14px 0 28px;animation:none;color:#c0cbd9;}
.post-full p,.post-full li {font-size:17px;line-height:1.8;color:#bfcbdc;}
.post-full-app {max-width:88ch;}
.post-full .tags {font-size:12px;}
.post-full .cta {font-size:14px;letter-spacing:0;}
.permalink {margin-left:56px;display:inline-flex;align-items:center;gap:10px;min-height:32px;font:400 12px var(--mono);color:#afc4de;}
.permalink:hover {color:#fff;text-decoration:underline;text-underline-offset:5px;}
.post-item:target {border-bottom-color:#749ccc;}
.shots img {height:auto;}
.shots img:hover {transform:none;}
.projects {background:linear-gradient(180deg,#080c14,#0b121e 48%,#080c14);}
.projects .sec-head {align-items:flex-end;}
.projects .sec-sub {max-width:26ch;margin:0 0 6px;}
.project-grid {display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.project-card {display:flex;flex-direction:column;min-width:0;border:1px solid #2a3b51;border-radius:8px;overflow:hidden;background:#0c1522;transition:border-color .3s,box-shadow .3s;}
.project-card:hover,.project-card:focus-visible {border-color:#779fcc;box-shadow:0 15px 60px #0003;}
.project-visual {height:280px;overflow:hidden;position:relative;border-bottom:1px solid #243449;}
.project-copy {padding:30px;flex:1;display:flex;align-items:flex-start;flex-direction:column;}
.project-copy .eyebrow {font-size:12px;margin-bottom:12px;}
.project-copy h3 {color:#edf3fb;font:500 clamp(24px,2.8vw,32px)/1.25 var(--serif);margin-bottom:14px;}
.project-copy p {font-size:16px;line-height:1.7;margin-bottom:26px;max-width:41ch;}
.project-action {display:flex;align-items:center;gap:20px;font-size:15px;color:#d4e7ff;margin-top:auto;}
.project-action>span {transition:transform .25s;}
.project-card:hover .project-action>span {transform:translate(3px,-3px);}
.cost-visual {padding:44px 34px 28px;background:radial-gradient(ellipse at 80% 0%,#153651,transparent 70%),#0a1625;display:flex;flex-direction:column;gap:16px;}
.cost-line {display:grid;grid-template-columns:1fr;gap:5px;}
.cost-line span {font:400 12px var(--mono);color:#a5bbd7;}
.cost-line i {display:block;height:2px;width:100%;background:linear-gradient(90deg,#79b8ee,#24527c);transform-origin:left;}
.cost-line:nth-child(1) i {background:linear-gradient(90deg,#d9be87,#584d39);}
.cost-caption {font:400 24px var(--serif);color:#e8f2ff;margin-top:4px;}
.app-visual {background:radial-gradient(ellipse at 50% 110%,#214550,transparent 75%),#0c1c27;display:flex;align-items:flex-start;justify-content:center;gap:16px;padding:30px 22px 0;}
.app-visual img {width:38%;max-width:170px;height:auto;border:1px solid #536a76;border-radius:15px;transform:translateY(8px) rotate(-5deg);box-shadow:0 18px 50px #0006;transition:transform .7s cubic-bezier(.2,.65,.3,1);}
.app-visual img+img {margin-top:28px;transform:translateY(8px) rotate(5deg);}
.project-card:hover .app-visual img {transform:translateY(0) rotate(-3deg);}
.project-card:hover .app-visual img+img {transform:translateY(0) rotate(3deg);}
.om-body p {font-size:17px;line-height:1.8;}
.chip .k,.foot .c {font-size:12px;}
.ig,.lk {font-size:13px;letter-spacing:.08em;display:inline-flex;align-items:center;min-height:40px;}
.mail {overflow-wrap:anywhere;font-size:clamp(22px,3.2vw,36px);}
.kontakt h2 {font-size:clamp(39px,6.5vw,78px);line-height:1.12;}
/* Optional reveal never hides essential content. */
.motion-ready .project-card {animation:projectAppear .8s both;animation-timeline:view();animation-range:entry 0% entry 80%;}
@keyframes projectAppear {from{transform:translateY(22px) scale(.98);}to{transform:none;}}
.motion-paused *,.motion-paused *::before,.motion-paused *::after {animation:none!important;transition:none!important;}
.motion-paused .bg-parallax,.motion-paused .marquee-track,.motion-paused .hero-portrait,.motion-paused .drift,.motion-paused .ghost span {transform:none!important;}
.motion-paused {scroll-behavior:auto;}
@media(max-width:1000px) {
  .nav-links {gap:16px;}
  .nav {gap:16px;}
  .hero h1 {font-size:82px;}
  .hero-cols {gap:32px;}
  .hero-art .bg-layer {opacity:.22;}
  .plexus {opacity:.7;}
}
@media(max-width:860px) {
  .nav {flex-wrap:wrap;min-height:70px;padding-block:14px;}
  .nav-controls {margin-left:auto;}
  .nav-links {order:3;display:flex;width:100%;flex-wrap:wrap;margin-left:0;gap:4px 20px;}
  .nav-links a {min-height:40px;}
  .nav-ready .nav-links {display:none;}
  .nav-ready .nav-links.open {display:flex;flex-direction:column;align-items:stretch;position:absolute;top:100%;left:0;right:0;gap:0;background:#0b1320;max-height:calc(100svh - 72px);overflow:auto;}
  .nav-links.open a {padding:14px var(--pad);}
  .nav-toggle {display:block;font-size:13px;}
  .hero-inner {padding-top:180px;padding-bottom:65px;}
  .nav-ready .hero-inner {padding-top:125px;}
  .hero {min-height:auto;}
  .hero h1 {font-size:clamp(60px,11vw,92px);max-width:100%;}
  .hero-mid {max-width:560px;}
  .hero-cols {display:block;max-width:50ch;}
  .hero .note {margin-top:22px;padding:0 0 0 18px;background:none;backdrop-filter:none;}
  .scrim-hero {background:linear-gradient(90deg,rgba(8,12,20,.99),rgba(8,12,20,.65)),linear-gradient(0deg,#080c14,transparent 65%);}
  .plexus {opacity:.4;}
  .band {padding-block:75px;}
  .sec-head {margin-bottom:36px;}
  .projects .sec-head {align-items:flex-start;flex-direction:column;gap:16px;}
  .projects .sec-sub {max-width:42ch;}
  .project-copy {padding:24px;}
  .project-visual {height:250px;}
  .cost-visual {padding:30px 24px;}
  .post {grid-template-columns:26px 1fr 20px;gap:16px;}
  .post .time {display:none;}
  .post-full,.permalink {margin-left:42px;}
}
@media(max-width:600px) {
  .project-grid {grid-template-columns:1fr;gap:24px;}
  .hero-mid {gap:18px;}
  .hero-portrait {width:80px;}
  .hero .lede {font-size:25px;}
  .hero h1 {font-size:clamp(54px,12.6vw,76px);}
  .hero-cols {margin-top:24px;}
  .hero .eyebrow {font-size:11px;letter-spacing:.12em;}
  .hero .note {font-size:15px;}
  .hero-actions {gap:18px;}
  .primary-link {gap:20px;padding:12px 16px;}
  .motion-toggle {padding:8px;font-size:11px;}
  .post-full,.permalink {margin-left:0;}
  .post-title {font-size:23px;}
  .post-description {font-size:15px;}
  .post-full p,.post-full li {font-size:16px;line-height:1.75;}
  .post .num {font-size:12px;}
  .post {gap:12px;grid-template-columns:22px 1fr 18px;}
  .area {gap:18px;}
  .area h3 {font-size:23px;}
  .project-visual {height:255px;}
  .foot {gap:12px;}
  .foot .c {letter-spacing:.08em;line-height:1.8;}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important;}
  .bg-parallax,.hero-portrait,.marquee-track,.drift,.ghost span {transform:none!important;}
  .plexus {display:block!important;}
}
@media print {
  body {background:white;color:#222;}
  header,.hero-art,.marquee,.progress,.skip-link,.kinetic-svg,.ghost,.hero-actions,.cue,.permalink,.bg-layer,.scrim {display:none!important;}
  .hero,.band {min-height:0;padding-block:24px;}
  .hero-inner {padding:0;}
  .wrap {max-width:none;padding:0;}
  .project-grid {display:block;}
  .project-card {break-inside:avoid;margin-bottom:20px;}
  .post-title,.hero h1,.hero .lede,.sec-head h2,.om-body p,.post-full p,.post-full li,.kontakt h2,.mail {color:#222;}
  .projects,#texter,#om {background:white;}
}