/* Additions for the Proof of Work and Selected Projects sections.
   Built on the existing design tokens (void, asphalt, bone, mist, signal) and the
   .panel / .ticked / .eyebrow / .lift primitives from site.css. */

.pow-grid { display: grid; gap: 1rem; margin-top: 3rem; }
@media (min-width: 640px) { .pow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pow-card { display: flex; flex-direction: column; height: 100%; width: 100%; text-align: left; cursor: zoom-in; padding: 0; color: inherit; }
.pow-card:hover { border-color: oklch(82% .17 85 / .35); }
.pow-card:focus-visible { outline: 1px solid var(--color-signal); outline-offset: 3px; }

.pow-frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-bottom: 1px solid oklch(30% .018 256 / .55); background: oklch(10% .01 260); }
/* Evidence is shown whole: contained (never cropped), unfiltered, at its original aspect ratio */
.pow-frame img { height: 100%; width: 100%; object-fit: contain; object-position: center; padding: 2.6rem .75rem 2.4rem; }

.pow-stamp { position: absolute; z-index: 1; top: .85rem; left: .85rem; display: inline-flex; align-items: center; gap: .4rem; border: 1px solid oklch(82% .17 85 / .35); background: oklch(13% .012 260 / .82); backdrop-filter: blur(6px); padding: .3rem .55rem; font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--color-signal); }
.pow-stamp::before { content: ""; height: 5px; width: 5px; background: var(--color-signal); box-shadow: 0 0 10px var(--color-signal); }
.pow-zoom { position: absolute; z-index: 1; bottom: .85rem; right: .85rem; display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--color-mist); transition: color .2s; }
.pow-card:hover .pow-zoom { color: var(--color-signal); }

.pow-body { display: flex; flex: 1; flex-direction: column; padding: 1.4rem 1.5rem 1.6rem; }
.pow-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-mist); }
.pow-meta b { font-weight: 400; color: oklch(82% .17 85 / .75); }
.pow-title { margin-top: .9rem; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.02; text-transform: uppercase; letter-spacing: .02em; color: var(--color-bone); transition: color .2s; }
.pow-card:hover .pow-title { color: var(--color-signal); }
.pow-text { margin-top: .7rem; font-size: 13.5px; line-height: 1.6; color: var(--color-mist); }
.pow-foot { margin-top: auto; padding-top: 1.1rem; display: flex; flex-wrap: wrap; gap: .375rem; }
.pow-tag { border: 1px solid oklch(100% 0 0 / .1); padding: .15rem .5rem; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-mist); }

.pow-note { display: flex; align-items: flex-start; gap: .85rem; margin-top: 2rem; max-width: 46rem; border-left: 1px solid oklch(82% .17 85 / .55); background: linear-gradient(90deg, oklch(82% .17 85 / .07), transparent 80%); padding: .9rem 1.1rem; font-size: 13.5px; line-height: 1.6; color: oklch(95% .005 250 / .85); }
.pow-note strong { font-weight: 500; color: var(--color-signal); }

.pow-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.25rem; }
.pow-filter button { border: 1px solid oklch(100% 0 0 / .1); padding: .5rem 1rem; font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--color-mist); transition: color .2s, border-color .2s, background .2s; cursor: pointer; }
.pow-filter button:hover { border-color: oklch(100% 0 0 / .25); color: var(--color-bone); }
.pow-filter button[aria-pressed="true"] { border-color: oklch(82% .17 85 / .5); background: oklch(82% .17 85 / .1); color: var(--color-signal); }
[data-pow-item][hidden] { display: none; }

/* Selected projects */
.proj-grid { display: grid; gap: 1rem; margin-top: 3rem; }
@media (min-width: 640px) { .proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .proj-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.proj-card { display: flex; flex-direction: column; height: 100%; padding: 1.6rem; }
.proj-card:hover { border-color: oklch(82% .17 85 / .35); transform: translateY(-2px); box-shadow: 0 18px 40px -24px oklch(82% .17 85 / .35); }
.proj-index { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: oklch(82% .17 85 / .7); }
.proj-name { margin-top: 1.4rem; font-family: var(--font-display); font-size: 1.75rem; line-height: .95; text-transform: uppercase; color: var(--color-bone); transition: color .2s; }
.proj-card:hover .proj-name { color: var(--color-signal); }
.proj-sector { margin-top: .5rem; font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--color-mist); }
.proj-role { margin-top: 1.25rem; border-top: 1px solid oklch(100% 0 0 / .06); padding-top: 1rem; font-size: 13.5px; line-height: 1.55; color: oklch(95% .005 250 / .85); }
.proj-role span { display: block; margin-bottom: .3rem; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--color-mist); }
.proj-link { margin-top: auto; padding-top: 1.4rem; display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-signal); }
.proj-link svg { height: .9rem; width: .9rem; transition: transform .2s; }
.proj-card:hover .proj-link svg { transform: translate(2px, -2px); }
.proj-more { border-style: dashed; border-color: oklch(82% .17 85 / .3); background: linear-gradient(160deg, oklch(82% .17 85 / .06), #010203b3); }
.proj-more .proj-name { font-size: 3rem; color: var(--color-signal); }
.proj-more .proj-link { color: var(--color-bone); }
.proj-more:hover .proj-link { color: var(--color-signal); }

/* Lightbox */
.pow-lightbox { margin: auto; max-height: 94vh; max-width: min(94vw, 720px); border: 1px solid oklch(30% .018 256 / .8); background: oklch(13% .012 260); padding: 0; color: var(--color-bone); }
.pow-lightbox::backdrop { background: oklch(8% .01 260 / .86); backdrop-filter: blur(6px); }
.pow-lightbox[open] { display: flex; flex-direction: column; animation: lift-in .45s cubic-bezier(.16,1,.3,1) both; }
.pow-lb-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid oklch(100% 0 0 / .06); padding: .85rem 1.1rem; }
.pow-lb-head p { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--color-signal); }
.pow-lb-head button { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--color-mist); cursor: pointer; padding: .3rem .5rem; border: 1px solid oklch(100% 0 0 / .1); }
.pow-lb-head button:hover { color: var(--color-bone); border-color: oklch(100% 0 0 / .25); }
.pow-lb-scroll { overflow: auto; background: oklch(10% .01 260); }
.pow-lb-scroll img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.pow-lb-cap { border-top: 1px solid oklch(100% 0 0 / .06); padding: .9rem 1.1rem 1rem; font-size: 13px; line-height: 1.55; color: var(--color-mist); }
.pow-lb-cap strong { display: block; margin-bottom: .2rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; letter-spacing: .03em; text-transform: uppercase; color: var(--color-bone); }

/* Keeps the five-item nav usable on narrow phones */
@media (max-width: 639px) {
  header nav { min-width: 0; overflow-x: auto; scrollbar-width: none; margin-right: -.5rem; }
  header nav::-webkit-scrollbar { display: none; }
  header nav a { flex-shrink: 0; padding-left: .45rem; padding-right: .45rem; letter-spacing: .1em; }
}

.pow-frame, .pow-title, .pow-text { display: block; }
.pow-note a { color: var(--color-signal); text-decoration: underline; text-decoration-color: oklch(82% .17 85 / .4); text-underline-offset: 4px; transition: color .2s; }
.pow-note a:hover { color: var(--color-bone); }
.pow-note svg { margin-top: .2rem; flex-shrink: 0; color: var(--color-signal); }