/* ── Reset & Vars ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#111110;--surface:#1a1a18;--text:rgba(255,255,255,0.82);
  --muted:rgba(255,255,255,0.32);--border:rgba(255,255,255,0.07);
  --gap:36px;--cols:3;--ease:cubic-bezier(0.16,1,0.3,1);
  --sb-w:56px;--sb-exp:200px;
}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:'DM Mono',monospace;min-height:100vh;cursor:none;overflow-x:hidden;}

/* ── Cursor ── */
*{cursor:none!important;}
#cur{position:fixed;width:8px;height:8px;border-radius:50%;background:#fff;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .2s,height .2s;left:-100px;top:-100px;}
#cur-ring{position:fixed;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,0.4);pointer-events:none;z-index:9998;transform:translate(-50%,-50%);left:-100px;top:-100px;}
body:has(.panel:hover) #cur{width:14px;height:14px;}

/* ── Sidebar ── */
#sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sb-w);z-index:400;display:flex;flex-direction:column;background:rgba(13,13,12,0.96);backdrop-filter:blur(14px);border-right:1px solid rgba(255,255,255,0.07);transition:width .38s var(--ease);overflow:hidden;}
#sidebar.expanded{width:var(--sb-exp);}
.page-wrap{margin-left:var(--sb-w);transition:margin-left .38s var(--ease);}
body.sb-open .page-wrap{margin-left:var(--sb-exp);}
#proj-overlay{left:var(--sb-w);transition:left .38s var(--ease);}
body.sb-open #proj-overlay{left:var(--sb-exp);}
#coming-overlay{left:var(--sb-w);transition:left .38s var(--ease);}
body.sb-open #coming-overlay{left:var(--sb-exp);}

.sb-top{display:flex;align-items:center;padding:10px 8px;border-bottom:1px solid rgba(255,255,255,0.06);flex-shrink:0;min-height:52px;}
.sb-logo{width:36px;height:36px;border-radius:8px;flex-shrink:0;background:rgba(255,255,255,0.07);display:flex;align-items:center;justify-content:center;font-family:'DM Serif Display',serif;font-size:14px;color:rgba(255,255,255,0.85);cursor:none;transition:background .2s;}
.sb-logo:hover{background:rgba(255,255,255,0.13);}
.sb-wordmark{font-family:'DM Serif Display',serif;font-size:13px;color:rgba(255,255,255,0.7);margin-left:10px;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none;}
#sidebar.expanded .sb-wordmark{opacity:1;transition-delay:.15s;}
.sb-collapse{margin-left:auto;flex-shrink:0;width:28px;height:28px;border-radius:6px;border:none;background:none;cursor:none;color:rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s,color .2s,background .2s;pointer-events:none;}
#sidebar.expanded .sb-collapse{opacity:1;pointer-events:all;transition-delay:.2s;}
.sb-collapse:hover{color:rgba(255,255,255,0.8);background:rgba(255,255,255,0.07);}
.sb-collapse svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;}

.sb-items{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;display:flex;flex-direction:column;padding:6px 0;scrollbar-width:none;}
.sb-items::-webkit-scrollbar{display:none;}
.sb-section{font-size:8px;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.2);padding:10px 10px 4px;white-space:nowrap;opacity:0;transition:opacity .15s;flex-shrink:0;}
#sidebar.expanded .sb-section{opacity:1;transition-delay:.12s;}
.sb-divider{height:1px;background:rgba(255,255,255,0.07);margin:5px 10px;flex-shrink:0;}

