/* ── reset ── */
*,*::before,*::after{box-sizing:border-box;border:0;}
html{line-height:1.3;-webkit-text-size-adjust:100%;}
:root{font-family:Inter,sans-serif;font-feature-settings:'liga' 1,'calt' 1;}
@supports(font-variation-settings:normal){:root{font-family:InterVariable,sans-serif;}}
body{margin:0;background:#fafafa;overflow:hidden;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;height:auto;}
p,span{margin:0;font-size:10.5pt;line-height:1.3;letter-spacing:-0.2px;font-weight:420;}
button{background:none;border:none;padding:0;cursor:pointer;font-family:inherit;font-size:inherit;}
::-webkit-scrollbar{display:none;}
*{-ms-overflow-style:none;scrollbar-width:none;}

/* ── dark mode ── */
body.dark{background:#0d0d0d;color:#e8e8e8;}
body.dark p,body.dark span,body.dark a{color:#e8e8e8;}
body.dark .panel-inner{background:#111;box-shadow:-6px 0 40px rgba(0,0,0,0.5);}
body.dark .panel-content{background:#111;}
body.dark img{filter:brightness(0.9);}
body.dark .info-label{color:#888;}
body.dark .info-value{color:#aaa;}

/* ── slide animations ── */
@keyframes slideIn{from{transform:translateX(100%);}to{transform:translateX(0);}}
@keyframes slideOut{from{transform:translateX(0);}to{transform:translateX(100%);}}

/* ── project panel overlay ── */
.project-overlay{
  position:fixed;
  top:0;right:0;bottom:0;left:0;
  overflow:hidden;
  z-index:10;
  pointer-events:none;
}

/* ── white panel that slides in ── */
.panel-inner{
  position:absolute;
  inset:0;
  overflow-y:auto;
  overflow-x:hidden;
  background:#fafafa;
  box-shadow:-6px 0 40px rgba(0,0,0,0.08);
  pointer-events:all;
  animation:slideIn 0.6s cubic-bezier(0.25,0.46,0.45,0.94) both;
}

.panel-inner.closing{
  animation:slideOut 0.38s cubic-bezier(0.55,0,1,0.45) both;
}

.panel-content{
  padding:16px;
  padding-bottom:120px;
  transition:transform 0.2s ease;
  transform-origin:top right;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:32px;
}


/* ── project info ── */
.text-block{
  grid-column:span 4;
  padding-bottom:24px;
}

.project-title{
  margin-bottom:0;
  font-size:10.5pt;
}

.project-subline{
  margin-bottom:20px;
}

.project-desc{
  margin-bottom:16px;
  line-height:1.3;
}

.info-rows{
  grid-column:1 / span 4;
  display:flex;
  flex-direction:column;
  gap:0;
  padding-top:0;
  padding-bottom:48px;
}

.info-row{
  display:flex;
  margin-bottom:0;
}

.info-label{
  width:96px;
  flex-shrink:0;
  color:#111;
}

.info-value{
  opacity:0.5;
  flex:1;
}

/* ── gallery ── */
.gallery{
  grid-column:1/-1;
  padding-bottom:0;
}

.img-ani{
  margin-bottom:12px;
}

.img-wrap{
  width:100%;
  border-radius:2px;
  display:block;
}

/* ── next project arrow ── */
.next-project-btn {
  grid-column: 8 / 9;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-bottom: 48px;
  color: #111;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.15s;
  text-decoration: none;
}
.next-project-btn:hover { opacity: 1; }
.next-project-btn svg { width: 40px; height: 40px; display: block; }
body.dark .next-project-btn { color: #e8e8e8; }

/* ── close button ── */
@keyframes close-btn-in{
  0%   {opacity:0;transform:scale(0);}
  100% {opacity:1;transform:scale(1);}
}
@keyframes close-btn-out{
  0%   {opacity:1;transform:scale(1);}
  100% {opacity:0;transform:scale(0);}
}
.close-btn{
  position:fixed;
  top:16px;right:16px;
  width:42px;height:42px;
  background:#111;
  border-radius:9999px;
  display:flex;align-items:center;justify-content:center;
  z-index:200;
  color:white;
  cursor:pointer;
  opacity:0;
  animation:close-btn-in 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.5s forwards;
}
body.dark .close-btn{background:#e8e8e8;color:#111;}
.close-btn svg{width:14px;height:14px;display:block;}
.close-btn.close-btn-out{
  animation:close-btn-out 0.25s ease-in forwards;
}

/* ── language switch ── */
.lang-switch{
  position:fixed;
  bottom:16px;left:68px;
  z-index:200;
  display:flex;align-items:center;
  gap:4px;
  user-select:none;
  height:18px;
}

.lang-btn{
  font-size:10.5pt;
  line-height:14px;
  color:#999;
  cursor:pointer;
  padding:0 2px;
  transition:color 0.15s;
  background:none;
  border:none;
}

.lang-btn.active{color:#111;}
body.dark .lang-btn.active{color:#e8e8e8;}
body.dark .lang-btn{color:#555;}

.lang-sep{
  font-size:10.5pt;
  line-height:14px;
  color:#ccc;
}
body.dark .lang-sep{color:#444;}

/* ── theme toggle ── */
.theme-toggle{
  position:fixed;bottom:16px;left:16px;z-index:200;
  cursor:pointer;user-select:none;
}
.toggle-track{
  width:32px;height:18px;border-radius:9999px;background:#ccc;
  position:relative;transition:background 0.2s;
}
.toggle-track.on{background:#333;}
body.dark .toggle-track{background:#555;}
body.dark .toggle-track.on{background:#e8e8e8;}
.toggle-thumb{
  position:absolute;top:2px;left:2px;width:14px;height:14px;
  border-radius:9999px;background:white;transition:transform 0.2s;
  box-shadow:0 1px 3px rgba(0,0,0,0.2);
}
.toggle-track.on .toggle-thumb{transform:translateX(14px);}
body.dark .toggle-thumb{background:#0d0d0d;}

@media (max-width: 767px) {
  .theme-toggle { display: none; }

  .panel-content {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .text-block,
  .info-rows,
  .gallery,
  .next-project-btn {
    grid-column: 1 / -1 !important;
  }
  .text-block {
    padding-bottom: 12px;
  }
  .info-rows {
    padding-bottom: 24px;
  }
}