:root{
  --bg:#0A0B0D; --ink:#EDEEF0; --ink-soft:#8B9099; --line:#25272C;
  --accent:#5EE0F0; --accent-glow:#5EE0F0; --panel:#101215;
  --font-display:'Space Grotesk',-apple-system,'Segoe UI',sans-serif;
  --font-body:'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Consolas,monospace;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
:root[data-theme="light"]{
  --bg:#F6F5F1; --ink:#15171B; --ink-soft:#5B5F66; --line:#D8D5CE;
  --accent:#2547D0; --accent-glow:#2547D0; --panel:#FFFFFF;
}

html{scroll-padding-top:env(safe-area-inset-top,0px);}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); overflow-x:hidden;
  background-image:
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 88px);
  background-size:88px 88px; background-attachment:fixed;
  transition:background-color .3s ease, color .3s ease;
}
a{color:inherit;}
.wrap{max-width:1520px; margin:0 auto; padding:0 40px;}

header{
  position:sticky; top:0; z-index:20; padding:18px 0;
  padding-top:calc(18px + env(safe-area-inset-top,0px));
  background:color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter:blur(8px);
}
header .wrap{display:flex; justify-content:space-between; align-items:center;}
.logo{font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:-0.01em;}
nav{display:flex; align-items:center; gap:28px; font-size:14px; color:var(--ink-soft);}
nav a{text-decoration:none;}
nav a:hover{color:var(--ink);}
nav a[aria-current="page"]{color:var(--ink); border-bottom:1px solid var(--accent); padding-bottom:2px;}
#theme-toggle{
  border:1px solid var(--line); background:none; color:var(--ink);
  font-family:var(--font-body); font-size:13px; padding:7px 14px;
  border-radius:2px; cursor:pointer;
}
#theme-toggle:hover{border-color:var(--accent);}
#theme-toggle:focus-visible, a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

.hero{position:relative; padding:64px 0 24px;}
.hero-canvas-wrap{
  position:relative; height:62vh; min-height:420px; max-height:640px;
  border:1px solid var(--line); border-radius:2px; overflow:hidden;
  margin-bottom:36px;
}
.hero-canvas-wrap canvas{display:block; width:100%; height:100%;}
.plate{
  position:absolute; font-family:var(--font-mono); font-size:11px; color:var(--ink-soft);
  letter-spacing:.02em; padding:4px 8px; border:1px solid var(--line); background:var(--bg);
}
.plate.tl{top:12px; left:12px;} .plate.tr{top:12px; right:12px;}
.sun-control{
  position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; gap:6px;
  padding:12px 16px; background:var(--bg); border-top:1px solid var(--line);
}
.sun-control-times{display:flex; justify-content:space-between;}
.sun-control-times span{font-family:var(--font-mono); font-size:10px; color:var(--ink-soft); letter-spacing:.02em;}
#sun-slider{
  width:100%; appearance:none; -webkit-appearance:none; height:1px; background:var(--line);
  outline:none; cursor:pointer;
}
#sun-slider::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none; width:12px; height:12px; border-radius:1px;
  background:var(--ink); cursor:pointer; border:1px solid var(--bg); box-shadow:0 0 0 1px var(--line);
}
#sun-slider::-moz-range-thumb{
  width:12px; height:12px; border-radius:1px; background:var(--ink); cursor:pointer; border:1px solid var(--line);
}
.hero-text{max-width:760px;}
.hero-text h1{
  font-family:var(--font-display); font-weight:600; font-size:clamp(32px,5vw,54px);
  line-height:1.08; letter-spacing:-0.015em; margin:0 0 18px;
}
.hero-text p{
  font-size:17px; line-height:1.6; color:var(--ink-soft); max-width:560px; margin:0 0 4px;
}

section{padding:76px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:36px;}
.section-head h2{font-family:var(--font-display); font-weight:600; font-size:26px; margin:0; letter-spacing:-0.01em;}
.section-head span{font-size:13px; color:var(--ink-soft); white-space:nowrap;}

.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.pillar{background:var(--bg); padding:28px 24px; position:relative;}
.pillar h3{font-family:var(--font-display); font-size:16px; font-weight:600; margin:0 0 10px;}
.pillar p{font-size:14px; line-height:1.55; color:var(--ink-soft); margin:0 0 16px;}
.pillar .tools{font-family:var(--font-mono); font-size:12px; color:var(--ink-soft);}