.sb-item{display:flex;align-items:center;width:100%;height:40px;padding:0 10px;gap:10px;text-decoration:none;background:none;border:none;color:rgba(255,255,255,0.4);cursor:none;position:relative;transition:color .2s,background .2s;flex-shrink:0;font-family:'DM Mono',monospace;}
.sb-item:hover{color:rgba(255,255,255,0.88);background:rgba(255,255,255,0.05);}
.sb-item.active{color:rgba(255,255,255,0.9);background:rgba(255,255,255,0.07);}
.sb-item.active::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:0 2px 2px 0;background:rgba(255,255,255,0.55);}
.sb-item.coming .sb-icon-wrap{opacity:0.4;}
.sb-icon-wrap{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.sb-icon-wrap i{font-size:15px;}
.sb-label{font-size:11px;letter-spacing:0.03em;white-space:nowrap;opacity:0;transform:translateX(-6px);transition:opacity .18s,transform .18s;pointer-events:none;flex:1;overflow:hidden;text-overflow:ellipsis;text-align:left;}
#sidebar.expanded .sb-label{opacity:1;transform:translateX(0);transition-delay:.1s;}
.sb-coming-tag{font-size:7px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.1);padding:1px 5px;border-radius:2px;white-space:nowrap;opacity:0;transition:opacity .18s;flex-shrink:0;}
#sidebar.expanded .sb-coming-tag{opacity:1;transition-delay:.12s;}
.sb-bottom{border-top:1px solid rgba(255,255,255,0.06);padding:6px 0;flex-shrink:0;}

/* Sidebar resize handle — visible only when expanded */
#sb-resize-handle{position:absolute;top:0;right:0;bottom:0;width:5px;cursor:col-resize!important;background:transparent;z-index:500;opacity:0;transition:opacity .2s;}
#sidebar.expanded #sb-resize-handle{opacity:1;}
#sb-resize-handle:hover,#sb-resize-handle.active{background:rgba(255,255,255,0.1);}
#sb-resize-handle.active{background:rgba(74,96,208,0.5);}

/* hover bubble */
#rail-bubble{position:fixed;z-index:800;pointer-events:none;opacity:0;transition:opacity .15s,transform .15s;transform:translateX(-4px);}
#rail-bubble.visible{opacity:1;transform:translateX(0);}
#rbi{position:relative;background:rgba(16,16,14,0.97);border:1px solid rgba(255,255,255,0.14);backdrop-filter:blur(12px);border-radius:6px;padding:6px 13px;box-shadow:0 6px 24px rgba(0,0,0,0.5);}
#rbi::before{content:'';position:absolute;right:100%;top:50%;transform:translateY(-50%);border:5px solid transparent;border-right-color:rgba(255,255,255,0.14);}
#rbi::after{content:'';position:absolute;right:calc(100% - 1px);top:50%;transform:translateY(-50%);border:4px solid transparent;border-right-color:rgba(16,16,14,0.97);}
#rbt{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:0.05em;color:rgba(255,255,255,0.88);white-space:nowrap;}

