@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/SpaceMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/SpaceMono-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/SpaceMono-BoldItalic.woff2') format('woff2');
  font-weight: 900; font-style: italic; font-display: swap;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root { --bg:#1a1a1a; --bg-alt:#222; --text:#f0f0f0; --text-off:#efdda1; --text-muted:#aaa; --accent:#e0ca80; --selected:#c89e15; --card-bg:#2a2a2a; --nav-height:70px; --max-w:1200px; }
html { scroll-behavior:smooth; }
body { font-family:'Space Mono', ui-monospace,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--text); line-height:1.6; }
a { color:var(--text-off); text-decoration:none; } img { max-width:100%; height:auto; display:block; }
header { font-family:'Space Mono', ui-monospace,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; font-style:italic;position:sticky; top:0; z-index:100; background:var(--bg); border-bottom:1px solid #333; }
h2 {font-style:italic;}
nav { max-width:var(--max-w); margin:0 auto; height:var(--nav-height); display:flex; align-items:center; justify-content:space-between; padding:0 2rem; }
.logo { font-size:1.3rem; font-weight:600; letter-spacing:.03em; }
.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a { font-size:.9rem; letter-spacing:.05em; transition:color .2s; }
.nav-links a:hover { color:var(--accent); }
.dead-link a { font-size:.9rem; letter-spacing:.05em; transition:color .2s; color:var(--selected)}
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
.hamburger span { display:block; width:24px; height:2px; background:var(--text); transition:.3s; }
section { padding:1rem 2rem; } .container { max-width:var(--max-w); margin:0 auto; }
.section-heading { text-align:center; font-size:2rem; font-weight:400; letter-spacing:.15em; text-transform:uppercase; margin-bottom:2rem; color:var(--text-muted); }
.video-container { position:relative; padding-bottom:56.25%; height:0; max-width:860px; margin:0 auto 2rem; border-radius:6px; overflow:hidden; background:#000; }
.video-container iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; }
.reels { margin-top:1rem; }
.reel-row { display:flex; gap:2rem; }
.reel-col { flex:1; min-width:0; }
.reel-col .video-container { max-width:100%; margin:0 0 1rem; padding-bottom:56.25%; height:0; }
.tagline { text-align:center; padding:1rem 2rem 0; font-size:1rem; letter-spacing:.08em; color:var(--text-muted); }
.tagline strong { color:var(--text); font-weight:600; }
.card-grid { display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center; }
.card { background:var(--card-bg); border-radius:8px; overflow:hidden; transition:transform .25s,box-shadow .25s; display:block; color:var(--text); width:300px; flex-shrink:0; }
.card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,.4); }
.card img { width:100%; aspect-ratio:1; object-fit:cover; }
.card-body { padding:1.2rem 1.4rem 1.6rem; }
.card-body h3 { font-size:1.2rem; margin-bottom:.3rem; }
.card-body p { font-size:.9rem; color:var(--text-muted); margin-bottom:1rem; }
.card-link { display:inline-block; font-size:.85rem; letter-spacing:.08em; border-bottom:1px solid var(--accent); color:var(--accent); }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.2rem; }
.gallery-item { position:relative; border-radius:8px; overflow:hidden; aspect-ratio:1; background:var(--card-bg); }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.gallery-item:hover img { transform:scale(1.05); }
.gallery-item .overlay { position:absolute; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s; }
.gallery-item:hover .overlay { opacity:1; }
.gallery-item .overlay span { color:#fff; font-size:1.1rem; font-weight:600; text-align:center; padding:.5rem; }
.intro { background:var(--bg-alt); }
.intro-inner { display:flex; align-items:center; gap:3rem; flex-wrap:wrap; }
.intro-img { flex:0 0 280px; max-width:280px; } .intro-img img { border-radius:8px; }
.intro-text { flex:1; min-width:280px; } .intro-text h1 { font-size:2rem; margin-bottom:1rem; }
.intro-text p { color:var(--text-muted); margin-bottom:1rem; max-width:520px; }
.btn, button.btn { display:inline-block; padding:.65rem 1.6rem; border:1px solid var(--text); border-radius:4px; font-size:.85rem; letter-spacing:.08em; transition:background .2s,color .2s; margin-top:.5rem; font-family:inherit; background:transparent; color:var(--text); cursor:pointer; }
.btn:hover { background:var(--text); color:var(--bg); background:var(--card-bg)}
.project-detail { max-width:860px; margin:0 auto; } .project-text { margin-top:1.5rem; }
.project-text p { margin-bottom:1rem; color:var(--text-muted); }
.project-text a { color:var(--accent); border-bottom:1px solid transparent; }
.project-text a:hover { border-bottom-color:var(--accent); }
.project-text a.btn { border:1px solid var(--text); color:var(--text); }
.project-text a.btn:hover { background:var(--text); color:var(--bg); border:1px solid var(--text); }
.hero-image { max-width:min(600px,100%); margin:0 auto 2rem; border-radius:6px; overflow:hidden; }
.watch-link { text-align:center; margin:1.5rem 0; }
.content-image { margin:1.5rem auto; max-width:min(800px,100%); border-radius:6px; }
.prev-next { display:flex; justify-content:space-between; margin-top:3rem; padding-top:1.5rem; border-top:1px solid #333; }
.pn-link { color:var(--accent); font-size:.9rem; }
.blog-list { display:flex; flex-direction:column; gap:2.5rem; }
.blog-entry { display:flex; gap:1.5rem; align-items:flex-start; }
.blog-entry:hover {transform:translateX(4px); box-shadow:0 8px 24px rgba(0,0,0,.4); background:var(--card-bg);}
.blog-entry img { width:260px; height:180px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.blog-entry-text h2 { font-size:1.3rem; margin-bottom:.3rem; }
.blog-entry-text h2 a { transition:color .2s; } .blog-entry-text h2 a:hover { color:var(--accent); }
.blog-entry-text .meta { font-size:.8rem; color:var(--text-muted); margin-bottom:.5rem; }
.blog-entry-text p { color:var(--text-muted); font-size:.9rem; }
.blog-post h1 { font-size:2rem; margin-bottom:.5rem; }
.post-meta { color:var(--text-muted); font-size:.85rem; margin-bottom:1.5rem; }
.post-hero { width:100%; max-width:700px; border-radius:6px; margin-bottom:2rem; }
.post-body p { color:var(--text-muted); margin-bottom:1rem; }
.post-body iframe { margin:1.5rem 0; }
.fs-wrap { margin:1.5rem 0; border-radius:8px; overflow:hidden; background:transparent; }
.fs-wrap iframe { display:block; width:100%; max-width:920px; height:245px; border:none; filter:invert(1) hue-rotate(180deg); }
.about-page img { width:100%; max-width:500px; border-radius:8px; margin:0 auto 2rem; }
.about-page p { color:var(--text-muted); margin-bottom:1.2rem; max-width:750px; } .about-page a { color:var(--accent); }
.about-layout { display:flex; gap:2.5rem; align-items:flex-start; }
.about-layout img { flex:0 0 320px; max-width:420px; margin:0; }
.about-text { flex:1; min-width:0; }
.contact-form { display:flex; flex-direction:column; gap:1.2rem; max-width:560px; }
.contact-form label { display:flex; flex-direction:column; gap:.4rem; }
.contact-form label span { font-size:.85rem; letter-spacing:.05em; color:var(--text-muted); }
.contact-form input, .contact-form textarea {
  font-family:inherit; font-size:.95rem; background:var(--card-bg); color:var(--text);
  border:1px solid #333; border-radius:6px; padding:.7rem .9rem; width:100%; resize:vertical;
}
.contact-form input:focus, .contact-form textarea:focus { outline:none; border-color:var(--accent); }
.contact-form .btn { align-self:flex-start; cursor:pointer; }
.form-status { font-size:.85rem; color:var(--text-muted); min-height:1.2em; }
.form-status.ok { color:var(--accent); }
.form-status.err { color:#e08080; }
.misc-page { max-width:860px; margin:0 auto; } .misc-page p { color:var(--text-muted); margin-bottom:1rem; }
.misc-page a { color:var(--accent); } .misc-page img { max-width:min(600px,100%); margin:1.5rem auto; border-radius:6px; }
footer { text-align:center; padding:3rem 2rem; border-top:1px solid #333; }
footer h4 { font-size:.9rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.8rem; font-weight:600; }
.footer-links { display:flex; justify-content:center; gap:1.5rem; margin-bottom:.5rem; }
.footer-links a { color:var(--text-muted); font-size:.85rem; transition:color .2s; } .footer-links a:hover { color:var(--accent); }
footer .email { font-size:.85rem; color:var(--text-muted); }
@media(max-width:768px) {
    .hamburger{display:flex}
    .nav-links{display:none;position:absolute;top:var(--nav-height);left:0;right:0;background:var(--bg);flex-direction:column;padding:1.5rem 2rem;gap:1.2rem;border-bottom:1px solid #333}
    .nav-links.open{display:flex} .intro-inner{flex-direction:column;text-align:center;gap:1rem}
    .intro-img{margin:0 auto;flex:auto;} .intro-text p{margin-left:auto;margin-right:auto}
    .blog-entry{flex-direction:column}
    .blog-entry img{width:100%; height: auto; max-height: 540;}
    .reel-row{flex-direction:column}
    .about-layout{flex-direction:column}
    .about-layout img{flex-basis:auto;max-width:500px;margin:0 auto 1.5rem} 
  }