header{background:var(--primary);border-bottom:4px solid var(--secondary);color:#fff;padding:clamp(2rem,5vw,3rem) 1rem;position:relative;text-align:center}header::before{background:repeating-linear-gradient(45deg,var(--secondary),var(--secondary) 10px,var(--accent) 10px,var(--accent) 20px);content:"";inset:0;opacity:.1;pointer-events:none;position:absolute}header h1{font:700 clamp(2rem, 6vw, 3.5rem) "Space Grotesk",Arial,sans-serif;letter-spacing:1px;position:relative;text-transform:uppercase;z-index:1}header h1 i{margin-right:.5rem}.project-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));padding:1.5rem}.project-card{background:var(--card-bg);border:2px dashed var(--secondary);border-radius:8px;box-shadow:0 4px 12px var(--card-shadow);display:flex;flex-direction:column;gap:1rem;overflow:hidden;padding:1.5rem;position:relative;transition:transform .3s ease-out,box-shadow .3s ease-out,background .3s ease-out,border .3s ease-out}.project-card::before{color:var(--secondary);content:"\f6e3";font:900 6rem "Font Awesome 6 Free";left:-20%;opacity:0;position:absolute;top:-20%;transition:opacity .3s ease-out;z-index:0}.project-card::after{background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(255,193,7,.2) 10px,rgba(255,193,7,.2) 20px);content:"";inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity .3s ease-out}@supports (box-shadow:0 0 20px var(--card-shadow)){.project-card:hover{background:var(--hover-bg);border:2px solid var(--secondary);box-shadow:0 8px 16px var(--card-shadow);transform:translateY(-6px)}.project-card:hover::after,.project-card:hover::before{opacity:.8}}.project-card:hover{background:var(--hover-bg);border:2px solid var(--secondary);transform:translateY(-4px)}.project-link-main{color:var(--text);flex:1;position:relative;text-decoration:none;z-index:1}.project-card:focus-within .project-link-main,.project-card:hover .project-link-main{color:var(--accent)}.project-card h3{font:700 1.5rem "Space Grotesk",Arial,sans-serif;margin-bottom:.5rem;transition:color .2s ease-out}.project-card:focus-within h3,.project-card:hover h3{color:var(--accent)}.project-card p{color:var(--text-light);display:-webkit-box;font-size:.95rem;overflow:hidden;position:relative;text-align:left;-webkit-line-clamp:3;-webkit-box-orient:vertical;z-index:1}.project-card:focus-within p,.project-card:hover p{color:var(--accent)}@supports not (display:-webkit-box){.project-card p{max-height:4.5em;overflow:hidden}}.details-button{background:var(--secondary);border:2px solid var(--accent);border-radius:6px;color:var(--accent);cursor:pointer;font:700 1rem "Space Grotesk",Arial,sans-serif;padding:.75rem 1.5rem;position:relative;text-align:center;text-decoration:none;transition:background-color .3s ease-out,transform .2s ease-out;z-index:1}.details-button i{margin-right:.5rem}.details-button:focus,.details-button:hover{background:#ffb300;transform:scale(1.05)}@supports not (transform:scale(1.05)){.details-button:focus,.details-button:hover{background:#ffb300}}.modal{backdrop-filter:blur(3px);background:var(--modal-overlay);display:none;inset:0;padding:1rem;position:fixed;z-index:1000}@supports not (backdrop-filter:blur(3px)){.modal{background:rgba(51,51,51,.9)}}.modal[aria-hidden=false]{align-items:center;display:flex;justify-content:center}.modal-content{background:var(--card-bg);border:3px dashed var(--secondary);border-radius:10px;box-shadow:0 20px 40px var(--card-shadow);max-height:90vh;max-width:720px;overflow-y:auto;position:relative;text-align:left;width:90%}.modal-header{align-items:center;background:var(--primary);border-bottom:3px solid var(--secondary);color:#fff;display:flex;justify-content:space-between;padding:1.5rem}.modal-header h2{font:700 1.75rem "Space Grotesk",Arial,sans-serif}.modal-header h2 i{margin-right:.5rem}.modal-body p{white-space:pre-line}.modal-close{background:0 0;border:none;color:#fff;cursor:pointer;font-size:1.5rem;padding:.5rem;transition:color .2s ease-out}.modal-close:focus,.modal-close:hover{color:var(--secondary)}.modal-body{padding:1.5rem}.modal-image{border:2px dashed var(--secondary);border-radius:8px;height:auto;margin-bottom:1.5rem;max-height:50vh;object-fit:cover;width:100%}.language-tags{display:flex;flex-wrap:wrap;gap:.75rem;margin:1rem 0}.language-tag{background:var(--primary);border:1px solid var(--secondary);border-radius:4px;color:#fff;font-size:.9rem;font-weight:600;padding:.4rem 1rem}.development-status{align-items:center;background:var(--secondary);border:2px solid var(--accent);clip-path:polygon(10% 0%,90% 0%,100% 50%,90% 100%,10% 100%,0% 50%);color:var(--accent);display:inline-flex;font-size:.95rem;font-weight:700;margin-top:1rem;padding:.5rem 1.25rem;position:relative}.development-status i{margin-right:.5rem}@supports not (clip-path:polygon(10% 0%,90% 0%,100% 50%,90% 100%,10% 100%,0% 50%)){.development-status{border-radius:6px;padding:.5rem 1rem}}@supports not (display:inline-flex){.development-status{display:inline-block}}@media all and (max-width:768px){.project-grid{display:block}.project-card{margin-bottom:2rem}}@media (max-width:768px){.project-grid{padding:1rem}.modal-content{margin:1rem;width:95%}}@media (max-width:480px){.project-card{padding:1rem}.details-button{padding:.6rem 1rem}.modal-body,.modal-header{padding:1rem}.development-status{padding:.4rem 1rem}.project-card::before{font-size:4rem}}@media (prefers-reduced-motion:reduce){.project-card::after,.project-card::before{opacity:0!important}}@media print{.details-button,.modal{display:none!important}.project-card{break-inside:avoid;border:1px solid #ccc;box-shadow:none;page-break-inside:avoid}.language-tag{background:#f5f5f5;border:1px solid #ccc;color:#000}}@media (forced-colors:active){.details-button{border:2px solid currentColor}.project-card{border:2px solid currentColor}.modal-content{border:3px solid currentColor}.language-tag{border:1px solid currentColor}}