/* ── Header ── */
header{position:sticky;top:0;z-index:300;display:flex;align-items:center;justify-content:space-between;padding:0 28px;height:52px;background:rgba(17,17,16,0.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.logo{font-family:'DM Serif Display',serif;font-size:15px;color:rgba(255,255,255,0.9);cursor:none;}
.logo span{font-style:italic;color:rgba(255,255,255,0.4);}
.top-nav{display:flex;gap:28px;}
.top-nav button{background:none;border:none;color:rgba(255,255,255,0.65);font-family:'DM Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;cursor:none;transition:color .2s;padding:0;}
.top-nav button:hover,.top-nav button.active{color:#fff;}
.nav-right{display:flex;gap:12px;align-items:center;}
.nav-tag{font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.55);border:1px solid var(--border);padding:4px 10px;border-radius:2px;}
.colour-toggle{display:flex;align-items:center;gap:10px;font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.5);cursor:none;border:1px solid var(--border);padding:6px 14px 6px 10px;border-radius:3px;background:transparent;transition:border-color .25s,color .25s;}
.colour-toggle:hover{border-color:rgba(255,255,255,0.3);}
.toggle-pip{width:20px;height:10px;border-radius:5px;background:rgba(74,96,208,0.6);position:relative;transition:background .3s;flex-shrink:0;}
.toggle-pip::after{content:'';position:absolute;top:2px;left:2px;width:6px;height:6px;border-radius:50%;background:#fff;transition:transform .3s,background .3s;transform:translateX(10px);}
body.colour-off .toggle-pip{background:rgba(255,255,255,0.12);}
body.colour-off .toggle-pip::after{transform:translateX(0);background:rgba(255,255,255,0.4);}

/* ── Views ── */
.view{display:none;}
.view.active{display:block;animation:fadeUp .45s both;}

/* ── HOME ── */
.hero{padding:100px 72px 52px;display:flex;align-items:stretch;justify-content:space-between;gap:80px;}
.hero-left{flex:1;max-width:580px;}
.hero-eyebrow{font-size:9px;letter-spacing:0.22em;text-transform:uppercase;color:rgba(255,255,255,0.3);margin-bottom:18px;}
.hero-title{font-family:'DM Serif Display',serif;font-size:clamp(38px,5vw,68px);font-weight:400;line-height:1.0;color:rgba(255,255,255,0.93);margin-bottom:20px;}
.hero-title em{font-style:italic;color:rgba(255,255,255,0.38);}
.hero-sub{font-size:11px;line-height:1.8;color:rgba(255,255,255,0.38);margin-bottom:0;max-width:420px;}
.hero-actions{display:none;}
.hero-btn{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;padding:10px 16px;border-radius:3px;border:1px solid rgba(255,255,255,0.2);color:rgba(255,255,255,0.65);transition:background .25s,border-color .25s,color .25s;cursor:none;background:none;font-family:'DM Mono',monospace;width:100%;}
.social-divider{height:1px;background:rgba(255,255,255,0.1);margin:4px 0;}
.hero-btn:hover{border-color:rgba(255,255,255,0.5);color:#fff;}
.hero-btn.primary{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.3);color:rgba(255,255,255,0.85);}
.hero-btn.primary:hover{background:rgba(255,255,255,0.14);color:#fff;}
.hero-right{flex-shrink:0;width:220px;display:flex;flex-direction:column;justify-content:center;}
.hero-meta-label{font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.25);margin-bottom:16px;}
.social-links{display:flex;flex-direction:column;gap:6px;}
.social-link{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;color:rgba(255,255,255,0.5);border:1px solid rgba(255,255,255,0.1);padding:10px 16px;border-radius:3px;transition:color .25s,border-color .25s,background .25s;cursor:none;width:100%;}
.social-link i{width:16px;text-align:center;opacity:0.7;}
.social-link:hover{color:#fff;border-color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.05);}
.rule{height:1px;background:var(--border);margin:0 72px 36px;}
.featured{margin:0 72px 36px;border-radius:8px;overflow:hidden;position:relative;display:grid;grid-template-columns:1fr 1.6fr;min-height:220px;border:1px solid rgba(255,255,255,0.09);}
.featured-visual{position:relative;overflow:hidden;min-height:220px;}
.featured-visual img{width:100%;height:100%;object-fit:cover;display:block;}
.featured-badge{position:absolute;top:14px;left:14px;z-index:5;font-size:8px;letter-spacing:0.2em;text-transform:uppercase;background:rgba(74,96,208,0.9);color:#fff;padding:3px 9px;border-radius:2px;}
.featured-content{background:#151514;padding:36px 40px;display:flex;flex-direction:column;justify-content:center;}
.featured-eyebrow{font-size:9px;letter-spacing:0.22em;text-transform:uppercase;color:#6070d8;margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.featured-eyebrow::before{content:'';display:block;width:20px;height:1px;background:#6070d8;}
.featured-title{font-family:'DM Serif Display',serif;font-size:26px;line-height:1.1;color:rgba(255,255,255,0.93);margin-bottom:10px;}
.featured-title em{font-style:italic;color:rgba(255,255,255,0.38);}
.featured-desc{font-size:11px;line-height:1.85;color:rgba(255,255,255,0.38);margin-bottom:24px;}
.featured-links{display:flex;flex-direction:column;gap:7px;}
.featured-link{display:inline-flex;align-items:center;gap:10px;font-size:10px;letter-spacing:0.08em;color:rgba(255,255,255,0.6);text-decoration:none;border:1px solid var(--border);padding:9px 16px;border-radius:4px;transition:background .25s,border-color .25s,color .25s;width:fit-content;cursor:none;}
.featured-link:hover{background:rgba(74,96,208,0.15);border-color:rgba(74,96,208,0.55);color:#fff;}
.featured-link.primary{background:rgba(74,96,208,0.18);border-color:rgba(74,96,208,0.5);color:rgba(255,255,255,0.85);}
.featured-link.primary:hover{background:rgba(74,96,208,0.32);border-color:rgba(74,96,208,0.85);color:#fff;}
.section-label{padding:0 72px 14px;font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);}

/* ── Grid ── */
.grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:var(--gap);padding:0 72px 100px;}
.panel{position:relative;overflow:hidden;background:var(--surface);border-radius:0;cursor:none;transform-origin:center;z-index:1;aspect-ratio:16/9;box-shadow:0 8px 32px rgba(0,0,0,0.55);transition:transform .55s var(--ease),box-shadow .55s var(--ease);}
.panel:hover{transform:scale(1.04);box-shadow:0 20px 60px rgba(0,0,0,0.8);z-index:10;}
/* Default state: ALL panels in colour */
.panel-fill{position:absolute;inset:0;background-size:cover;background-position:center;transition:filter .55s var(--ease),transform .55s var(--ease);filter:grayscale(0) brightness(1) contrast(1);}
.panel:hover .panel-fill{transform:scale(1.03);}
.panel-glow{position:absolute;inset:0;opacity:1;transition:opacity .55s var(--ease);mix-blend-mode:soft-light;pointer-events:none;z-index:2;}
/* Greyscale mode (.colour-off) — all panels greyscale, hover reveals colour */
body.colour-off .panel-fill{filter:grayscale(1) brightness(0.75) contrast(1.1);}
body.colour-off .panel-glow{opacity:0;}
body.colour-off .panel:hover .panel-fill{filter:grayscale(0) brightness(1) contrast(1);}
body.colour-off .panel:hover .panel-glow{opacity:1;}
.panel-info{position:absolute;bottom:0;left:0;right:0;padding:28px 16px 16px;background:linear-gradient(to top,rgba(0,0,0,0.85) 0%,transparent 100%);z-index:4;transform:translateY(6px);opacity:0;transition:opacity .55s var(--ease),transform .55s var(--ease);}
.panel:hover .panel-info{opacity:1;transform:translateY(0);}
.panel-name{font-family:'DM Serif Display',serif;font-size:15px;color:#fff;margin-bottom:4px;}
.panel-cat{font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.5);}
.panel-num{position:absolute;top:12px;right:12px;font-size:9px;letter-spacing:0.1em;color:rgba(255,255,255,0.2);z-index:4;transition:color .55s var(--ease);}
.panel:hover .panel-num{color:rgba(255,255,255,0.6);}
.panel-coming{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:5;opacity:0;transition:opacity .3s;background:rgba(10,10,10,0.5);backdrop-filter:blur(2px);}
.panel:hover .panel-coming{opacity:1;}
.panel-coming-label{font-size:8px;letter-spacing:0.24em;text-transform:uppercase;color:rgba(255,255,255,0.5);border:1px solid rgba(255,255,255,0.2);padding:5px 12px;border-radius:2px;}

/* ── ABOUT ── */
.about-hero{padding:80px 72px 64px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;border-bottom:1px solid var(--border);}
.about-eyebrow{font-size:9px;letter-spacing:0.22em;text-transform:uppercase;color:rgba(255,255,255,0.3);margin-bottom:20px;}
.about-title{font-family:'DM Serif Display',serif;font-size:clamp(48px,6vw,80px);font-weight:400;line-height:.95;letter-spacing:-0.02em;color:rgba(255,255,255,0.93);}
.about-title em{font-style:italic;color:rgba(255,255,255,0.35);}
.about-intro{font-size:13px;line-height:1.9;color:rgba(255,255,255,0.45);margin-bottom:28px;}
.about-intro strong{color:rgba(255,255,255,0.8);font-weight:400;}
.avail{display:inline-flex;align-items:center;gap:10px;font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.5);border:1px solid var(--border);padding:8px 16px;border-radius:2px;}
.avail-dot{width:6px;height:6px;border-radius:50%;background:#40c070;box-shadow:0 0 8px rgba(60,200,100,0.6);animation:pulse-dot 2s ease-in-out infinite;}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:0.4}}
.about-body{max-width:900px;margin:0 auto;padding:0 72px;}
.ab-section{padding:72px 0;border-bottom:1px solid var(--border);}
.ab-section:last-child{border-bottom:none;}
.ab-header{display:flex;align-items:center;gap:20px;margin-bottom:48px;}
.ab-num{font-size:9px;letter-spacing:0.2em;color:var(--muted);flex-shrink:0;}
.ab-title{font-family:'DM Serif Display',serif;font-size:clamp(20px,2.5vw,30px);color:rgba(255,255,255,0.9);font-weight:400;}
.ab-rule{flex:1;height:1px;background:var(--border);}
.bio-cols{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.bio-p{font-size:13px;line-height:2;color:rgba(255,255,255,0.48);margin-bottom:20px;}
.bio-p strong{color:rgba(255,255,255,0.8);font-weight:400;}
.bio-photo{aspect-ratio:3/4;background:linear-gradient(160deg,#1a0a2e 0%,#3a1050 40%,#6a2080 70%,#a03060 100%);display:flex;align-items:center;justify-content:center;position:relative;}
.bio-photo-inner{font-family:'DM Serif Display',serif;font-size:80px;color:rgba(255,255,255,0.08);font-style:italic;}
.bio-photo-cap{position:absolute;bottom:14px;left:14px;font-size:8px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.25);}
.tools-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);border:1px solid var(--border);}
.tool-group{background:var(--bg);padding:28px 24px;}
.tool-group-label{font-size:8px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;}
.tool-list{display:flex;flex-wrap:wrap;gap:7px;}
.tool-tag{font-size:10px;letter-spacing:0.04em;color:rgba(255,255,255,0.6);border:1px solid rgba(255,255,255,0.1);padding:5px 12px;border-radius:2px;background:rgba(255,255,255,0.03);}
.exp-list{display:flex;flex-direction:column;}
.exp-item{display:grid;grid-template-columns:140px 1fr;gap:32px;padding:28px 0;border-bottom:1px solid var(--border);}
.exp-item:first-child{border-top:1px solid var(--border);}
.exp-date{font-size:10px;color:var(--muted);padding-top:3px;}
.exp-role{font-family:'DM Serif Display',serif;font-size:18px;color:rgba(255,255,255,0.88);margin-bottom:4px;}
.exp-co{font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.3);margin-bottom:10px;}
.exp-desc{font-size:11.5px;line-height:1.8;color:rgba(255,255,255,0.42);}

/* ── CONTACT ── */
.contact-hero{padding:80px 72px 64px;border-bottom:1px solid var(--border);}
.contact-title{font-family:'DM Serif Display',serif;font-size:clamp(48px,6vw,80px);font-weight:400;line-height:.95;letter-spacing:-0.02em;color:rgba(255,255,255,0.93);margin-bottom:20px;}
.contact-title em{font-style:italic;color:rgba(255,255,255,0.35);}
.contact-sub{font-size:13px;line-height:1.8;color:rgba(255,255,255,0.38);max-width:480px;}
.contact-body{padding:72px 72px 100px;display:grid;grid-template-columns:1.1fr 1fr;gap:72px;align-items:start;}
.contact-form{display:flex;flex-direction:column;gap:16px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-group{display:flex;flex-direction:column;gap:6px;}
.form-label{font-size:8px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);}
.form-input,.form-textarea{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:3px;padding:12px 14px;color:rgba(255,255,255,0.8);font-family:'DM Mono',monospace;font-size:12px;outline:none;transition:border-color .2s,background .2s;cursor:text;}
.form-input:focus,.form-textarea:focus{border-color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.06);}
.form-input::placeholder,.form-textarea::placeholder{color:rgba(255,255,255,0.2);}
.form-textarea{resize:vertical;min-height:140px;}
.form-submit{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.25);padding:12px 24px;border-radius:3px;cursor:none;transition:background .25s,border-color .25s,color .25s;}
.form-submit:hover{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.5);color:#fff;}
.form-submit i{font-size:12px;}
.contact-links{display:flex;flex-direction:column;}
.contact-link{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--border);text-decoration:none;color:rgba(255,255,255,0.45);transition:color .2s;cursor:none;}
.contact-link:first-child{border-top:1px solid var(--border);}
.contact-link:hover{color:rgba(255,255,255,0.9);}
.cl-left{display:flex;align-items:center;gap:14px;}
.cl-icon{width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:center;}
.cl-icon i{font-size:15px;}
.cl-name{font-size:12px;}
.cl-handle{font-size:9px;color:var(--muted);margin-top:2px;}
.cl-arrow i{font-size:12px;opacity:0.35;transition:opacity .2s,transform .2s;}
.contact-link:hover .cl-arrow i{opacity:1;transform:translateX(3px);}

/* ── Project overlay ── */
#proj-overlay{position:fixed;inset:0;z-index:800;background:var(--bg);overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .4s ease;}
#proj-overlay.open{opacity:1;pointer-events:all;}
.po-hero{width:100%;height:52vh;min-height:320px;position:relative;overflow:hidden;}
.po-hero-img{width:100%;height:100%;background-size:cover;background-position:center;filter:brightness(0.8);}
.po-hero-fade{position:absolute;inset:0;background:linear-gradient(to top,var(--bg) 0%,transparent 60%);}
.po-close{position:fixed;top:20px;right:28px;z-index:900;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:rgba(17,17,16,0.85);backdrop-filter:blur(8px);color:var(--muted);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:none;transition:border-color .25s,color .25s;}
.po-close:hover{border-color:rgba(255,255,255,0.4);color:#fff;}
.po-body{max-width:780px;margin:-60px auto 0;padding:0 28px 100px;position:relative;z-index:2;}
.po-tag{font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;display:block;}
.po-title{font-family:'DM Serif Display',serif;font-size:clamp(32px,5vw,56px);line-height:1.05;margin-bottom:28px;}
.po-rule{height:1px;background:var(--border);margin-bottom:28px;}
.po-desc{font-size:13px;line-height:2;color:rgba(255,255,255,0.5);margin-bottom:36px;}
.po-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:28px;}
.po-meta-item{border-top:1px solid var(--border);padding-top:12px;}
.po-meta-label{font-size:8px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.po-meta-val{font-size:12px;color:var(--text);}
.po-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:36px;}
.po-tag-pill{font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--border);padding:4px 10px;border-radius:2px;}
.po-trailer-btn{display:inline-flex;align-items:center;gap:10px;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.75);text-decoration:none;border:1px solid rgba(255,255,255,0.2);padding:11px 22px;border-radius:3px;margin-bottom:36px;transition:background .25s,border-color .25s,color .25s;cursor:none;}
.po-trailer-btn:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.4);color:#fff;}
.po-video-embed{width:100%;aspect-ratio:16/9;margin-bottom:28px;overflow:hidden;border:1px solid var(--border);}
.po-video-embed iframe{width:100%;height:100%;display:block;}
.po-back{display:inline-flex;align-items:center;gap:10px;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);cursor:none;border:1px solid var(--border);padding:10px 20px;border-radius:3px;background:none;font-family:'DM Mono',monospace;transition:color .25s,border-color .25s;}
.po-back:hover{color:#fff;border-color:rgba(255,255,255,0.35);}

/* ── Coming soon overlay ── */
#coming-overlay{position:fixed;inset:0;z-index:800;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s ease;}
#coming-overlay.open{opacity:1;pointer-events:all;}
.coming-close{position:fixed;top:20px;right:28px;z-index:900;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:rgba(17,17,16,0.85);backdrop-filter:blur(8px);color:var(--muted);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:none;transition:border-color .25s,color .25s;}
.coming-close:hover{border-color:rgba(255,255,255,0.4);color:#fff;}
.coming-bg{position:absolute;inset:0;opacity:0.12;}
.coming-content{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:0;animation:fadeUp .6s both;}
.coming-tag{font-size:9px;letter-spacing:0.24em;text-transform:uppercase;color:var(--muted);margin-bottom:20px;display:flex;align-items:center;gap:12px;}
.coming-tag::before,.coming-tag::after{content:'';display:block;width:28px;height:1px;background:var(--muted);}
.coming-title{font-family:'DM Serif Display',serif;font-size:clamp(32px,5vw,64px);font-weight:400;line-height:1.0;color:rgba(255,255,255,0.88);margin-bottom:12px;}
.coming-title em{font-style:italic;color:rgba(255,255,255,0.35);}
.coming-sub{font-size:12px;line-height:1.8;color:rgba(255,255,255,0.32);max-width:360px;margin-bottom:40px;}
.coming-back{display:inline-flex;align-items:center;gap:10px;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--border);padding:11px 22px;border-radius:3px;background:none;cursor:none;transition:color .25s,border-color .25s;}
.coming-back:hover{color:#fff;border-color:rgba(255,255,255,0.35);}

/* ── Footer ── */
footer{border-top:1px solid var(--border);padding:28px 72px;display:flex;justify-content:space-between;align-items:center;}
footer span{font-size:10px;color:var(--muted);letter-spacing:0.1em;}

/* ── Loading state ── */
.grid-loading{padding:100px 72px;text-align:center;font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);}

/* ── Mobile hamburger ── */
.mobile-menu-btn{display:none;position:fixed;top:0;left:0;z-index:500;width:52px;height:52px;border:none;background:rgba(13,13,12,0.96);backdrop-filter:blur(14px);border-right:1px solid var(--border);border-bottom:1px solid var(--border);color:rgba(255,255,255,0.7);font-size:20px;align-items:center;justify-content:center;cursor:pointer;transition:color .2s,background .2s;}
.mobile-menu-btn:hover{color:#fff;background:rgba(255,255,255,0.06);}

/* ══════════════════════════════════════════════
   TOUCH DEVICES — disable custom cursor
   ══════════════════════════════════════════════ */
@media (hover:none),(pointer:coarse){
  *{cursor:auto!important;}
  body{cursor:auto;}
  #cur,#cur-ring,#rail-bubble{display:none!important;}
}

/* ══════════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 1024px)
   ══════════════════════════════════════════════ */
@media (max-width:1024px){
  :root{--cols:2;--gap:20px;}
  .hero{padding:80px 40px 40px;gap:40px;}
  .hero-right{width:180px;}
  .rule{margin:0 40px 28px;}
  .featured{margin:0 40px 28px;grid-template-columns:1fr 1.2fr;}
  .section-label{padding:0 40px 14px;}
  .grid{padding:0 40px 80px;}
  footer{padding:28px 40px;}
  .about-hero{padding:60px 40px 48px;gap:40px;}
  .about-body{padding:0 40px;}
  .contact-hero{padding:60px 40px 48px;}
  .contact-body{padding:48px 40px 80px;gap:48px;}
  .po-meta{grid-template-columns:repeat(2,1fr);}
}

/* ══════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 768px)
   ══════════════════════════════════════════════ */
@media (max-width:768px){
  :root{--cols:1;--gap:16px;--sb-w:0px;--sb-exp:0px;}

  /* Hide sidebar, show hamburger */
  #sidebar{display:none;width:100%;left:0;right:0;z-index:600;}
  #sidebar.mobile-open{display:flex;width:100%;position:fixed;}
  #sidebar.mobile-open .sb-section{opacity:1;}
  #sidebar.mobile-open .sb-label{opacity:1;transform:translateX(0);}
  #sidebar.mobile-open .sb-coming-tag{opacity:1;}
  #sidebar.mobile-open .sb-wordmark{opacity:1;}
  #sidebar.mobile-open .sb-collapse{opacity:1;pointer-events:all;}
  #sb-resize-handle{display:none!important;}
  .mobile-menu-btn{display:flex;}

  /* Page content full-width */
  .page-wrap{margin-left:0!important;}
  #proj-overlay,#coming-overlay{left:0!important;}

  /* Header */
  header{padding:0 16px 0 58px;}
  .logo{display:none;}
  .top-nav{gap:16px;}
  .top-nav button{font-size:10px;letter-spacing:0.1em;}
  .nav-right{gap:6px;}
  .nav-tag{display:none;}
  .colour-toggle{padding:6px 10px 6px 8px;}
  .toggle-label{display:none;}

  /* Hero */
  .hero{padding:48px 20px 32px;flex-direction:column;gap:24px;}
  .hero-left{max-width:100%;}
  .hero-right{width:100%;padding-top:0;}
  .social-links{flex-direction:row;flex-wrap:wrap;gap:6px;}
  .social-link,.hero-btn{width:auto;flex:1;min-width:0;justify-content:center;padding:10px 12px;font-size:9px;}

  /* Featured */
  .featured{margin:0 20px 28px;grid-template-columns:1fr;min-height:auto;}
  .featured-visual{min-height:180px;}
  .featured-content{padding:24px 20px;}
  .featured-desc{font-size:10px;margin-bottom:16px;}

  /* Grid */
  .rule{margin:0 20px 20px;}
  .section-label{padding:0 20px 10px;}
  .grid{padding:0 20px 60px;}

  /* About */
  .about-hero{padding:40px 20px 32px;grid-template-columns:1fr;gap:24px;}
  .about-body{padding:0 20px;}
  .bio-cols{grid-template-columns:1fr;gap:28px;}
  .bio-photo{display:none;}
  .tools-grid{grid-template-columns:1fr;}
  .exp-item{grid-template-columns:1fr;gap:8px;}
  .exp-date{padding-top:0;}

  /* Contact */
  .contact-hero{padding:40px 20px 32px;}
  .contact-body{padding:32px 20px 60px;grid-template-columns:1fr;gap:40px;}
  .form-row{grid-template-columns:1fr;}

  /* Overlays */
  .po-close,.coming-close{top:12px;right:12px;width:34px;height:34px;}
  .po-hero{height:40vh;min-height:200px;}
  .po-body{padding:0 20px 60px;}
  .po-meta{grid-template-columns:repeat(2,1fr);gap:12px;}

  /* Footer */
  footer{padding:20px 20px;flex-direction:column;gap:8px;align-items:flex-start;}
}

/* ══════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (≤ 420px)
   ══════════════════════════════════════════════ */
@media (max-width:420px){
  .hero-title{font-size:clamp(28px,8vw,44px);}
  .social-links{flex-direction:column;}
  .social-link,.hero-btn{width:100%;flex:auto;}
  .featured-links{flex-direction:column;width:100%;}
  .featured-link{width:100%;justify-content:center;}
  .po-meta{grid-template-columns:1fr;}
  .actions{flex-direction:column;width:100%;}
  .btn{width:100%;justify-content:center;}
}

@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}