.work-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.work-card{
  aspect-ratio:4/3; 
  border:1px solid rgb(194, 193, 193); 
  border-radius:2px; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; color:#fff; font-size:13px; text-align:center; padding:20px;
  background-position:center; background-size:cover; text-shadow:0 1px 3px rgba(0,0,0,.8); overflow:hidden;
}
.work-card::before{content:""; position:absolute; inset:0; background:linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.2)); transition:opacity .3s ease; pointer-events:none;}
.work-card:hover::before{opacity:0;}
.work-card--realtime{background-image:url("images/selected-work/selected-realtime.jpg");}
.work-card--web3d{background-image:url("images/selected-work/selected-web3d-mod-couch.jpg");}
.work-card--visualisation{background-image:url("images/selected-work/selected-visualisation.jpg");}
.work-card-content{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:8px;}
.work-card .tag{font-family:var(--font-mono); font-size:11px; color:#fff; border:1px solid rgba(255,255,255,.7); background:rgba(10,11,13,.35); padding:3px 8px; border-radius:2px;}

.about{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start;}
.about p{font-size:16px; line-height:1.7; color:var(--ink-soft); margin:0 0 14px;}
.about .stat{margin-top:22px;}
.about .stat b{font-family:var(--font-mono); font-size:20px; display:block;}
.about .stat span{font-size:13px; color:var(--ink-soft);}

.contact{text-align:left;}
.contact h2{font-family:var(--font-display); font-weight:600; font-size:clamp(26px,4vw,40px); margin:0 0 20px; max-width:640px;}
.contact-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center;}
.contact-row a.btn{
  background:var(--ink); color:var(--bg); font-size:14px; padding:12px 22px;
  border-radius:2px; text-decoration:none; font-weight:500;
}
:root:not([data-theme="light"]) .contact-row a.btn{background:var(--accent); color:#05070A;}
.contact-row .social{font-size:13px; color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:1px;}

footer{padding:24px 0 calc(24px + env(safe-area-inset-bottom,0px)); font-size:12px; color:var(--ink-soft); display:flex; justify-content:space-between;}

/* Gallery page */
.page-intro{padding:40px 0 40px;}
.page-intro h1{font-family:var(--font-display); font-weight:600; font-size:clamp(28px,4vw,44px); margin:0 0 10px; letter-spacing:-0.01em;}
.page-intro p{font-size:15px; color:var(--ink-soft); margin:0; max-width:560px;}
.gallery-section{padding:0 0 90px;}
.gallery-wrap{padding:0 40px;}
.masonry{column-count:2; column-gap:20px;}
.g-item{break-inside:avoid; margin:0 0 20px; border:1px dashed var(--line); border-radius:2px; background:var(--bg); cursor:pointer; overflow:hidden; transition:border-color .2s;}
.g-item:hover, .g-item:focus-visible{border-color:var(--accent); outline:none;}
.g-item .g-ph{width:100%; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-family:var(--font-mono); font-size:11px; padding:20px 12px; text-align:center;}
.g-item .g-ph img{display:block; width:100%; height:auto;}
.g-item .g-meta{display:flex; align-items:center; gap:8px; padding:10px 12px; border-top:1px dashed var(--line);}
.g-item .g-meta h3{font-family:var(--font-display); font-size:13px; font-weight:600; margin:0; flex:1;}
.info-dot{width:16px; height:16px; border-radius:50%; border:1px solid var(--ink-soft); color:var(--ink-soft); font-family:var(--font-mono); font-size:10px; display:flex; align-items:center; justify-content:center; background:none; flex-shrink:0; cursor:pointer; padding:0;}
button.info-dot:hover{border-color:var(--accent); color:var(--accent);}

/* Modal */
.modal-overlay{position:fixed; inset:0; background:rgba(10,11,13,.6); display:flex; align-items:center; justify-content:center; padding:24px; z-index:200; opacity:0; pointer-events:none; transition:opacity .2s ease;}
.modal-overlay.open{opacity:1; pointer-events:auto;}
.modal{background:var(--bg); border:1px solid var(--line); width:100%; max-width:860px; max-height:88vh; overflow:auto; border-radius:2px;}
.modal-ph{width:100%; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-family:var(--font-mono); font-size:12px; border-bottom:1px dashed var(--line);}
.modal-ph img{display:block; width:100%; max-height:60vh; object-fit:contain;}
.modal-body{padding:20px 24px 26px;}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.modal-title-row{display:flex; align-items:center; gap:10px;}
.modal-title-row h2{font-family:var(--font-display); font-size:20px; font-weight:600; margin:0;}
.modal-close{width:28px; height:28px; border:1px solid var(--line); background:none; color:var(--ink-soft); border-radius:2px; cursor:pointer; font-size:14px;}
.modal-tag{display:inline-block; font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); border:1px solid var(--line); padding:3px 8px; margin-top:12px;}
.modal-info{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.modal-info.open{max-height:220px;}
.modal-info p{font-size:14px; line-height:1.65; color:var(--ink-soft); margin:14px 0 0;}

/* Contact page */
.social-tier{display:flex; flex-wrap:wrap; gap:16px; margin-bottom:16px;}
.social-tier:last-child{margin-bottom:0;}
.social-card{
  background:var(--bg);
  border:1px solid var(--line); border-radius:2px; padding:18px 20px; text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; gap:4px; flex:1 1 200px; transition:border-color .2s;
}
.social-card:hover{border-color:var(--accent);}
.social-name{font-family:var(--font-display); font-weight:600; font-size:15px;}
.social-sub{font-family:var(--font-mono); font-size:11px; color:var(--ink-soft);}
.social-card.small{flex:0 1 160px; padding:12px 16px;}
.social-card.small .social-name{font-size:13px;}

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:16px;}
.contact-block{background:var(--bg); padding:28px 24px;}
.contact-block h3{font-family:var(--font-display); font-size:16px; font-weight:600; margin:0 0 6px;}
.contact-block .micro{font-size:13px; color:var(--ink-soft); margin:0 0 16px;}
.btn-outline{
  border:1px solid var(--line); background:none; color:var(--ink); font-family:var(--font-mono); font-size:13px;
  padding:10px 16px; border-radius:2px; cursor:pointer;
}
.btn-outline:hover{border-color:var(--accent);}
.btn-outline:disabled{opacity:.5; cursor:default;}
.email-output a{font-family:var(--font-mono); font-size:14px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line);}
.email-output a:hover{border-color:var(--accent);}

@media (max-width:1200px){ .masonry{column-count:3;} }
@media (max-width:820px){
  .pillars, .work-grid, .contact-grid{grid-template-columns:1fr;}
  .about{grid-template-columns:1fr;}
  nav{gap:16px;}
  .hero-canvas-wrap{height:48vh; min-height:320px;}
  .masonry{column-count:2;}
}
@media (max-width:520px){ .masonry{column-count:1;} }
@media (prefers-reduced-motion: reduce){ *{animation-duration:0.001s !important; transition-duration:0.001s !important;} }