/* ══════════════════════════════════════════
   RESET + VARIABLES
══════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{overflow-y:scroll;overflow-x:hidden}
body{overflow-x:hidden}
body{background:var(--clean);color:var(--hole);font-synthesis:none;-webkit-font-smoothing:antialiased}

:root{
  --hole:#010101;--clean:#f6f6f3;--blur:#636363;
  --water:#009dff;--amber:#ff0055;--grass:#9de61f;
  --spectra:#ff3822;--plum:#9f3dfa;--pulse:#ff0000;--rays:#FEBF11; --zred:#E23744;
  --accent:var(--water);
  --t-nav-size:clamp(18px,2.1vw,30px);         --t-nav-weight:600;
  --t-name-size:clamp(70px,8.7vw,125px);       --t-name-weight:700;
  --t-head-size:clamp(42px,5.2vw,75px);        --t-head-weight:700;
  --t-project-size:clamp(55px,7vw,100px);      --t-project-weight:700;
  --t-subproject-size:clamp(30px,3.5vw,50px);  --t-subproject-weight:700;
  --t-subsubhead-size:clamp(24px,2.6vw,38px);  --t-subsubhead-weight:700;
  --t-stats-size:clamp(24px,2.6vw,38px);       --t-stats-weight:600;
  --t-contact-rest:clamp(30px,3.5vw,50px); --t-contact-hover:clamp(36px,4.2vw,61px); --t-contact-shrink:clamp(26px,3.1vw,44px);
  --t-grotzec-ls:-0.01em;
  --t-content-size:16px;   --t-content-weight:400; --t-content-ls:0.02em;
  --t-minor-size:14px;     --t-minor-weight:400;   --t-minor-ls:0.12em;
  --t-cat-size:12px;       --t-cat-weight:700;     --t-cat-ls:0.2em;
}

/* ── FONT FACES ── */
@font-face{font-family:'Grotzec';src:url('../fonts/GrotzecCondensedTrial-Bold-BF6621e8d7966af.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:'Grotzec';src:url('../fonts/GrotzecCondensedTrial-Demibold-BF6621e8d752d0c.otf') format('opentype');font-weight:600;font-display:swap}
@font-face{font-family:'Plain';src:url('../fonts/Plain-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Plain';src:url('../fonts/Plain-Bold.otf') format('opentype');font-weight:700;font-display:swap}

/* ══════════════════════════════════════════
   NAV
══════════════════════════════════════════ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:300000;
  display:flex;align-items:center;justify-content:space-between;
  padding:5.5vh 5vw;pointer-events:none;
  background:transparent;
  transition:background-color 0.45s cubic-bezier(0.4,0,0.2,1),
             padding 0.45s cubic-bezier(0.4,0,0.2,1);
}
#nav.nav--compact{padding:18px 5vw;background:var(--clean)}
@keyframes navReveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0% 0)}}
#nav.nav--compact.nav--reveal{animation:navReveal 0.45s cubic-bezier(0.4,0,0.2,1) forwards}
@keyframes navDismiss{
  from{padding-top:18px;padding-bottom:18px;background-color:var(--clean)}
  to  {padding-top:5.5vh;padding-bottom:5.5vh;background-color:transparent}
}
#nav.nav--dismissing{animation:navDismiss 0.45s cubic-bezier(0.4,0,0.2,1) forwards;pointer-events:none}
.nav-name{
  font-family:'Grotzec',sans-serif;font-weight:var(--t-nav-weight);
  font-size:var(--t-nav-size);letter-spacing:var(--t-grotzec-ls);
  text-transform:uppercase;color:var(--hole);text-decoration:none;
  pointer-events:auto;cursor:pointer;transition:color 0.3s ease;
}
.nav-links{display:flex;gap:5vw;list-style:none}
.nav-links li a{
  font-family:'Grotzec',sans-serif;font-weight:var(--t-nav-weight);
  font-size:var(--t-nav-size);letter-spacing:var(--t-grotzec-ls);
  text-transform:uppercase;text-decoration:none;color:var(--hole);
  pointer-events:auto;cursor:pointer;transition:color 0.3s ease;
}
#nav.overlay-open .nav-name,
#nav.overlay-open .nav-links li a{color:var(--clean)}
.nav-links li a:hover { color: var(--blur); }
.nav-name:hover { color: var(--blur); }
#nav.overlay-open .nav-links li a:hover { color: var(--blur); }
#nav.overlay-open.nav--compact{background:transparent}
#nav.overlay-open .nav-name:hover { color: var(--blur); }

/* ══════════════════════════════════════════
   CONTACT OVERLAY
══════════════════════════════════════════ */
#contact-overlay{
  position:fixed;inset:0;background:var(--hole);z-index:200000;
  display:flex;align-items:center;justify-content:center;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 0.75s cubic-bezier(0.77,0,0.175,1);
  pointer-events:none;
}
#contact-overlay.open  {clip-path:inset(0 0 0%   0);pointer-events:auto}
#contact-overlay.closing{clip-path:inset(0 0 100% 0);pointer-events:none}
.contact-links{
  display:flex;align-items:center;justify-content:space-between;width:65vw;padding:0;
}
.contact-link{
  font-family:'Grotzec',sans-serif;font-weight:700;
  font-size:var(--t-contact-rest);
  letter-spacing:var(--t-grotzec-ls);text-transform:uppercase;
  text-decoration:none;color:var(--clean);
  transition:transform 0.25s ease,color 0.25s ease;
  display:inline-block;line-height:1;white-space:nowrap;transform-origin:center center;
}
.contact-links:has(.contact-link:hover) .contact-link:not(:hover){transform:scale(0.875)}
.contact-links .contact-link:hover{transform:scale(1.22)}
.link-cv:hover       {color:var(--plum)}
.link-resume:hover   {color:var(--water)}
.link-linkedin:hover {color:var(--water)}
.link-instagram:hover{color:var(--amber)}
.link-x:hover        {color:var(--spectra)}
.link-substack:hover {color:var(--pulse)}

/* ══════════════════════════════════════════
   SCROLL INDICATOR
══════════════════════════════════════════ */
#scroll-indicator{
  position:fixed;bottom:5vh;left:50%;transform:translateX(-50%);
  z-index:50;display:none;flex-direction:column;
  align-items:center;gap:9px;pointer-events:none;
}
.si-label{
  font-family:'Plain',sans-serif;font-weight:400;
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--hole);opacity:0.4;
}
.si-line{
  width:1px;height:30px;background:rgba(1,1,1,0.12);
  position:relative;overflow:hidden;
}
.si-line::after{
  content:'';position:absolute;top:-44px;left:0;
  width:100%;height:44px;background:var(--hole);
  animation:siTravel 1.9s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes siTravel{
  0%  {top:-44px;opacity:0}
  20% {opacity:0.75}
  80% {opacity:0.75}
  100%{top:44px;opacity:0}
}

/* ══════════════════════════════════════════
   PAGE ROUTING
══════════════════════════════════════════ */
.page-view{display:none}
.page-view.active{display:block}