:root{--paper:#F8F7F3;--ink:#0C0B08;--stone:#75706A;--warm:#A09080;--line:rgba(12,11,8,.1)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'Barlow',sans-serif;font-weight:300;overflow-x:hidden}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.08;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");background-size:220px 220px}
#bar{position:fixed;top:0;left:0;height:1px;width:0%;background:var(--ink);z-index:9998}

nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:1.2rem 2.5rem;background:rgba(248,247,243,.92);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
nav.on{border-color:var(--line)}
.nav-id{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{font-size:.6rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--stone);transition:color .2s}
.nav-links a:hover{color:var(--ink)}

/* HERO */
#hero{height:100vh;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:grayscale(.12) brightness(.6) contrast(1.12) saturate(.65)}
#hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.17;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");background-size:180px 180px}
#hero::before{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(to bottom,rgba(12,11,8,.22) 0%,transparent 35%,rgba(12,11,8,.68) 100%)}
.hero-top{position:relative;z-index:3;display:flex;justify-content:space-between;padding:5.2rem 2.5rem 0;font-size:.54rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:rgba(248,247,243,.5)}
.hero-name{position:relative;z-index:3;padding:0 2.5rem;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(5rem,15vw,14rem);line-height:.88;letter-spacing:-.01em;text-transform:uppercase;color:#E0DAD0;flex:1;display:flex;flex-direction:column;justify-content:center}
.hero-name .ghost{-webkit-text-stroke:1.5px rgba(248,247,243,.35);color:transparent}
.hero-bottom{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;padding:0 2.5rem 2.2rem}
.h-src{display:flex;gap:2.5rem}
.h-cell{display:flex;flex-direction:column;gap:.22rem}
.h-lbl{font-size:.5rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:rgba(248,247,243,.32)}
.h-val{font-size:.68rem;font-weight:300;color:rgba(248,247,243,.65)}
.h-btns{display:flex;gap:.8rem}
.btn{font-family:'Barlow',sans-serif;font-size:.58rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:.72rem 1.6rem;cursor:pointer;transition:all .2s}
.btn-w{border:1px solid rgba(248,247,243,.45);color:#E0DAD0;background:transparent}
.btn-w:hover{background:rgba(248,247,243,.12)}
.btn-d{background:#E0DAD0;color:var(--ink);border:1px solid #E0DAD0}
.btn-d:hover{background:#fff;border-color:#fff}

section{padding:5.5rem 2.5rem;border-top:1px solid var(--line);opacity:0;transform:translateY(.9rem);transition:opacity .65s ease,transform .65s ease}
section.vis{opacity:1;transform:none}
.lbl{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3.5rem;padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.ll{font-size:.52rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--stone)}
.lr{font-size:.52rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--warm)}
h2{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(2.5rem,5.5vw,4.8rem);line-height:.95;letter-spacing:-.01em;text-transform:uppercase;margin-bottom:3rem}

.img-frame{position:relative;overflow:hidden}
.img-frame img{width:100%;display:block;filter:brightness(.88) saturate(.68) contrast(1.07)}
.img-frame::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.2;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");background-size:180px 180px}
.img-cap{margin-top:.7rem;display:flex;justify-content:space-between;font-size:.48rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--warm)}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:.55fr 1fr;gap:5rem;align-items:start}
.about-text .lead{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1.2;text-transform:uppercase;letter-spacing:.01em;margin-bottom:1.8rem}
.about-text p{font-size:.88rem;line-height:1.95;color:var(--stone);margin-bottom:1.1rem}
.about-text strong{color:var(--ink);font-weight:500}
.meta-t{width:100%;border-collapse:collapse;margin-top:2rem}
.meta-t tr{border-bottom:1px solid var(--line)}
.meta-t td{padding:.8rem 0;vertical-align:top}
.mk{font-size:.48rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--warm);width:40%;padding-right:1rem}
.mv{font-size:.8rem;font-weight:300;color:var(--ink)}

/* PRAKTIKUM BANNER */
.praktikum-bar{
  background:var(--ink);color:var(--paper);
  padding:2.5rem 2.5rem;
  display:flex;justify-content:space-between;align-items:center;
  border-top:2px solid var(--ink);
}
.pb-label{font-size:.52rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:rgba(248,247,243,.4)}
.pb-title{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(1.5rem,3vw,2.5rem);text-transform:uppercase;letter-spacing:-.01em;margin:.4rem 0}
.pb-detail{font-size:.78rem;color:rgba(248,247,243,.55)}
.pb-right{text-align:right}
.pb-dauer{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:1.1rem;text-transform:uppercase;color:rgba(248,247,243,.6)}

/* HOBBIES */
#hobbies{background:var(--ink);border-top-color:transparent;padding:5.5rem 0}
#hobbies .lbl{margin:0 2.5rem 3.5rem;border-color:rgba(248,247,243,.1)}
#hobbies .ll{color:rgba(248,247,243,.28)}
#hobbies .lr{color:rgba(248,247,243,.14)}
#hobbies h2{color:#E0DAD0;padding:0 2.5rem}
.hob-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.hob-card{position:relative;overflow:hidden;cursor:default}
.hob-card::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.22;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");background-size:180px 180px}
.hob-img{width:100%;min-height:380px;max-height:520px;display:block;object-fit:cover;filter:grayscale(.92) brightness(.62) contrast(1.14);transition:filter .7s,transform .8s}
.hob-card:hover .hob-img{filter:grayscale(.3) brightness(.52) contrast(1.18);transform:scale(1.04)}
.hob-meta{position:absolute;inset:0;z-index:4;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:1.2rem 1.5rem}
.hm-top{display:flex;justify-content:space-between}
.hm-bot{display:flex;justify-content:space-between;align-items:flex-end}
.arch{font-size:.5rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:rgba(248,247,243,.38)}
.hob-title{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(2rem,5vw,3.8rem);text-transform:uppercase;letter-spacing:-.01em;line-height:.92;color:#E0DAD0;transform:translateY(.3rem);transition:transform .4s}
.hob-card:hover .hob-title{transform:none}

/* SKILLS */
.sk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line)}
.sk{padding:1.8rem 1.6rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .22s}
.sk:hover{background:rgba(12,11,8,.04)}
.sk:nth-child(3n){border-right:none}
.sk:nth-last-child(-n+3){border-bottom:none}
.sk-n{font-size:.48rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--warm);margin-bottom:.5rem}
.sk-name{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.15rem;text-transform:uppercase;letter-spacing:.01em;margin-bottom:.5rem}
.sk-items{font-size:.72rem;color:var(--stone);line-height:1.85}
.sk-track{margin-top:1rem;height:1px;background:var(--line);position:relative}
.sk-fill{position:absolute;inset:0 auto 0 0;background:var(--ink);width:0;transition:width 1.3s cubic-bezier(.22,1,.36,1)}

