/* ---- portfolio network: footer disclosure linking Aditya Peri / Studio Peri / Drawings by Deech ---- */

.pn{
  position:relative;
  font-family:'Space Grotesk', sans-serif;
}
.pn-trigger{
  font:inherit;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(242,240,234,0.55);
  background:none;
  border:1px solid rgba(242,240,234,0.22);
  border-radius:0;
  padding:6px 10px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  cursor:pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.pn-trigger-dot{
  width:6px;
  height:6px;
  background:var(--accent);
  flex-shrink:0;
  transition: background 0.5s ease;
}
.pn-trigger-sign{
  display:inline-block;
  width:9px;
  text-align:center;
  transition: transform 0.2s ease;
}
.pn-trigger:hover,
.pn.is-open .pn-trigger{
  color:#F2F0EA;
  border-color:rgba(242,240,234,0.55);
}
.pn.is-pinned .pn-trigger{ border-color:var(--accent); }
.pn.is-open .pn-trigger-sign{ transform:rotate(45deg); }

.pn-trigger:focus-visible,
.pn-panel a:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* Panel always opens upward from the footer. It is display:none while closed
   so it never widens the page on narrow screens; network.js sets --pn-shift to
   keep it inside the viewport and --pn-max when the viewport is too short. */
.pn-panel{
  display:none;
  position:absolute;
  left:0;
  bottom:calc(100% + 12px);
  z-index:200;   /* above index.html's fixed header (100), below the lightbox */
  width:300px;
  max-width:calc(100vw - 32px);
  margin-left:var(--pn-shift, 0px);
  max-height:var(--pn-max, none);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:14px 18px 12px;
  background:#0C0C0C;
  border:1px solid rgba(242,240,234,0.22);
  box-shadow:6px 6px 0 var(--accent);
  text-align:left;
  opacity:0;
  transform:translateY(4px);
  transition-property: opacity, transform, display;
  transition-duration: 0.18s;
  transition-timing-function: ease;
  transition-behavior: allow-discrete;
}
/* Bridges the gap so the pointer can travel from trigger to panel without closing it */
.pn.is-open::before{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:100%;
  height:14px;
}
.pn.is-open .pn-panel{
  display:block;
  opacity:1;
  transform:none;
}
@starting-style{
  .pn.is-open .pn-panel{ opacity:0; transform:translateY(4px); }
}
.pn-label{
  margin:0 0 6px;
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:rgba(242,240,234,0.4);
}
.pn-sites{
  list-style:none;
  margin:0;
  padding:0;
}
.pn-panel a{
  display:block;
  padding:7px 0;
  color:#F2F0EA;
  text-decoration:none;
}
.pn-name{
  display:block;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  transition: color 0.2s ease;
}
.pn-sites a:hover .pn-name{ color:var(--accent); }
.pn-here{
  color:var(--accent);
  margin-left:4px;
  transition: color 0.5s ease;
}
.pn-desc{
  display:block;
  margin-top:2px;
  font-size:11px;
  font-weight:500;
  color:rgba(242,240,234,0.55);
}
.pn-panel .pn-social{
  margin-top:8px;
  padding-top:10px;
  border-top:1px solid rgba(242,240,234,0.14);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(242,240,234,0.55);
  transition: color 0.2s ease;
}
.pn-panel .pn-social:hover{ color:#F2F0EA; }

.pn-sr{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* Comfortable tap targets on touch screens */
@media (pointer:coarse){
  .pn-trigger{ min-height:44px; padding:0 14px; }
  .pn-panel a{ padding:11px 0; }
}

@media (prefers-reduced-motion: reduce){
  .pn-trigger, .pn-trigger-sign,
  .pn-panel{ transition:none; }
}

/* viewer.html?embed=1 strips all site chrome */
html.embed .pn{ display:none !important; }