/* Portfolio design system. Dark industrial: sharp rules, one hot accent. */
@font-face { font-family:'Archivo'; src:url('/assets/fonts/archivo-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('/assets/fonts/archivo-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Archivo Black'; src:url('/assets/fonts/archivo-black.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Archivo Var'; src:url('/assets/fonts/archivo-var.woff2') format('woff2-variations'); font-weight:100 900; font-stretch:62% 125%; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('/assets/fonts/jbmono-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('/assets/fonts/jbmono-500.woff2') format('woff2'); font-weight:500; font-display:swap; }

:root {
  --bg:#0e0e0e; --panel:#141414; --rule:#2a2a2a; --accent:#3d5bff;
  --text:#f2f2f2; --muted:#a3a3a3; --dim:#666;
  --overlay:#000a; --bar:#000c; --rule2:#1e1e1e; --rule3:#333;
  --display:'Archivo Black',Helvetica,sans-serif;
  --body:'Archivo',Helvetica,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:var(--body); }
body::after { content:''; position:fixed; inset:0; pointer-events:none; opacity:.05; z-index:98;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); }
img, video { max-width:100%; display:block; }
.mono { font-family:var(--mono); }
a { color:inherit; }

/* progress + reveals */
.prog { position:fixed; top:0; left:0; height:2px; background:var(--accent); width:0; z-index:100; }
.rv { opacity:0; transform:translateY(30px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity:1; transform:none; }
.rv.d1{transition-delay:.1s} .rv.d2{transition-delay:.22s} .rv.d3{transition-delay:.34s}

/* hero */
.hero { min-height:94vh; display:flex; flex-direction:column; justify-content:center; padding:0 6vw; position:relative; overflow:hidden; }
.meta { font-family:var(--mono); font-size:11px; color:var(--g888,#888); letter-spacing:1px; display:flex; justify-content:space-between; border-bottom:1px solid var(--accent); padding-bottom:12px; margin-bottom:6vh; }
h1 { font-family:var(--display); font-size:clamp(38px,7.6vw,108px); font-weight:400; letter-spacing:-.02em; line-height:.95; text-transform:uppercase; }
h1.kinetic { font-family:'Archivo Var','Archivo Black',sans-serif; font-weight:900; }
h1.kinetic .kw { display:inline-block; white-space:nowrap; }
h1.kinetic .k { display:inline-block; font-variation-settings:'wght' 900,'wdth' 100; transition:font-variation-settings .18s linear; will-change:font-variation-settings; }
h1.kinetic .k.load { animation:bloom 1.1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes bloom { from { font-variation-settings:'wght' 100,'wdth' 62; opacity:0; } to { font-variation-settings:'wght' 900,'wdth' 100; opacity:1; } }
@media (prefers-reduced-motion: reduce) { h1.kinetic .k, h1.kinetic .k.load { animation:none; transition:none; font-variation-settings:'wght' 900,'wdth' 100; } }
.accent { color:var(--accent); }
.sub { font-family:var(--mono); font-size:13px; line-height:1.8; color:var(--g999,#999); margin-top:4vh; max-width:540px; }
.sub b { color:var(--text); font-weight:500; }
.sub b.accent { color:var(--accent); }
/* temporary theme picker */
:root[data-theme=signal] { --accent:#ffd400; }
:root[data-theme=acid]   { --accent:#a3ff12; }
:root[data-theme=cyan]   { --accent:#33e0ff; }
:root[data-theme=magenta]{ --accent:#ff3d8a; }
:root[data-theme=ultra]  { --accent:#7a5cff; }
:root[data-theme=mint] { --accent:#2ee6a6; }
:root[data-theme=bone] {
  --bg:#f4f5f7; --panel:#eaecef; --rule:#c9cdd4; --accent:#2742f5;
  --text:#14161a; --muted:#464a52; --dim:#6e737d;
  --overlay:#fffc; --bar:#f4f5f7ee; --rule2:#dde0e5; --rule3:#aeb3bc;
  --g888:#5f646d; --g999:#575c65; --gaaa:#50555e; --gbbb:#383c43;
  --g777:#666b74; --g666:#6e737d; --g555:#787d86; --g444:#9ba0a9;
}
:root[data-theme=bone] body::after { opacity:.04; }
:root[data-theme=bone] .sub, :root[data-theme=bone] .meta, :root[data-theme=bone] .marquee span { color:var(--muted); }
:root[data-theme=bone] .cs { color:#383c43; }
:root[data-theme=bone] .cap { color:#575c65; }
.themebar { position:absolute; top:0; right:0; z-index:99; display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--bar); border-left:1px solid var(--rule); border-bottom:1px solid var(--rule); font-family:var(--mono); font-size:9px; letter-spacing:1.5px; color:var(--g777,#777); }
.themebar button { width:16px; height:16px; border:1px solid var(--g444,#444); cursor:pointer; padding:0; }
.themebar button.on { outline:2px solid #fff; outline-offset:1px; }
.projlink { display:inline-block; margin-top:24px; font-family:var(--mono); font-size:11px; letter-spacing:2px; text-decoration:none; padding:12px 20px; border:1px solid var(--accent); background:var(--accent); color:var(--bg); transition:background .25s,color .25s; align-self:flex-start; }
.projlink:hover, .projlink:focus-visible { background:transparent; color:var(--accent); }
.marquee { position:absolute; bottom:0; left:0; right:0; overflow:hidden; border-top:1px solid var(--rule); padding:10px 0; white-space:nowrap; }
.marquee span { display:inline-block; font-family:var(--mono); font-size:11px; color:var(--accent); opacity:.55; letter-spacing:2px; animation:slide 22s linear infinite; }
@keyframes slide { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* project panels */
.proj { display:grid; grid-template-columns:1fr 1.25fr; border-top:1px solid var(--rule); min-height:86vh; }
.proj.flip { grid-template-columns:1.25fr 1fr; }
.txt { padding:8vh 5vw; display:flex; flex-direction:column; justify-content:center; }
.num { font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:2px; margin-bottom:18px; }
.proj h2, .pagehead h2 { font-family:var(--display); font-size:clamp(28px,4vw,52px); font-weight:400; letter-spacing:-.01em; text-transform:uppercase; }
.proj h2 a { text-decoration:none; background-image:linear-gradient(var(--accent),var(--accent)); background-repeat:no-repeat; background-size:0% 3px; background-position:0 96%; transition:background-size .4s cubic-bezier(.2,.7,.2,1); }
.proj h2 a:hover, .proj h2 a:focus-visible { background-size:100% 3px; }
.cs { margin-top:22px; font-size:13.5px; line-height:1.7; color:var(--gbbb,#bbb); max-width:440px; display:grid; gap:10px; }
.cs div { display:grid; grid-template-columns:96px 1fr; gap:12px; }
.cs dt { font-family:var(--mono); font-size:10px; color:var(--dim); letter-spacing:1.5px; padding-top:4px; }
.tags { margin-top:24px; display:flex; flex-wrap:wrap; gap:6px; }
.tags i { font-family:var(--mono); font-style:normal; font-size:10px; border:1px solid var(--rule3); padding:6px 10px; color:var(--gaaa,#aaa); letter-spacing:1px; }

/* media side + carousel */
.shot { border-left:1px solid var(--rule); overflow:hidden; background:var(--panel); position:relative; display:block; }
.flip .shot { border-left:none; border-right:1px solid var(--rule); }
.cap { position:absolute; bottom:10px; right:12px; font-family:var(--mono); font-size:9.5px; color:var(--g777,#777); background:var(--overlay); padding:4px 8px; letter-spacing:1px; z-index:3; }
.carousel { position:relative; height:100%; min-height:340px; }
.carousel .slide { position:absolute; inset:0; opacity:0; transition:opacity .6s ease; display:flex; align-items:center; justify-content:center; }
.carousel .slide.on { opacity:1; }
.carousel .slide img, .carousel .slide video { width:100%; height:100%; object-fit:cover; transform:scale(1.05); transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
.proj:hover .carousel .slide img, .proj:hover .carousel .slide video { transform:scale(1); }
.carousel .dots { position:absolute; bottom:12px; left:12px; display:flex; gap:6px; z-index:3; }
.carousel .dots button { width:8px; height:8px; border:1px solid var(--g888,#888); background:transparent; cursor:pointer; padding:0; }
.carousel .dots button.on { background:var(--accent); border-color:var(--accent); }
.carousel .arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:3; font-family:var(--mono); font-size:14px; color:var(--text); background:var(--overlay); border:1px solid var(--g444,#444); width:34px; height:34px; cursor:pointer; opacity:0; transition:opacity .3s; }
.carousel:hover .arrow, .carousel .arrow:focus-visible { opacity:1; }
.carousel .arrow.prev { left:10px; } .carousel .arrow.next { right:10px; }

/* more work index */
.morework { border-top:1px solid var(--rule); padding:10vh 6vw; }
.morework .label { font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:2px; margin-bottom:26px; }
.morework .row { display:grid; grid-template-columns:1fr 2fr auto; gap:16px; align-items:baseline; border-top:1px solid var(--rule2); padding:16px 0; }
.morework .row:last-child { border-bottom:1px solid var(--rule2); }
.morework .name { font-family:var(--display); font-size:17px; text-transform:uppercase; letter-spacing:.02em; }
.morework .desc { font-size:13px; color:var(--muted); }
.morework .dom { font-family:var(--mono); font-size:10px; color:var(--dim); letter-spacing:1.5px; }

/* cta + footer */
.cta { text-align:center; padding:15vh 6vw 10vh; border-top:1px solid var(--rule); }
.cta h2 { font-family:var(--display); font-size:clamp(32px,5.5vw,72px); font-weight:400; text-transform:uppercase; }
.cta a.btn { display:inline-block; margin-top:4vh; border:1px solid var(--accent); color:var(--accent); text-decoration:none; font-family:var(--mono); font-size:13px; letter-spacing:2px; padding:16px 34px; transition:background .25s,color .25s; }
.cta a.btn:hover, .cta a.btn:focus-visible { background:var(--accent); color:var(--bg); }
footer { border-top:1px solid var(--rule); padding:26px 6vw; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-family:var(--mono); font-size:10.5px; color:var(--dim); letter-spacing:1px; }
footer .t { color:var(--g999,#999); }

/* feature pages */
.pagehead { padding:12vh 6vw 6vh; }
.back { font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--muted); text-decoration:none; }
.back:hover { color:var(--accent); }
.pagehead h2 { font-size:clamp(40px,7vw,96px); margin-top:3vh; }
.dek { font-family:var(--mono); font-size:13px; color:var(--g999,#999); margin-top:2vh; max-width:560px; line-height:1.8; }
.heromedia { border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); background:var(--panel); }
.casestudy { padding:8vh 6vw; max-width:860px; }
.casestudy .cs { max-width:none; }
.gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1px; background:var(--rule); border-top:1px solid var(--rule); }
.gallery > * { background:var(--panel); }
.linkrow { padding:6vh 6vw; border-top:1px solid var(--rule); font-family:var(--mono); font-size:12px; letter-spacing:1px; }
.linkrow a { color:var(--accent); }

@media (max-width:800px) {
  .proj, .proj.flip { grid-template-columns:1fr; min-height:0; }
  .proj .txt { order:1; }
  .proj .shot { order:2; }
  .shot, .flip .shot { border-left:none; border-right:none; border-top:1px solid var(--rule); min-height:280px; }
  .carousel { min-height:280px; }
  .morework .row { grid-template-columns:1fr; gap:4px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .rv { opacity:1; transform:none; transition:none; }
  .marquee span { animation:none; }
  .carousel .slide img, .carousel .slide video { transform:none; transition:none; }
}

/* contact modal */
dialog.contact { margin:auto; border:1px solid var(--accent); background:var(--bg); color:var(--text); padding:0; max-width:520px; width:calc(100% - 40px); }
dialog.contact::backdrop { background:var(--overlay); backdrop-filter:blur(6px); }
dialog.contact[open] { animation:dlg .45s cubic-bezier(.2,.7,.2,1); }
@keyframes dlg { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }
.contact .inner { padding:34px 34px 30px; position:relative; }
.contact .close { position:absolute; top:14px; right:14px; background:none; border:1px solid var(--rule3); color:var(--muted); font-family:var(--mono); font-size:12px; width:32px; height:32px; cursor:pointer; }
.contact .close:hover { border-color:var(--accent); color:var(--accent); }
.contact h3 { font-family:var(--display); font-size:30px; text-transform:uppercase; letter-spacing:-.01em; }
.contact .to { font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:1.5px; margin-top:8px; }
.contact .to a { color:var(--accent); text-decoration:none; }
.contact form { margin-top:24px; display:grid; gap:16px; }
.contact label { font-family:var(--mono); font-size:10px; color:var(--dim); letter-spacing:1.5px; display:grid; gap:6px; }
.contact input, .contact textarea { background:var(--panel); border:1px solid var(--rule3); color:var(--text); font-family:var(--body); font-size:14px; padding:12px; resize:vertical; }
.contact input:focus, .contact textarea:focus { outline:none; border-color:var(--accent); }
.contact button[type=submit] { justify-self:start; background:var(--accent); color:var(--bg); border:1px solid var(--accent); font-family:var(--mono); font-size:12px; letter-spacing:2px; padding:14px 28px; cursor:pointer; transition:background .25s,color .25s; }
.contact button[type=submit]:hover { background:transparent; color:var(--accent); }
.contact .sent { display:none; font-family:var(--mono); font-size:13px; color:var(--accent); letter-spacing:1px; margin-top:24px; }
.contact.done form { display:none; } .contact.done .sent { display:block; }
@media (prefers-reduced-motion: reduce) { dialog.contact[open] { animation:none; } }

/* footer mini pong */
.minipong canvas { display:block; width:220px; height:26px; border:1px solid var(--rule); cursor:none; }
@media (prefers-reduced-motion: reduce) { .minipong { display:none; } }

/* hero contact badge */
.hellobadge { position:absolute; right:9vw; bottom:20vh; width:150px; height:150px; cursor:pointer; background:none; border:none; padding:0; }
.hellobadge svg { width:100%; height:100%; overflow:visible; }
.hellobadge .ring { transform-origin:50% 50%; }
.hellobadge:hover .ring { animation:orbit 16s linear infinite; }
.hellobadge { animation:pulse 2.6s ease-in-out infinite; }
.hellobadge:hover { animation:none; }
@keyframes pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.06); } }
.hellobadge text { font-family:var(--mono); font-size:10.5px; letter-spacing:3.5px; fill:var(--muted); text-transform:uppercase; }
.hellobadge:hover text { fill:var(--accent); }
.hellobadge .corepos { fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.hellobadge .core { transform-box:fill-box; transform-origin:50% 100%; }
.hellobadge:hover .core { animation:wave .9s ease-in-out infinite; }
@keyframes wave { 0%,100% { transform:rotate(0deg); } 30% { transform:rotate(14deg); } 60% { transform:rotate(-8deg); } }
.hellobadge circle { fill:none; stroke:var(--rule); stroke-width:1; }
.hellobadge:hover circle { stroke:var(--accent); }
@keyframes orbit { to { transform:rotate(360deg); } }
@media (max-width:900px) { .hellobadge { position:static; margin-top:5vh; align-self:flex-start; } }
@media (prefers-reduced-motion: reduce) { .hellobadge, .hellobadge:hover .ring { animation:none; } }