:root{
  --bg:#0B0C0E; --surface:#141618; --surface2:#1E2024; --border:#2A2D33;
  --text:#F0EDE6; --muted:#8A8D94; --accent:#3B8BEB; --accent2:#6EAEF5;
  --mono:'JetBrains Mono',monospace; --sans:'Inter',sans-serif; --display:'Space Grotesk',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6}
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:1.25rem 3rem;background:rgba(11,12,14,0.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-logo{display:flex;align-items:center;gap:.55rem;font-family:var(--display);font-size:0.95rem;font-weight:600;color:var(--text);letter-spacing:-0.01em;text-decoration:none}
.nav-logo-icon{width:1.5rem;height:1.5rem;object-fit:cover;border-radius:2px}
.nav-links{display:flex;gap:2.5rem;list-style:none}
.nav-links a{font-family:var(--mono);font-size:0.78rem;color:var(--muted);text-decoration:none;letter-spacing:0.08em;text-transform:uppercase;transition:color 0.2s}
.nav-links a:hover{color:var(--text)}
.btn{font-family:var(--mono);text-transform:uppercase;padding:0.7rem 1.4rem;border-radius:2px;text-decoration:none;display:inline-block}
.btn-primary{background:var(--accent);color:#fff}
.container{max-width:1100px;margin:0 auto;padding:6rem 3rem}
.project-hero{padding-top:6rem;text-align:center}
.project-hero ul,.project-hero ol{list-style-position:inside}
.project-page-title{font-family:var(--display);font-size:2rem;margin-bottom:0.5rem}
.project-thumb{background:var(--surface2);border:1px solid var(--border);border-radius:4px;overflow:hidden}
.project-body{margin-top:1rem}
.source-content{max-width:780px;margin:2rem auto 0;display:grid;gap:1.5rem}
.source-content p,.source-content li{color:var(--muted);line-height:1.75}
.source-content p strong{font-family:var(--display);font-size:1.08rem;color:var(--text)}
.source-content a{color:var(--accent2)}
.source-block{display:grid;gap:1rem}
.source-block + .source-block{margin-top:1rem}
.source-block h3{font-family:var(--display);font-size:1.1rem;line-height:1.35}
.source-block ul{padding-left:1.25rem;display:grid;gap:.5rem}
.source-image-placeholder{min-height:220px;display:grid;place-items:center;padding:2rem;background:var(--surface2);border:1px dashed var(--accent);border-radius:4px;color:var(--accent2);font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-align:center;text-transform:uppercase}
.source-image-placeholder.wide{min-height:300px}
.source-image{width:100%;height:auto;display:block;border:1px solid var(--border);border-radius:4px}
.source-image-list{display:grid;gap:1.5rem;clear:both}
.source-image-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.source-image-row .source-image:first-child{height:auto}
.source-image-row:not(.comparison-row-one):not(.comparison-row-two) .source-image,
.source-image-row:not(.comparison-row-one):not(.comparison-row-two) .source-video{aspect-ratio:4/3;height:auto;object-fit:contain;background:var(--surface2)}
.source-image-row.comparison-row-one .source-image:last-child{height:auto;aspect-ratio:2.326;object-fit:cover}
.source-image-row.comparison-row-two .source-image:last-child{height:auto;aspect-ratio:2.116;object-fit:cover}
.source-image-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:center}
.source-image-story .source-image{height:100%;object-fit:cover}
.source-image-story p{margin:0;color:var(--text);font-size:1rem;font-weight:600;line-height:1.7}
.source-flow{display:flow-root;color:var(--muted);line-height:1.75}
.source-flow-image{float:left;width:46%;max-width:360px;margin:0 1.5rem 1rem 0}
.source-flow p{margin-bottom:1rem}
.source-caption{margin-top:-1rem;color:var(--muted);font-family:var(--mono);font-size:.72rem;line-height:1.5;text-align:center}
.source-caption a{color:var(--accent2)}
.source-video{width:100%;display:block;border:1px solid var(--border);border-radius:4px;background:var(--surface2)}
.source-document-preview{width:100%;height:680px;border:1px solid var(--border);border-radius:4px;background:var(--surface2)}
.source-document-link{display:inline-block;font-family:var(--mono);font-size:.75rem;color:var(--accent2);text-decoration:none}
.source-carousel{position:relative;overflow:hidden;background:var(--surface2);border:1px solid var(--border);border-radius:4px}
.source-carousel-track{display:flex;transition:transform .3s ease}
.source-carousel-slide{min-width:100%;margin:0}
.source-carousel-slide img{width:100%;height:auto;display:block}
.source-carousel.fixed-ratio{aspect-ratio:var(--carousel-ratio,3/2)}
.source-carousel.fixed-ratio .source-carousel-track,.source-carousel.fixed-ratio .source-carousel-slide{height:100%}
.source-carousel.fixed-ratio .source-carousel-slide img{height:100%;object-fit:contain;background:var(--surface2)}
.source-carousel-slide figcaption{padding:.5rem 1rem;text-align:center;font-size:.85rem;color:var(--muted);background:var(--surface)}
.source-carousel-button{position:absolute;top:50%;z-index:1;width:2.25rem;height:2.25rem;padding:0;display:grid;place-items:center;border:1px solid var(--border);border-radius:50%;background:rgba(11,12,14,.8);color:var(--text);font-size:1.25rem;line-height:1;cursor:pointer;transform:translateY(-50%)}
.source-carousel-button:hover{border-color:var(--accent);color:var(--accent2)}
.source-carousel-button:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.source-carousel-button.previous{left:.75rem}.source-carousel-button.next{right:.75rem}
.source-carousel-dots{display:flex;justify-content:center;gap:.5rem;padding:.75rem;background:var(--surface)}
.source-carousel-dot{width:.55rem;height:.55rem;padding:0;border:1px solid var(--muted);border-radius:50%;background:transparent;cursor:pointer}
.source-carousel-dot.active{border-color:var(--accent);background:var(--accent)}
.footer{padding:2rem;text-align:center;border-top:1px solid var(--border);font-family:var(--mono);font-size:0.68rem;color:var(--muted)}
@media (max-width:700px){.container{padding-left:1.5rem;padding-right:1.5rem}.project-gallery{grid-template-columns:1fr}.source-image-row{grid-template-columns:1fr}.source-image-row .source-image{height:auto;aspect-ratio:auto!important}.source-image-story{grid-template-columns:1fr}.source-image-story p{font-size:.95rem}.source-document-preview{height:520px}}
@media (max-width:768px){nav{padding:1rem 1.5rem}.nav-links{display:none}}