/* Jude Wakim portfolio — layered on /styles.v5.css ("Paper"). */

[hidden]{ display:none !important; }

/* --- nav + menu --------------------------------------------------------- */
.pnav{ position:sticky; top:0; }
.menu-btn{
  display:inline-grid; place-items:center;
  width:44px; height:44px; margin-right:-10px;
  background:transparent; border:0; border-radius:6px; cursor:pointer;
}
.menu-btn:hover{ background:rgba(26,26,24,.05); }
.menu-btn__bars{ display:grid; gap:5px; width:20px; }
.menu-btn__bars i{
  display:block; height:1.5px; background:var(--ink); border-radius:1px;
  transition:transform .2s ease, opacity .2s ease;
}
.menu-btn[aria-expanded="true"] .menu-btn__bars i:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars i:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] .menu-btn__bars i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.menu{ border-top:1px solid var(--rule); background:var(--paper); }
.menu__inner{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
  gap:clamp(1.5rem,4vw,3rem); padding-block:clamp(1.5rem,4vw,2.5rem);
}
.menu__title{ font-size:var(--t-small); font-weight:500; color:var(--faint); margin-bottom:.75rem; }
.menu__list{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.menu__list a{ text-decoration:none; font-size:1.05rem; letter-spacing:-.01em; }
.menu__list a:hover{ text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:1px; }
.menu__soon{ color:var(--muted); }

/* --- profile ------------------------------------------------------------ */
.profile{
  display:grid; grid-template-columns:auto 1fr; align-items:center;
  gap:clamp(1.75rem,5vw,3.5rem);
  padding-block:clamp(3.5rem,9vw,6.5rem) clamp(2rem,5vw,3rem);
}
.profile__photo{
  width:clamp(8.5rem,18vw,13rem); height:auto; aspect-ratio:1;
  border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 1px var(--rule);
}
.profile__name{ max-width:none; }
.profile__bio{ margin-top:1.1rem; max-width:52ch; }
.profile__creds{ margin-top:1rem; font-size:var(--t-small); color:var(--faint); max-width:60ch; }

/* --- projects ----------------------------------------------------------- */
.projects__title{ margin-top:0; }
.proj{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem); align-items:start;
  padding-block:clamp(2.25rem,5vw,3.25rem);
  border-top:1px solid var(--rule);
}
.proj:last-child{ border-bottom:1px solid var(--rule); }
.proj__shot{
  display:block; overflow:hidden; border-radius:10px;
  border:1px solid var(--rule); background:#fff;
  aspect-ratio:16 / 10;
}
.proj__shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .35s ease; }
.proj__shot:hover img{ transform:scale(1.015); }
.proj__shot--tall img{ object-position:top center; }
.proj__name{ font-size:clamp(1.4rem,1.1rem + 1vw,2rem); font-weight:500; letter-spacing:-.024em; line-height:1.15; }
.proj__claim{ margin-top:.6rem; font-size:var(--t-lede); color:var(--muted); max-width:36ch; text-wrap:pretty; }
.proj__desc{ margin-top:1.1rem; font-size:var(--t-small); line-height:1.65; color:var(--muted); max-width:52ch; }
.proj__stack{ margin-top:.9rem; font-size:var(--t-small); color:var(--faint); }
.proj__links{ margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:.6rem; }

@media (max-width:760px){
  .profile{ grid-template-columns:1fr; justify-items:start; }
  .proj{ grid-template-columns:1fr; }
}

.proj__links{ align-items:center; }
.proj__private{ font-size:var(--t-small); color:var(--faint); }
.menu__resume{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1rem; font-size:1.05rem; letter-spacing:-.01em; }
.menu__resume span{ display:inline-flex; gap:.9rem; font-size:var(--t-small); }
.menu__resume span a{ text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:1px; text-decoration-color:var(--rule-2); }