:root{
  --white:#ffffff;
  --ink:#5c5850;
  --ink-dim:#9a948a;
  --line:rgba(20,20,20,0.12);
}
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:'Inter',sans-serif; font-weight:400;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100svh;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--ink); color:var(--white); }

header{ padding:56px 48px 8px; text-align:center; }
.wordmark{
  display:inline-block;
  font-family:'Newsreader',serif; font-style:italic; font-weight:400;
  font-size:clamp(32px,3.6vw,46px); line-height:1; letter-spacing:0.01em;
  text-transform:uppercase; color:var(--ink);
}

.shell{ flex:1; position:relative; }
.side-nav{
  position:fixed; left:48px; top:170px; z-index:20;
  display:flex; flex-direction:column; gap:20px;
}
.side-nav a{
  font-family:'Inter',sans-serif; font-weight:500; font-size:12px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-dim);
  transition:color 0.2s ease;
}
.side-nav a:hover, .side-nav a:focus-visible{ color:var(--ink); }
.side-nav a.current{ color:var(--ink); pointer-events:none; }

.content{ width:100%; }

.section-label{
  padding:0 48px 18px; margin-top:34px;
  display:flex; align-items:baseline; justify-content:center; gap:14px;
  text-align:center;
}
.section-label h1{
  font-family:'Inter',sans-serif; font-weight:500; font-size:12px;
  letter-spacing:0.14em; text-transform:uppercase; margin:0; color:var(--ink);
}
.section-label .count{
  font-family:'Inter',sans-serif; font-size:11px; letter-spacing:0.06em; color:var(--ink-dim);
}

/* Carousel */
.carousel-wrap{ position:relative; max-width:1100px; margin:0 auto; }
.carousel{
  display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; touch-action:pan-x; scrollbar-width:none; -ms-overflow-style:none;
}
.carousel::-webkit-scrollbar{ display:none; }
.slide{
  flex:0 0 100%; scroll-snap-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 26px; height:calc(100svh - 260px); min-height:320px;
}
.slide .frame{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.slide .frame img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; margin:0 auto; }

.arrow{
  position:absolute; top:calc(50% - 24px); z-index:5;
  width:40px; height:40px; border-radius:50%;
  background:var(--white); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--ink); font-family:'Inter',sans-serif; font-size:15px;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.arrow:hover{ background:#f5f4f1; border-color:var(--ink-dim); }
.arrow.prev{ left:6px; }
.arrow.next{ right:6px; }
@media (max-width:900px){ .arrow{ display:none; } }

/* Info / CV */
#info-content, #cv-content{ padding:20px 48px 80px; max-width:900px; margin:0 auto; text-align:center; }
#info-content p, #cv-content p{
  font-family:'Inter',sans-serif; font-size:15px; line-height:1.8; color:var(--ink);
  max-width:560px; margin:0 auto 16px;
}
.info-contact{ margin:36px auto 0; display:flex; flex-wrap:wrap; justify-content:center; gap:36px 56px; padding:0; list-style:none; }
.info-contact div dt{
  font-family:'Inter',sans-serif; font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink-dim); margin:0 0 6px;
}
.info-contact div dd{ margin:0; font-family:'Inter',sans-serif; font-size:15px; }
.info-contact a:hover{ color:var(--ink-dim); }

.cv-group{ margin-bottom:38px; }
.cv-group:last-child{ margin-bottom:0; }
.cv-group h2{
  font-family:'Inter',sans-serif; font-weight:500; font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--ink-dim); margin:0 0 14px; text-align:left;
}
.cv-group ul{ list-style:none; margin:0; padding:0; }
.cv-group li{
  font-family:'Inter',sans-serif; font-size:15px; line-height:1.9; color:var(--ink);
  display:flex; justify-content:flex-start; text-align:left; gap:14px;
}
.cv-group li .yr{ color:var(--ink-dim); }

#cv-content{ text-align:left; }

footer{
  border-top:1px solid var(--line); padding:26px 48px 44px;
  font-family:'Inter',sans-serif; font-size:11px; color:var(--ink-dim);
  letter-spacing:0.03em; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
footer a:hover{ color:var(--ink); }

.loading-note{
  font-family:'Inter',sans-serif; font-size:12px; color:var(--ink-dim);
  text-align:center; padding:60px 22px;
}

@media (max-width:900px){
  body{ display:block; }
  header{ padding:36px 22px 4px; }
  .shell{ display:block; }
  .side-nav{
    position:static; flex-direction:row; justify-content:center;
    padding:18px 22px 30px; gap:22px;
  }
  .section-label{ padding:0 22px 14px; margin-top:0; }
  .slide{ padding:0 22px; height:calc(100svh - 300px); }
  #info-content, #cv-content{ padding:14px 22px 60px; }
  footer{ padding:22px 22px 34px; }
}