/* ── PROJECTS v4: clean light index, no images. Text tabs + two-column table of contents; hover draws the
   site's selection box. The middle of the page stays light; yellow/ink bookend it (hero, contact, footer). ── */
.projects { background: var(--paper); color: var(--ink); --hair: var(--line); --dim: var(--muted);
  justify-content: center; align-items: center; text-align: center; }
.experience { background: var(--paper-2); }
.pj-head { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin-bottom: clamp(.8rem, 2.4vh, 1.5rem); }
.pj-head .mono-tag { color: var(--muted); } .pj-head .mono-tag b { color: var(--yellow-lo); }
.projects .proj-title { margin: 0; font-size: clamp(2rem, 4.4vw, 3.6rem); color: var(--ink); } .projects .proj-title .ap { color: var(--yellow-lo); }

.pj-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem clamp(.6rem, 2vw, 1.8rem); margin-bottom: clamp(1rem, 3vh, 1.9rem); }
.pt { font: 700 clamp(1rem, 1.5vw, 1.3rem) var(--disp); letter-spacing: -.02em; color: var(--muted); background: none; border: 0; cursor: pointer; padding: .25rem .2rem; transition: color .25s; }
.pt sup { font: 500 .6rem var(--mono); color: var(--yellow-lo); margin-left: .18rem; }
.pt-l { background-image: linear-gradient(rgba(254,184,32,.85), rgba(254,184,32,.85)); background-repeat: no-repeat; background-position: 0 80%;
  background-size: 0% .45em; padding: 0 .06em; transition: background-size .5s var(--e); }
.pt:hover { color: var(--ink); } .pt.on { color: var(--ink); } .pt.on .pt-l { background-size: 100% .45em; }
.pt:focus-visible { outline: 2px solid var(--yellow-lo); outline-offset: 3px; border-radius: 4px; }

.pj-index { width: min(1120px, 100%); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.4rem, 4vw, 3.6rem);
  text-align: left; border-top: 1px solid var(--line); }
.pe { position: relative; display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); gap: .7rem; padding: clamp(.75rem, 2vh, 1.2rem) .9rem; border-bottom: 1px solid var(--line); }
.pe.go { cursor: pointer; }
/* hover: the Figma-style selection box (frame + 4 corner handles), same mark as the Toolbox headline */
.pe::before { content: ""; position: absolute; inset: 3px -4px; border: 1.5px solid var(--ink); opacity: 0; transition: opacity .2s, inset .35s var(--spring); pointer-events: none; }
.pe .h { position: absolute; width: 9px; height: 9px; background: var(--paper); border: 1.5px solid var(--ink); opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 1; }
.pe .tl { left: -8px; top: -1px; } .pe .tr { right: -8px; top: -1px; } .pe .bl { left: -8px; bottom: -1px; } .pe .br { right: -8px; bottom: -1px; }
.pe:hover::before { opacity: 1; inset: 3px -4px; } .pe:hover .h { opacity: 1; }
.pe-n { font: .72rem var(--mono); color: var(--muted); padding-top: .5rem; }
.pe-name { font: 800 clamp(1.2rem, 1.9vw, 1.7rem) var(--disp); letter-spacing: -.025em; line-height: 1.1; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.pe-tag { font: 500 .56rem var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: .14rem .45rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.pe-tag.wip { color: var(--yellow-lo); border-color: rgba(224,154,14,.5); }
.pe-d { color: var(--muted); font-size: clamp(.84rem, .95vw, .95rem); line-height: 1.4; margin: .3rem 0 .45rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pe-m { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .3rem 1rem; font: .7rem var(--mono); }
.pe-s { color: var(--muted); }
.pe-l a { color: var(--ink); font-weight: 500; margin-left: .9rem; } .pe-l a:first-child { margin-left: 0; }
.pe-l a:hover { color: var(--yellow-lo); text-decoration: underline; }

@media (max-height: 760px) and (min-width: 901px) { .pe { padding-top: .6rem; padding-bottom: .6rem; } .pe-d { -webkit-line-clamp: 1; } .projects .proj-title { font-size: clamp(1.7rem, 3.4vw, 2.6rem); } }
@media (max-width: 800px) { .pj-index { grid-template-columns: 1fr; } .pe-d { -webkit-line-clamp: 1; } .pe-s { display: none; } .pe { padding-left: .4rem; padding-right: .4rem; } }