﻿/* Compact, expandable project cards. Shared by the main portfolio and the comparison preview. */
.project-preview-note{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-bottom:20px;margin-bottom:30px;border-bottom:1px solid var(--line);font:10px/1.8 'Space Mono',monospace;color:var(--muted)}.project-preview-note a{font:12px 'DM Sans',Arial,sans-serif;color:var(--paper);padding:8px 0;text-decoration:underline;text-underline-offset:5px}
.compact-project-intro{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:28px}.compact-project-intro .heading{font-size:clamp(42px,5.3vw,68px)}.compact-project-intro p{font-size:13px;line-height:1.8;color:var(--muted);max-width:280px;margin:0}
.live-project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}.project-entry{min-width:0}.compact-project-card{min-width:0;background:#181918;border:1px solid #41423d;overflow:hidden;transition:border-color .35s,box-shadow .45s}.compact-project-card:hover,.compact-project-card:focus-within{border-color:#ac5a4d;box-shadow:0 14px 32px #0003}.compact-project-image{display:block;position:relative;height:clamp(180px,18vw,240px);overflow:hidden;background:#173b45}.compact-project-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%;transition:transform .7s var(--ease-out)}.compact-project-image:hover img{transform:scale(1.025)}.project-live-badge{position:absolute;top:15px;left:15px;background:#111b1beb;border:1px solid #ccd2bf77;color:#eee;padding:8px 10px;font:9px 'Space Mono',monospace;letter-spacing:.7px}
.compact-project-body{padding:23px 25px}.compact-project-title{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}.compact-project-title h3{font:700 clamp(27px,2.5vw,34px)/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.3px;margin:0}.compact-project-title>span{font:10px 'Space Mono',monospace;color:var(--red)}.compact-project-body>p{font-size:13px;line-height:1.75;color:#b3b6ac;margin:12px 0 14px;max-width:480px}.project-skill-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}.project-skill-tags li{font:9px 'Space Mono',monospace;color:#b4b7ad;border:1px solid #454740;padding:6px 8px}.compact-project-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.compact-live,.project-detail-toggle,.project-detail-fallback{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:44px;padding:11px 16px;font:600 12px 'DM Sans',Arial,sans-serif;border:1px solid #63665a;border-radius:3px;color:var(--paper);background:transparent;cursor:pointer;transition:background .25s,border-color .25s}.compact-live{background:var(--red);border-color:var(--red);color:#171918}.compact-live:hover{background:#ff786b}.project-detail-toggle:hover,.project-detail-fallback:hover,.project-detail-toggle[aria-expanded=true]{border-color:var(--red)}.project-detail-toggle>span{font-size:19px;font-weight:400;line-height:1;transition:transform .35s}.project-detail-toggle[aria-expanded=true]>span{transform:rotate(45deg)}.project-detail-toggle[hidden],.project-detail-fallback[hidden],.project-detail-close[hidden]{display:none}
.project-details{border:1px solid #494a42;background:#1b1c19;margin-top:18px}.project-details>summary{cursor:pointer;padding:18px 22px;font-size:13px}.project-details.is-enhanced:not([open]){display:none}.project-details.is-enhanced>summary{display:none}.project-details-body{padding:26px 28px}.project-details-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}.project-details-toolbar h3{font-size:23px;font-weight:500;margin:0}.project-detail-close{min-height:44px;border:1px solid #606354;color:var(--paper);background:transparent;border-radius:3px;padding:9px 12px;cursor:pointer;font-size:11px}.project-details-body>p{font-size:13px;color:#b5b8ae;line-height:1.85;max-width:780px;margin:0}.project-detail-steps{display:grid;grid-template-columns:1fr;gap:22px;list-style:none;margin:24px 0;padding:0}.project-detail-steps li{min-width:0;border-top:1px solid #656453;padding-top:16px}.project-detail-steps span{font:10px 'Space Mono',monospace;color:var(--red)}.project-detail-steps h4{font-size:17px;font-weight:500;margin:12px 0}.project-detail-steps p{font-size:12px;line-height:1.85;color:#b5b8ae;margin:0}.project-details-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;border-top:1px solid #45473f;padding-top:20px}.project-details-footer p{font:10px/1.8 'Space Mono',monospace;color:#a3a99c;margin:0}.project-details-footer a{font-size:12px;text-decoration:underline;text-underline-offset:5px;padding:8px 0}.planned-labs{padding-top:45px}.planned-labs .workhead{margin-bottom:23px}.planned-labs .workhead .heading{font-size:clamp(32px,3.5vw,45px)}.planned-labs .workhead p{max-width:360px}.planned-labs .lab-evidence{display:none}.planned-labs .art{height:180px}.planned-labs .sample{font-size:9px}.planned-labs .terminal{padding-top:48px;font-size:10px}.planned-labs .project h3{font-size:17px;margin-top:16px}
@media(max-width:700px){.live-project-grid{grid-template-columns:1fr}.compact-project-intro{display:block}.compact-project-intro p{max-width:100%;margin-top:18px}.compact-project-image{height:200px}.compact-project-body{padding:22px 20px}.compact-project-title h3{font-size:32px}.project-details-body{padding:23px 20px}.project-details-toolbar{align-items:start}.project-details-toolbar h3{font-size:20px}.project-detail-steps{grid-template-columns:1fr;gap:22px}.planned-labs{padding-top:38px}.planned-labs .projects{gap:25px}.planned-labs .art{height:180px}}
@media(prefers-reduced-motion:reduce){.compact-project-image:hover img{transform:none}.project-detail-toggle[aria-expanded=true]>span{transform:none}}

/* Consistent card geometry keeps the grid quiet while either story opens. */
.compact-project-card{height:100%;display:flex;flex-direction:column}.compact-project-body{flex:1;display:flex;flex-direction:column;align-items:flex-start}.compact-project-actions{margin-top:auto;padding-top:20px}.compact-project-body>p{min-height:3.5em}.compact-project-title{width:100%}.compact-project-title>span{font-size:9px}.project-entry:has(.project-detail-toggle[aria-expanded=true]) .compact-project-card{border-color:var(--red)}
.project-scene-label{position:absolute;bottom:15px;right:15px;padding:9px 11px;background:#111c;color:#fff;font:9px 'Space Mono',monospace;opacity:0;transform:translateY(5px);transition:opacity .4s,transform .5s;pointer-events:none}.compact-project-image:hover .project-scene-label,.compact-project-image:focus-visible .project-scene-label{opacity:1;transform:none}.packetquest-card .compact-project-image{background:#24474a}.packetquest-card .compact-project-image::after{content:'\2726';position:absolute;right:24px;top:18px;font-size:25px;line-height:1;color:#ffdd8e;opacity:0;pointer-events:none}.packetquest-card .compact-project-image:hover::after,.packetquest-card .compact-project-image:focus-visible::after{animation:project-sparkle .85s ease-out both}
.project-honest-note{font-size:11px;line-height:1.7;color:#b5b8ae}.compact-project-card a:focus-visible,.project-detail-toggle:focus-visible,.project-detail-close:focus-visible,.project-details-footer a:focus-visible{outline:2px solid var(--red);outline-offset:4px}.compact-project-image:focus-visible{outline-offset:-4px}
@keyframes project-sparkle{0%{opacity:0;transform:scale(.6) rotate(-20deg)}45%{opacity:1}100%{opacity:0;transform:scale(1.3) rotate(25deg)}}
@media(hover:none){.project-scene-label{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.compact-project-card,.compact-project-image img,.project-scene-label,.project-detail-toggle>span{transition:none}.packetquest-card .compact-project-image::after{animation:none!important}.project-scene-label{transform:none}}
