/* Qubitspace portfolio */
:root{color-scheme:dark;--bg:#141612;--panel:#1b1e18;--text:#eeeae0;--muted:#adb0a3;--gold:#dec78e;--line:#34382d}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
a:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:3px}
::selection{background:#dec78e;color:#141612}
.page-container,.header-inner,.footer-inner{max-width:1220px;width:calc(100% - 112px);margin:0 auto}
.site-header{border-bottom:1px solid var(--line)}
.header-inner{min-height:98px;display:flex;align-items:center;gap:52px}
.brand{display:flex;align-items:center;gap:11px;font-size:25px;letter-spacing:-1.2px;font-weight:600}
.brand-dot{color:var(--gold)}
.header-inner nav{display:flex;gap:30px;margin-left:auto;font-size:14px}
.header-inner nav a{padding:12px 0;color:#c7c9bd;transition:color .2s}
.header-inner nav a:hover,.footer-inner a:hover{color:var(--gold)}
.hero{min-height:360px;display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:24px;padding:28px 0}
.eyebrow{font-family:monospace;font-size:10px;letter-spacing:1.8px;color:var(--muted);line-height:1.8;margin:0 0 20px}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(46px,5.4vw,72px);font-weight:400;line-height:1.1;letter-spacing:-2.8px;margin-bottom:27px}
.button{display:inline-flex;align-items:center;gap:30px;background:var(--gold);border:1px solid var(--gold);border-radius:4px;color:#22261b;padding:14px 20px;font-size:13px;font-weight:600;transition:background .2s,transform .2s}
.button:hover{background:#eddbb2;transform:translateY(-2px)}
.button span{font-size:20px;line-height:1}
.hero-art{width:310px;max-width:100%;justify-self:center}
.hero-art img{width:100%;height:auto;mix-blend-mode:lighten}
.projects{border-top:1px solid var(--line);padding:32px 0 40px}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin-bottom:27px}
h2{font-size:29px;line-height:1.3;font-weight:400;letter-spacing:-.8px;margin-bottom:0}
.project{display:grid;grid-template-columns:1fr 1.08fr;min-width:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:23px;background:var(--panel)}
.project-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:34px;min-width:0}
.project-kicker{display:flex;align-items:center;gap:15px;margin-bottom:22px}
.project-symbol{display:grid;place-items:center;width:41px;height:41px;border-radius:8px;border:1px solid #806e474d;background:#dec78e0a;color:#ddc58b;font-size:25px}
.project-label{font-family:monospace;font-size:9px;letter-spacing:1.4px;color:#b8c4a5;line-height:1.7}
h3{font-size:32px;letter-spacing:-1px;line-height:1.2;font-weight:500;margin-bottom:15px}
h3 span{color:var(--gold)}
.project-description{font-size:14px;line-height:1.8;color:var(--muted);max-width:420px;margin-bottom:20px}
.tags{display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:0 0 22px}
.tags li{font-size:10px;line-height:1.5;padding:5px 9px;border:1px solid #3b3e33;border-radius:3px;color:#b9bdac}
.project-link{display:inline-flex;align-items:center;gap:24px;font-size:12px;font-weight:500;color:var(--gold);padding:7px 0;border-bottom:1px solid #dec78e55;transition:gap .2s}
.project-link:hover{gap:32px}
.project-link span{font-size:18px}
.project-preview{position:relative;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:28px;border-left:1px solid var(--line)}
.chinese-preview{background:radial-gradient(ellipse at 75% 10%,#51574338,transparent 75%),#24291f}
.preview-heading{font-family:monospace;font-size:9px;letter-spacing:1.2px;color:#b6bea5;margin-bottom:18px}
.browser-window{border:1px solid #59604b;border-radius:6px;box-shadow:0 18px 35px #0003;overflow:hidden;transition:transform .35s}
.project-preview:hover .browser-window{transform:translateY(-4px)}
.browser-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#30362c;border-bottom:1px solid #59604b;padding:10px 13px;font-family:monospace;font-size:9px;color:#c5cab9}
.window-dots{font-size:7px;letter-spacing:3px;color:#858c79}
.chinese-preview .browser-window img{width:100%;height:240px;object-fit:cover;object-position:top}
.factory-preview{background-color:#22231c;background-image:linear-gradient(#64654610 1px,transparent 1px),linear-gradient(90deg,#64654610 1px,transparent 1px);background-size:22px 22px}
.factory-preview .browser-window{border-color:#5b5639}
.factory-preview .browser-bar{background:#303025;border-color:#504d36}
.factory-preview .browser-window img{width:100%;height:240px;object-fit:cover;object-position:center}
.factory-preview .preview-heading{color:#d1bf88}
.factory-symbol{font-size:30px;color:#d4b26e}
.project-satisfactory .project-label{color:#b4ac91}
.site-footer{border-top:1px solid var(--line)}
.footer-inner{display:flex;align-items:center;gap:24px;min-height:96px;font-size:11px;color:#969d88}
.footer-brand{font-size:18px;font-weight:500;letter-spacing:-.8px;color:#dbdece}
.footer-inner>a:not(.footer-brand){margin-left:auto;white-space:nowrap}
.footer-inner>a span{margin-left:9px}
.copyright{padding-left:24px;border-left:1px solid var(--line);font-size:10px}
.skip-link{position:absolute;top:10px;left:10px;padding:12px;background:var(--gold);color:#141612;transform:translateY(-150%);z-index:5}
.skip-link:focus{transform:translateY(0)}
.retired-page{min-height:65vh;padding:100px 0;max-width:720px}
.retired-page h1{font-size:48px}
.retired-page>p:not(.eyebrow){color:var(--muted);font-size:17px;line-height:1.8;margin-bottom:30px}
@media(max-width:1100px){
  .page-container,.header-inner,.footer-inner{width:calc(100% - 64px)}
  .hero{min-height:320px}
  .hero h1{font-size:54px}
  .hero-art{width:270px}
  .project-copy{padding:28px 25px}
  .project-preview{padding:25px 20px}
  .footer-inner{gap:16px}
  .copyright{padding-left:16px}
}
@media(max-width:760px){
  .page-container,.header-inner,.footer-inner{width:calc(100% - 40px)}
  .header-inner{min-height:80px;gap:18px}
  .brand{font-size:22px;gap:7px}
  .brand img{width:31px;height:31px}
  .header-inner nav{font-size:12px}
  .hero{padding:26px 0;grid-template-columns:1fr 38%;gap:12px;min-height:230px}
  .hero h1{font-size:clamp(28px,8vw,48px);letter-spacing:-1.5px;margin-bottom:22px}
  .hero .button{font-size:11px;padding:11px 14px;gap:19px}
  .hero .button span{font-size:17px}
  .hero-art{width:100%}
  .section-heading{margin-bottom:24px}
  .section-heading h2{font-size:25px}
  .projects{padding:25px 0}
  .project{grid-template-columns:1fr}
  .project-copy{padding:28px 25px}
  .project-kicker{margin-bottom:20px}
  .project h3{font-size:31px}
  .project-description{max-width:none}
  .project-preview{padding:23px;border-left:0;border-top:1px solid var(--line)}
  .preview-heading{margin-bottom:16px}
  .factory-preview .browser-window img{height:auto;aspect-ratio:1.65;object-fit:cover}
  .footer-inner{flex-wrap:wrap;gap:16px 20px;padding:26px 0}
  .copyright{flex-basis:100%;padding:0;border:0}
  .retired-page{padding:65px 0}
  .retired-page h1{font-size:38px}
}
@media(max-width:380px){
  .brand{font-size:19px}
  .brand img{width:27px;height:27px}
  .project-copy{padding:25px 20px}
  .project h3{font-size:28px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition:none!important;animation:none!important}
}