@font-face{
  font-family:'Glacial Indifference';
  src: url('fonts/GlacialIndifference-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Glacial Indifference';
  src: url('fonts/GlacialIndifference-Bold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'VTF Gulax';
  src: url('fonts/VTFGulax-Regular.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg: rgb(220, 222, 223);
  --bg-light: rgb(234, 235, 236);
  --ink: #17140f;
  --muted: #7a7468;
  --desc: #55503f;
  --tape: #a9865b;
  --tape-dark: #7c5f3c;
  --frame-color: #17140f;
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Glacial Indifference', sans-serif;
  overflow:hidden;
  border:14px solid var(--frame-color);
}
a{ color:inherit; }

.frame{
  position:relative;
  width:100%;
  height:100%;
}
.site-name{
  position:absolute;
  top:26px; left:0; right:0;
  text-align:center;
  font-weight:700;
  font-size:clamp(14px, 1.6vw + 9px, 18px);
  letter-spacing:0.02em;
  z-index:5;
  pointer-events:none;
}
nav.projects{
  position:absolute;
  top:56px; left:32px;
  display:flex; flex-direction:column; gap:8px;
  padding-top:4px;
  z-index:5;
}
.nav-item{ display:flex; flex-direction:column; gap:4px; }
nav.projects button.chaos-entry{ margin-top:20px; }
nav.projects button{
  all:unset; cursor:pointer; display:inline-block; align-self:flex-start;
  font-family:'Glacial Indifference', sans-serif;
  font-weight:700;
  font-size:clamp(13px, 1.6vw + 8px, 19px);
  line-height:1.15;
  color:var(--frame-color);
  opacity:1;
  transition:opacity 0.2s ease;
}
nav.projects button:hover{ opacity:0.9; font-family:'VTF Gulax', sans-serif; -webkit-text-stroke:0.4px currentColor; }
nav.projects button.active{
  color:var(--ink);
  font-family:'VTF Gulax', sans-serif;
  font-size:clamp(13px, 1.6vw + 8px, 19px);
  opacity:1;
  -webkit-text-stroke:0.4px currentColor;
  position:relative;
}
nav.projects button.active::before{
  content:'★';
  position:absolute;
  top:50%;
  right:100%;
  margin-right:6px;
  transform:translateY(-50%);
}
nav.projects button.active::after{
  content:'★';
  position:absolute;
  top:50%;
  left:100%;
  margin-left:6px;
  transform:translateY(-50%);
}

aside.contact{
  position:absolute;
  bottom:54px; right:32px;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
  z-index:5;
}
aside.contact .info{
  writing-mode:vertical-rl; transform:rotate(180deg);
  display:flex; flex-direction:row; gap:14px; align-items:center;
}
aside.contact a{
  font-size:clamp(12px, 1.4vw + 7px, 17px);
  font-weight:700;
  color:var(--muted);
  text-decoration:none;
  letter-spacing:0.02em;
}
aside.contact a.mail{ color:var(--ink); }
aside.contact a.handle{ color:var(--ink); }

main.viewport{
  position:absolute; inset:0;
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
main.viewport::-webkit-scrollbar{ display:none; }

.track{ position:relative; height:100%; }

.shot-wrap{ position:absolute; }
.shot{
  position:relative; width:100%; height:100%;
  border-radius:2px; overflow:hidden; background:var(--bg-light);
  box-shadow:0 1px 0 rgba(0,0,0,0.05);
}
.shot img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(0.1) contrast(1.03);
  opacity:0; transition:opacity 0.35s ease;
}
.shot img.loaded{ opacity:1; }

.tape{ position:absolute; }
.tape-inner{
  position:absolute; width:220px; height:86px;
  background:linear-gradient(var(--tape), var(--tape-dark));
  opacity:0.9;
}
.tape-inner img{
  width:100%; height:100%; object-fit:contain; display:block;
  opacity:0; transition:opacity 0.35s ease;
}
.tape-inner img.loaded{ opacity:1; }

.section-label{
  position:absolute;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  color:var(--ink);
  font-size:clamp(11px, 1.2vw + 7px, 15px);
  overflow:hidden;
  white-space:normal;
}
.section-label .name{ font-weight:700; }
.section-label .desc{ font-weight:400; color:var(--desc); }
.section-label .desc a{
  color:#3804e1;
  font-weight:400;
  text-decoration:none;
}
.section-label.chaos .name{
  font-family:'VTF Gulax', sans-serif;
  font-weight:400;
  font-size:1.3em;
  -webkit-text-stroke:0.5px currentColor;
}

.chaos-tape-marker{
  position:absolute;
  transform:rotate(-58deg);
  z-index:3;
}
.chaos-tape-marker img{
  width:100%; height:100%; object-fit:contain; display:block;
}

.intro-tape-marker{
  position:absolute;
  transform:rotate(-30deg);
  z-index:3;
  transition:opacity 0.3s ease;
}
.intro-tape-marker img{
  width:100%; height:100%; object-fit:contain; display:block;
}

footer.status{
  position:absolute; left:32px; bottom:22px;
  display:flex; align-items:center; gap:12px;
  font-size:clamp(11px, 1vw + 7px, 13px);
  color:var(--muted);
  z-index:5;
}
footer.status span, footer.status button{
  background:var(--bg); padding:2px 8px; border-radius:2px;
}
footer.status button{
  all:unset; cursor:pointer; color:var(--muted);
  font-size:clamp(11px, 1vw + 7px, 13px);
  background:var(--bg); padding:2px 8px; border-radius:2px;
}
footer.status button:hover{ color:var(--ink); }

.modal-overlay{
  position:fixed; inset:0;
  background:transparent;
  display:flex; align-items:center; justify-content:center;
  z-index:10;
}
.modal-overlay[hidden]{ display:none; }
.modal{
  position:relative;
  background:var(--bg-light);
  max-width:380px; width:90%;
  padding:28px 30px;
  border-radius:0;
  font-size:13px; line-height:1.6;
  font-family:'Glacial Indifference', sans-serif;
  box-shadow:0 8px 30px rgba(0,0,0,0.25);
}
.modal h2{ font-size:14px; font-weight:700; margin:0 0 12px; }
.modal .copyright-note{ font-size:11px; color:var(--muted); margin-top:14px; }
.modal button.close{
  all:unset; cursor:pointer; display:block; margin-top:16px;
  font-size:12px; color:var(--muted);
}

/* Mobile: narrower insets, smaller frame, image sizing is computed
   differently in JS (width-driven portrait), but shares all the classes
   above. Only spacing tweaks needed here. */
@media (max-width: 640px){
  body{ border-width:4px; }
  .site-name{ top:14px; font-size:16px; }
  nav.projects{ top:44px; left:22px; gap:5px; }
  nav.projects button, nav.projects button.active{ font-size:12px; }
  nav.projects button.active::before{ font-size:10px; margin-right:5px; }
  nav.projects button.active::after{ font-size:10px; margin-left:5px; }
  aside.contact{ bottom:40px; right:14px; }
  footer.status{ left:14px; bottom:12px; }
}