/* EXPERIENCE */
.tl{display:flex;flex-direction:column}
.tl-row{display:grid;grid-template-columns:9rem 1fr;gap:2.5rem;padding:2.3rem 0;border-bottom:1px solid var(--line)}
.tl-row:first-child{padding-top:0}
.tl-row:last-child{border-bottom:none}
.tl-date{font-size:.56rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--warm);line-height:1.9;padding-top:.2rem}
.tl-row h3{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.35rem;text-transform:uppercase;letter-spacing:.01em;margin-bottom:.15rem}
.tl-org{font-size:.56rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);margin-bottom:.85rem}
.tl-txt{font-size:.84rem;color:var(--stone);line-height:1.9;margin-bottom:1rem}
.tags{display:flex;flex-wrap:wrap;gap:.35rem}
.tag{font-size:.55rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;background:rgba(12,11,8,.06);color:var(--stone);padding:.2rem .6rem}

/* EDU + LANG */
.edu-lang{display:grid;grid-template-columns:1.1fr 1fr;gap:5rem;align-items:start}
.edu-list{display:flex;flex-direction:column;gap:1.2rem}
.edu-card{padding:1.6rem;border-left:2px solid var(--ink);background:rgba(12,11,8,.03)}
.edu-per{font-size:.48rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--warm);margin-bottom:.4rem}
.edu-card h3{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.05rem;text-transform:uppercase;letter-spacing:.01em;margin-bottom:.2rem}
.edu-school{font-size:.75rem;color:var(--stone);margin-bottom:.5rem}
.edu-desc{font-size:.75rem;color:var(--stone);line-height:1.8}
.lang-sub{font-size:.5rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--stone);margin-bottom:2rem}
.lang-list{display:flex;flex-direction:column;gap:1.8rem}
.lang-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}
.lang-n{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.5rem;text-transform:uppercase;letter-spacing:.01em}
.lang-lv{font-size:.55rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.lang-bar{height:1px;background:var(--line);position:relative}
.lang-fill{position:absolute;inset:0 auto 0 0;background:var(--ink);width:0;transition:width 1.3s cubic-bezier(.22,1,.36,1)}

/* CONTACT */
#contact{position:relative;overflow:hidden;border-top-color:transparent}
.c-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(.98) brightness(.16) contrast(1.18)}
#contact::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.15;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");background-size:180px 180px}
#contact::before{content:'';position:absolute;inset:0;z-index:2;background:rgba(12,11,8,.5)}
.c-inner{position:relative;z-index:3}
#contact .lbl{border-color:rgba(248,247,243,.08)}
#contact .ll{color:rgba(248,247,243,.28)}
#contact .lr{color:rgba(248,247,243,.14)}
#contact h2{color:#E0DAD0}
.c-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:6rem;align-items:start}
.c-intro{font-family:'Barlow Condensed',sans-serif;font-weight:300;font-style:italic;font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.4;color:rgba(248,247,243,.48);margin-bottom:2.5rem}
.c-btn{display:inline-block;font-size:.58rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:.78rem 1.9rem;border:1px solid rgba(248,247,243,.35);color:#E0DAD0;background:transparent;transition:all .2s}
.c-btn:hover{background:#E0DAD0;color:var(--ink);border-color:#E0DAD0}
.clinks{display:flex;flex-direction:column}
.clink{display:flex;justify-content:space-between;align-items:center;padding:1.1rem 0;border-bottom:1px solid rgba(248,247,243,.07);text-decoration:none;color:#E0DAD0;transition:padding-left .2s;cursor:pointer}
.clink:first-child{border-top:1px solid rgba(248,247,243,.07)}
.clink:hover{padding-left:.5rem}
.clink-lbl{font-size:.48rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(248,247,243,.28);display:block;margin-bottom:.12rem}
.clink-val{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.95rem;text-transform:uppercase}
.c-arr{color:rgba(248,247,243,.22)}
footer{background:var(--ink);padding:1.3rem 2.5rem;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(248,247,243,.05)}
footer span{font-size:.48rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:rgba(248,247,243,.18)}

@keyframes fadeUp{from{opacity:0;transform:translateY(.7rem)}to{opacity:1;transform:none}}
.ha>*{opacity:0;animation:fadeUp .7s ease forwards}
.ha>*:nth-child(1){animation-delay:.1s}.ha>*:nth-child(2){animation-delay:.28s}.ha>*:nth-child(3){animation-delay:.46s}

@media(max-width:700px){
  nav{padding:1.1rem 1.5rem}.nav-links{display:none}
  section{padding:4rem 1.5rem}
  #hobbies{padding:4rem 0}
  #hobbies h2,.lbl{padding-left:1.5rem!important;padding-right:1.5rem!important;margin-left:0!important;margin-right:0!important}
  .about-grid,.c-grid,.edu-lang{grid-template-columns:1fr;gap:3rem}
  .hob-grid,.strip{grid-template-columns:1fr}
  .sk-grid{grid-template-columns:1fr}
  .sk{border-right:none}
  .sk:nth-last-child(-n+3){border-bottom:1px solid var(--line)}.sk:last-child{border-bottom:none}
  .tl-row{grid-template-columns:1fr;gap:.5rem}
  .praktikum-bar{flex-direction:column;gap:1.5rem;text-align:left}
  footer{flex-direction:column;gap:.4rem;text-align:center}
}

  /* Portrait photo — natural look */
  #about-grid .img-frame img {
    filter: brightness(.95) saturate(.88) contrast(1.03);
    max-width: 320px;
  }
  #about-grid .img-frame { max-width: 320px; }


.proj-featured{
  grid-column: 1 / -1;
  border-bottom: 1px solid var(--line);
  padding: 2.5rem 2rem;
}
.proj-featured:hover{ background: rgba(12,11,8,.04); }
.proj-feat-header{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: baseline;
  margin-bottom: 1.5rem;
}
.proj-feat-title{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;
  font-size:clamp(1.6rem,3vw,2.4rem);text-transform:uppercase;
  letter-spacing:-.01em;line-height:1;
}
.proj-feat-desc{
  font-size:.84rem;color:var(--stone);line-height:1.85;
  margin-bottom:1.5rem;max-width:56rem;
}


.proj-screenshots .proj-ss img{
  width:100%;display:block;
  transition:transform .5s ease;
}



@media(max-width:700px){
  .proj-featured{ grid-column:1; }
  
}

/* PROJECTS CAROUSEL */
#projects{background:var(--ink);border-top-color:transparent;padding:5.5rem 0}
#projects .lbl{margin:0 2.5rem 1rem;border-color:rgba(248,247,243,.1)}
#projects .ll{color:rgba(248,247,243,.28)}
#projects .lr{color:rgba(248,247,243,.14)}
#projects h2{color:#E0DAD0;padding:0 2.5rem;margin-bottom:2.5rem}
.carousel{
  display:flex;gap:2px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  padding:0 2.5rem;cursor:grab;user-select:none;
}
.carousel:active{cursor:grabbing}
.carousel::-webkit-scrollbar{height:2px}
.carousel::-webkit-scrollbar-track{background:rgba(248,247,243,.06)}
.carousel::-webkit-scrollbar-thumb{background:rgba(248,247,243,.25)}
.proj-card-c{
  flex:0 0 36vw;min-width:260px;max-width:440px;
  scroll-snap-align:start;position:relative;overflow:hidden;
  cursor:pointer;background:#1A1912;
}
.proj-card-c::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:.2;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
.proj-card-c img{width:100%;height:340px;object-fit:cover;display:block;
  filter:grayscale(.85) brightness(.58) contrast(1.12);transition:filter .6s,transform .7s}
.proj-card-c:hover img{filter:grayscale(.2) brightness(.48) contrast(1.18);transform:scale(1.04)}
.proj-card-info{
  position:absolute;bottom:0;left:0;right:0;z-index:3;
  padding:1.4rem 1.5rem;
  background:linear-gradient(to top,rgba(10,10,8,.92) 0%,transparent 100%);
  transform:translateY(.3rem);transition:transform .35s;
}
.proj-card-c:hover .proj-card-info{transform:none}
.proj-card-num{font-size:.5rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(248,247,243,.38);margin-bottom:.3rem}
.proj-card-title{font-family:'Barlow Condensed',sans-serif;font-weight:800;
  font-size:1.2rem;text-transform:uppercase;letter-spacing:.01em;
  color:#E0DAD0;line-height:1.1}
.proj-card-sub{font-size:.58rem;color:rgba(248,247,243,.4);margin-top:.25rem;letter-spacing:.06em}

/* Arrows + dots */
.car-footer{display:flex;justify-content:space-between;align-items:center;padding:.8rem 2.5rem 0}
.carousel-dots{display:flex;gap:.5rem}
.cdot{width:2rem;height:1px;background:rgba(248,247,243,.15);cursor:pointer;transition:background .3s}
.cdot.active{background:rgba(248,247,243,.55)}
.carousel-arrows{display:flex;gap:.5rem}
.carr-btn{
  width:2.4rem;height:2.4rem;
  border:1px solid rgba(248,247,243,.2);background:transparent;
  color:rgba(248,247,243,.55);font-size:.95rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .2s;
}
.carr-btn:hover{background:rgba(248,247,243,.1);color:#E0DAD0;border-color:rgba(248,247,243,.4)}

/* PROJECT DETAIL OVERLAY */
.proj-detail{
  position:fixed;inset:0;z-index:9000;
  background:var(--paper);overflow-y:auto;
  opacity:0;pointer-events:none;
  transform:translateX(3rem);
  transition:opacity .35s ease,transform .35s ease;
}
.proj-detail.open{opacity:1;pointer-events:all;transform:none}
.det-nav{
  position:sticky;top:0;z-index:10;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.2rem 2.5rem;
  background:rgba(248,247,243,.95);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.det-back{
  font-family:'Barlow',sans-serif;font-size:.62rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  background:none;border:none;cursor:pointer;color:var(--stone);
  display:flex;align-items:center;gap:.5rem;transition:color .2s;
}
.det-back:hover{color:var(--ink)}
.det-nav-title{font-family:'Barlow Condensed',sans-serif;font-weight:800;
  font-size:1rem;text-transform:uppercase;letter-spacing:.02em}
.det-body{padding:4rem 2.5rem 6rem;max-width:860px;margin:0 auto}
.det-ey{font-size:.52rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--warm);margin-bottom:1rem}
.det-h1{font-family:'Barlow Condensed',sans-serif;font-weight:800;
  font-size:clamp(2.5rem,6vw,5rem);text-transform:uppercase;
  line-height:.95;letter-spacing:-.01em;margin-bottom:2rem}
.det-desc{font-size:.9rem;line-height:1.95;color:var(--stone);
  margin-bottom:2rem;max-width:620px}
.det-divider{font-size:.5rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--warm);margin:2.5rem 0 1rem;padding-top:2rem;border-top:1px solid var(--line)}
.det-img-full{margin-bottom:1rem}
.det-img-full img{width:100%;display:block;border:1px solid var(--line)}
.det-img-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.det-img-2 img{width:100%;display:block;border:1px solid var(--line)}
.det-cap{font-size:.48rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--warm);margin-top:.4rem}

@media(max-width:700px){
  .proj-card-c{flex:0 0 78vw}
  .det-img-2{grid-template-columns:1fr}
  .det-body{padding:3rem 1.5rem 5rem}
  .det-nav{padding:1rem 1.5rem}
}

/* Project detail: show via :target (direct link) or .open (JS) */
.proj-detail:target {
  opacity: 1;
  pointer-events: all;
  transform: none;
}
.proj-detail:target ~ * { /* prevent scroll when overlay open */
}

/* ══════════════════════════════════════════════════════════
   SPARMODUS für leistungsschwache Geräte (z.B. Raspberry Pi)
   Wird per JS als class="lite" am <html> gesetzt.
   Entfernt genau die Effekte, die pro Scroll-Bild neu
   berechnet werden müssen. Layout und Typografie bleiben.
   ══════════════════════════════════════════════════════════ */

/* Filmkorn: der fixierte Vollbild-Layer ist der teuerste Effekt der Seite,
   weil mix-blend-mode bei jedem Scroll-Bild die ganze Ansicht neu mischt. */
html.lite body::after,
html.lite #hero::after,
html.lite #contact::after,
html.lite .img-frame::after,
html.lite .hob-card::after,
html.lite .proj-card-c::after{ display:none }

/* Weichzeichner hinter der Navigation: wird bei jedem Scroll-Bild neu gerendert. */
html.lite nav{ backdrop-filter:none; background:rgba(248,247,243,.97) }
html.lite .det-nav{ backdrop-filter:none; background:rgba(248,247,243,.98) }

/* Bildfilter auf einen Durchgang reduzieren statt drei. */
html.lite .hero-photo{ filter:grayscale(.35) }
html.lite .c-photo{ filter:grayscale(1) brightness(.2) }
html.lite .hob-img,
html.lite .proj-card-c img,
html.lite .img-frame img{ filter:grayscale(.85) }

/* Hover-Bewegung und Einblendungen abschalten. */
html.lite .hob-card:hover .hob-img,
html.lite .proj-card-c:hover img{ transform:none }
html.lite .hob-img,
html.lite .proj-card-c img{ transition:none }
html.lite section{ opacity:1; transform:none; transition:none }
html.lite .carousel{ scroll-behavior:auto }
html.lite .proj-detail{ transition:opacity .2s ease; transform:none }

/* Wer im Betriebssystem reduzierte Bewegung eingestellt hat, bekommt dasselbe. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* Sichtbarer Tastaturfokus. */
a:focus-visible,button:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
}