/* Project detail pages share the portfolio's colors and typography. */
body.project-page { padding-bottom:0; }
html:has(.project-page) { scroll-padding-top:100px; }
.project-header { position:sticky; top:0; z-index:20; border-bottom:1px solid var(--border-color); background:var(--bg-color); }
.project-header-inner { max-width:1240px; margin:auto; padding:18px 30px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.project-brand { text-decoration:none; font:600 .95rem var(--font-head); }
.project-header-actions { display:flex; align-items:center; gap:20px; }
.project-back { text-decoration:none; font-size:.8rem; }
.project-theme { border:1px solid var(--border-color); border-radius:50%; width:42px; height:42px; color:var(--text-dark); background:var(--card-bg); }
.project-shell { max-width:1240px; margin:auto; padding:60px 30px 0; }
.project-eyebrow { color:var(--accent-color); font-size:.7rem; text-transform:uppercase; letter-spacing:2px; margin-bottom:20px; }
.project-intro { max-width:940px; }
.project-intro h1 { font:500 clamp(2.4rem,6vw,5rem)/1.1 var(--font-head); letter-spacing:-.055em; margin-bottom:24px; overflow-wrap:anywhere; }
.project-deck { color:var(--text-gray); font-size:clamp(1rem,1.7vw,1.2rem); max-width:760px; margin-bottom:25px; }
.project-intro .tags { margin-bottom:28px; }
.project-actions { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:34px; }
.project-action { display:inline-flex; align-items:center; justify-content:space-between; gap:25px; padding:13px 20px; border:1px solid var(--border-color); border-radius:30px; text-decoration:none; font-size:.8rem; background:var(--card-bg); }
.project-action.primary { background:var(--text-dark); color:var(--bg-color); border-color:var(--text-dark); }
.project-action:hover { box-shadow:0 3px 15px #0001; }
.project-cover { border:1px solid var(--border-color); border-radius:22px; padding:20px; background:var(--card-bg); margin-bottom:20px; }
.project-cover a { display:block; }
.project-cover img { display:block; width:100%; height:clamp(260px,48vw,590px); object-fit:contain; }
figcaption { color:var(--text-gray); font-size:.75rem; margin-top:12px; }
.project-section-nav { display:flex; flex-wrap:wrap; gap:8px 25px; border-bottom:1px solid var(--border-color); padding:20px 0 25px; margin-bottom:50px; }
.project-section-nav a { text-decoration:none; font-size:.8rem; color:var(--text-gray); }
.project-section-nav a:hover { color:var(--text-dark); }
.project-columns { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:70px; align-items:start; }
.project-content { min-width:0; }
.project-section { margin-bottom:65px; scroll-margin-top:100px; }
.project-section h2 { font:500 clamp(1.6rem,3vw,2.2rem)/1.2 var(--font-head); letter-spacing:-.04em; margin-bottom:24px; }
.project-section p { color:var(--text-gray); font-size:.95rem; margin-bottom:18px; }
.project-feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.project-feature { background:var(--card-bg); border:1px solid var(--border-color); border-radius:16px; padding:24px; }
.project-feature h3 { font:600 .95rem/1.4 var(--font-head); margin-bottom:12px; }
.project-feature p { font-size:.85rem; margin-bottom:0; }
.project-sidebar { position:sticky; top:110px; padding:26px; border:1px solid var(--border-color); border-radius:18px; background:var(--card-bg); }
.project-sidebar h2 { font:600 .9rem var(--font-head); margin-bottom:22px; }
.project-sidebar dl div { margin-bottom:20px; }
.project-sidebar dt { font-size:.65rem; letter-spacing:1px; color:var(--text-gray); text-transform:uppercase; margin-bottom:6px; }
.project-sidebar dd { font-size:.85rem; overflow-wrap:anywhere; }
.project-sidebar a { display:block; font-size:.8rem; margin-top:18px; }
.project-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.project-gallery figure { min-width:0; }
.project-gallery a { display:block; border:1px solid var(--border-color); border-radius:14px; padding:12px; background:var(--card-bg); transition:border-color .2s; }
.project-gallery a:hover { border-color:var(--accent-color); }
.project-gallery img { display:block; width:100%; height:230px; object-fit:contain; }
.project-tools { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.project-tools span { background:var(--card-bg); border:1px solid var(--border-color); padding:8px 13px; border-radius:9px; font-size:.8rem; }
.project-resource-list { list-style:none; padding:0; }
.project-resource-list li { border-bottom:1px solid var(--border-color); }
.project-resource-list a { display:flex; align-items:center; justify-content:space-between; gap:20px; text-decoration:none; padding:18px 0; font-size:.9rem; overflow-wrap:anywhere; }
.project-resource-list a:hover { color:var(--accent-color); }
.project-resource-list small { display:block; color:var(--text-gray); font-size:.72rem; margin-top:4px; }
.project-docs { margin-top:34px; }
.project-docs h3 { font:600 1rem var(--font-head); margin-bottom:5px; }
.project-pagination { border-top:1px solid var(--border-color); display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:35px 0; }
.project-pagination a { padding:25px; border:1px solid var(--border-color); border-radius:15px; text-decoration:none; }
.project-pagination a:last-child { text-align:right; }
.project-pagination span { display:block; color:var(--text-gray); font-size:.7rem; margin-bottom:10px; }
.project-pagination strong { font:500 1.1rem var(--font-head); }
.project-footer { border-top:1px solid var(--border-color); padding:30px; text-align:center; color:var(--text-gray); font-size:.8rem; }
.project-lightbox { margin:auto; padding:0; border:1px solid #ffffff35; border-radius:18px; background:#161b18; color:#fff; width:min(1100px,94vw); max-height:94dvh; }
.project-lightbox::backdrop { background:#080d0bf0; }
.lightbox-header { display:flex; align-items:center; justify-content:space-between; padding:15px 20px; gap:20px; }
.lightbox-header button,.lightbox-controls button { border:1px solid #ffffff40; border-radius:30px; padding:10px 18px; color:#fff; background:transparent; }
.lightbox-image { width:100%; height:65dvh; object-fit:contain; display:block; padding:0 20px; }
.lightbox-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px; }
.lightbox-caption { font-size:.8rem; color:#ced6d0; text-align:center; }
body.gallery-open { overflow:hidden; }
.project-page :focus-visible { outline-offset:4px; }
@media(max-width:900px) { .project-columns { grid-template-columns:minmax(0,1fr); gap:0; } .project-sidebar { position:static; order:-1; margin-bottom:45px; } .project-sidebar dl { display:grid; grid-template-columns:1fr 1fr; gap:0 25px; } }
@media(max-width:520px) { .project-header-inner { padding:12px 18px; } .project-brand { font-size:.8rem; } .project-header-actions { gap:12px; } .project-back { font-size:.7rem; } .project-shell { padding:35px 20px 0; } .project-intro h1 { font-size:2.6rem; } .project-cover { padding:10px; border-radius:15px; } .project-feature-grid,.project-gallery { grid-template-columns:1fr; } .project-section { margin-bottom:45px; } .project-sidebar { padding:20px; } .project-sidebar dl { grid-template-columns:1fr; } .project-pagination { grid-template-columns:1fr; gap:12px; } .project-pagination a:last-child { text-align:left; } .lightbox-controls { flex-wrap:wrap; } .lightbox-caption { width:100%; order:1; } .project-gallery img { height:250px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }