@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@200;300;400;500;600&family=DM+Sans:wght@400;500;600&display=swap');
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;--bg:#080baf;--panel:#1111ed;--ink:#f4f2e9;--muted:#c4c5fc;--line:#ffffff32;--button:#f4f2e9;--buttonink:#1111d9;--art:#e1e2ff;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif}body.light{--bg:#e9e8e2;--panel:#f6f5ef;--ink:#1515df;--muted:#57588c;--line:#1515df35;--button:#1515df;--buttonink:#f6f5ef;--art:#1515df}.frame{max-width:1500px;min-height:100vh;margin:auto;background:var(--panel);border-left:1px solid var(--line);border-right:1px solid var(--line);padding:0 70px;position:relative}body:after{content:'';position:fixed;inset:0;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='white' filter='url(%23n)' d='M0 0h150v150H0z'/%3E%3C/svg%3E")}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:5px}nav{display:grid;grid-template-columns:1fr 1fr 1.2fr 1fr 1fr;align-items:center;gap:20px;min-height:150px;font:500 18px/1 'Barlow Condensed',sans-serif;letter-spacing:.8px;text-transform:uppercase}.brand{text-align:center;font-size:34px;font-weight:300;letter-spacing:-1px;line-height:.9}.brand small{display:block;font:11px 'DM Sans';letter-spacing:4px;margin-top:13px}.nav-end{text-align:right}.theme{background:var(--button);color:var(--buttonink);border:0;padding:12px 18px;text-transform:uppercase;font:500 16px 'Barlow Condensed';letter-spacing:.5px}.hero{display:grid;grid-template-columns:1fr 1.07fr;gap:55px;align-items:center;min-height:760px;padding:30px 0 60px}.overline{font:400 13px 'Barlow Condensed';letter-spacing:2px;text-transform:uppercase;color:var(--muted)}h1{font-family:'Barlow Condensed',sans-serif;font-size:clamp(80px,8.8vw,142px);font-weight:200;line-height:.96;letter-spacing:-4px;margin:23px 0 30px}.hero-copy>p{max-width:400px;color:var(--muted);font-size:14px;line-height:1.7}.cta{display:flex;gap:1px;margin:28px 0}.cta a{font:500 19px 'Barlow Condensed';text-transform:uppercase;padding:13px 18px;background:var(--button);color:var(--buttonink)}.cta a+ a{background:var(--line);color:var(--ink)}.terminal{margin-top:35px;max-width:440px;border:1px solid var(--line);background:var(--bg);padding:0 18px 18px}.terminal .tabs{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:12px 0;font:13px 'Barlow Condensed';letter-spacing:1px;text-transform:uppercase}.terminal code{font-size:11px;display:block;margin-top:16px;color:var(--muted)}.art{position:relative;aspect-ratio:.82;overflow:hidden;color:var(--art);background:linear-gradient(135deg,transparent,var(--line));display:flex;align-items:center;justify-content:center}.art svg{width:100%;height:100%;position:absolute;inset:0}.art-label{position:absolute;bottom:25px;left:25px;font:12px 'Barlow Condensed';letter-spacing:2px}.art-top{position:absolute;top:24px;left:25px;font:12px 'Barlow Condensed';letter-spacing:2px}.art-letter{font:200 190px/.8 'Barlow Condensed';position:relative;letter-spacing:-15px;mix-blend-mode:normal}.art-letter small{font:400 11px 'DM Sans';display:block;letter-spacing:5px;text-align:center;margin-top:25px}.section-head{display:flex;justify-content:space-between;align-items:end;border-top:1px solid var(--line);padding:50px 0 30px}.section-head h2{font:300 62px/1 'Barlow Condensed';letter-spacing:-1px;margin:0}.section-head span{font:14px 'Barlow Condensed';text-transform:uppercase;color:var(--muted)}.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding-bottom:65px}.project-visual{height:220px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:var(--bg)}.project-visual:before{content:'';position:absolute;inset:20px;border:1px solid var(--line)}.project-visual .glyph{font:200 95px 'Barlow Condensed';letter-spacing:-4px}.project-visual .index{position:absolute;top:13px;left:14px;font:12px 'Barlow Condensed';letter-spacing:1px;background:var(--bg);padding:0 7px}.project-visual .orbit{position:absolute;width:170px;height:170px;border:1px solid var(--line);border-radius:50%;transform:rotate(-30deg) scaleX(1.7)}h3{font:400 36px 'Barlow Condensed';margin:20px 0 6px}.project p{font-size:13px;line-height:1.8;color:var(--muted);min-height:94px}.project .meta{font:12px 'Barlow Condensed';text-transform:uppercase;letter-spacing:1px}.project-links{display:flex;gap:20px;font:500 16px 'Barlow Condensed';text-transform:uppercase;margin-top:20px}.project-links a{border-bottom:1px solid var(--line);padding-bottom:7px}.about{padding:55px 0 70px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:55px}.about h2{font:300 70px/1 'Barlow Condensed';margin:0}.about p{font-size:15px;line-height:1.8;color:var(--muted);margin:0 0 20px}.tags{font:14px 'Barlow Condensed';letter-spacing:1px;text-transform:uppercase}.contact{border-top:1px solid var(--line);padding:55px 0 70px}.contact h2{font:200 clamp(55px,8vw,108px)/1 'Barlow Condensed';letter-spacing:-2px;margin:0 0 28px}.contact a{font:20px 'Barlow Condensed';border-bottom:1px solid var(--line);padding-bottom:8px}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:25px 0;font:12px 'Barlow Condensed';text-transform:uppercase;letter-spacing:1px;color:var(--muted)}.preview{position:fixed;bottom:18px;right:18px;z-index:5;background:var(--button);color:var(--buttonink);padding:10px 14px;font:13px 'Barlow Condensed';box-shadow:0 4px 20px #0002}.preview a{border-bottom:1px solid currentColor}
@media(min-width:1800px){.frame{max-width:1600px;padding:0 110px}}@media(max-width:900px){.frame{padding:0 30px}nav{min-height:120px;grid-template-columns:1fr 1fr 1fr;font-size:15px}nav>a:nth-child(2),nav>a:nth-child(4){display:none}.brand{grid-column:2;grid-row:1}.nav-end{grid-column:3;grid-row:1}.hero{gap:20px;min-height:650px}h1{font-size:95px}.cta{flex-direction:column;gap:5px}.cta a{width:fit-content}.art-letter{font-size:130px}.project p{min-height:140px}}@media(max-width:620px){.frame{padding:0 22px}nav{gap:5px;min-height:105px}.theme{font-size:14px;padding:10px}.brand{font-size:27px}.hero{grid-template-columns:1fr;padding:25px 0 45px;gap:35px}h1{font-size:98px;letter-spacing:-3px}.hero-copy>p{max-width:100%}.cta{flex-direction:row}.cta a{font-size:17px}.terminal{margin-top:25px}.art{aspect-ratio:1}.art-letter{font-size:185px}.section-head h2{font-size:50px}.section-head span{max-width:90px;text-align:right}.projects{grid-template-columns:1fr;gap:40px}.project-visual{height:250px}.project p{min-height:0;max-width:400px}.about{grid-template-columns:1fr;gap:25px}.about h2{font-size:58px}footer{padding-bottom:65px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Cutting-mat references: measured grids, cobalt light and warm vermilion. */
body{--bg:#020829;--panel:#061244;--ink:#eef1ff;--muted:#b8c5e5;--line:#a5bbff40;--button:#eaf0ff;--buttonink:#071a55;--art:#b6ccff;background:#020829}
body.light{--bg:#e8e2d7;--panel:#f7f3eb;--ink:#35251d;--muted:#796455;--line:#a9502638;--button:#e94c0c;--buttonink:#fff8ec;--art:#fff0d4}
.frame{border-color:var(--line)}
.hero{position:relative}.hero:before{content:'00 — 01 — 02 — 03 — 04 — 05 — 06 — 07 — 08 — 09';position:absolute;left:0;right:0;top:0;overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);padding-top:8px;font:9px monospace;letter-spacing:5px;color:var(--muted);opacity:.65}
.art{border:1px solid #aec4ff60;background-color:#031044;background-image:linear-gradient(90deg,#b9ceff16 1px,transparent 1px),linear-gradient(#b9ceff16 1px,transparent 1px),linear-gradient(90deg,#b9ceff35 1px,transparent 1px),linear-gradient(#b9ceff35 1px,transparent 1px),radial-gradient(ellipse at 21% 24%,#416bff 0%,transparent 27%),radial-gradient(ellipse at 65% 78%,#1748ff 0%,transparent 34%),radial-gradient(ellipse at 85% 43%,#1537b7 0%,transparent 24%);background-size:18px 18px,18px 18px,90px 90px,90px 90px,100% 100%,100% 100%,100% 100%;box-shadow:inset 0 0 80px #0006}
.art:before{content:'';position:absolute;inset:17px;border:1px solid #d4e0ff66;background:linear-gradient(62deg,transparent calc(50% - .5px),#e1eaff77 50%,transparent calc(50% + .5px)),linear-gradient(-62deg,transparent calc(50% - .5px),#e1eaff77 50%,transparent calc(50% + .5px));pointer-events:none}
.art:after{content:'0  10  20  30  40  50  60  70  80  90  100';position:absolute;top:6px;left:20px;right:20px;font:8px monospace;word-spacing:8px;white-space:nowrap;overflow:hidden;color:#dce7ffb0}
.art-top{top:36px;left:34px;background:#03104485;padding:9px;border:1px solid #b9ceff55}.art-label{left:34px;bottom:32px;background:#031044aa;padding:10px}.art svg{opacity:.6}.art-letter{text-shadow:0 0 35px #a0bbff80}
body.light .art{background-color:#ff590d;background-image:linear-gradient(90deg,#ffe2a92b 1px,transparent 1px),linear-gradient(#ffe2a92b 1px,transparent 1px),linear-gradient(90deg,#ffe2a959 1px,transparent 1px),linear-gradient(#ffe2a959 1px,transparent 1px),radial-gradient(ellipse at 24% 27%,#672009bb 0%,transparent 30%),radial-gradient(ellipse at 76% 68%,#8e2709dd 0%,transparent 36%),radial-gradient(ellipse at 15% 88%,#ff9d20 0%,transparent 27%);border-color:#ce480b;box-shadow:inset 0 0 70px #7c1b0738;color:#fff0d4}
body.light .art-top,body.light .art-label{background:#8f2b0b70;color:#fff1d7;border-color:#ffe0b370}body.light .art-letter{text-shadow:0 0 35px #ffbf7180}
.project-visual{background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px),linear-gradient(var(--line) 1px,transparent 1px);background-size:28px 28px}.project-visual:before{inset:18px}.project-visual .glyph{background:var(--bg);padding:0 18px;z-index:1}.section-head h2:before{content:'+ ';font-weight:200;color:var(--muted)}body.light h1{color:#bd3a0a}.terminal{background:var(--bg);border-left:3px solid #608aff}body.light .terminal{border-left-color:#ed5719}.preview{border:1px solid var(--line)}
/* Photographic light: one physical surface and real shadow detail in both palettes. */
.art,body.light .art{background:#061447;isolation:isolate;box-shadow:inset 0 0 0 1px #ffffff25}
.art:before,body.light .art:before{inset:0;border:0;background:url('./assets/studio/cutting-mat-light.webp') center/cover no-repeat;z-index:-1;opacity:1}
body.light .art:before{filter:grayscale(1) contrast(.92);mix-blend-mode:multiply}
body.light .art{background:#ff6818}
.art svg{opacity:.24}.art-letter{color:#f3f1e6;text-shadow:0 2px 15px #0002}.art-top,.art-label{backdrop-filter:blur(8px);background:#05123755}.art:after{color:#fff9}.art-letter small{letter-spacing:4px}
.manga-figure{position:absolute;inset:17% 7% 10%;width:86%;height:73%;object-fit:contain;object-position:center;filter:invert(1) drop-shadow(0 8px 18px #0005);z-index:1}.art:has(.manga-figure) .art-letter{display:none}.art:has(.manga-figure) svg{opacity:.12}.art-top,.art-label{z-index:2}body.light .manga-figure{filter:drop-shadow(4px 10px 8px #60210540)}

.skip{position:absolute;top:-80px;left:20px;z-index:20;background:var(--button);color:var(--buttonink);padding:15px}.skip:focus{top:10px}
.languages{display:flex;justify-content:center;gap:12px;font:13px 'DM Sans';margin-top:10px;letter-spacing:0}.languages [aria-current]{text-decoration:underline;text-underline-offset:4px}
.project-visual img{width:82px;height:82px;object-fit:contain;z-index:1}.project-visual .glyph{background:transparent}.project-links{flex-wrap:wrap;gap:14px}.project-links .primary-link{background:var(--button);color:var(--buttonink);padding:8px 12px;border:0}.manga-figure{inset:17% 7% 10%;width:86%;height:73%}
.details{border-top:1px solid var(--line);padding:50px 0}.details h2{font:300 54px/1.1 'Barlow Condensed';margin:0 0 28px}.details p,.details li{font-size:15px;line-height:1.8;color:var(--muted)}.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}.detail-grid h3{font-size:28px}.screens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}.screens.wide{grid-template-columns:1fr}.screens figure{margin:0;min-width:0}.screens img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:7px}.screens figcaption{font-size:12px;line-height:1.7;color:var(--muted);margin-top:12px}.case-hero h1{font-size:clamp(70px,9vw,125px)}.case-hero .art{aspect-ratio:1}.case-hero .art img{width:100%;height:100%;object-fit:contain;position:relative;z-index:1}.case-hero .art.logo img{width:48%;height:48%}.case-hero .art .glyph{font:200 120px 'Barlow Condensed';z-index:1}.notice{border-left:2px solid var(--ink);padding:12px 20px;background:var(--bg)}.experience{display:grid;grid-template-columns:1fr 2fr;border-top:1px solid var(--line);padding:25px 0;gap:30px}.experience span{color:var(--muted);font-size:12px}.experience h3{margin:0 0 10px}.experience p{font-size:14px;line-height:1.8;color:var(--muted)}.about a{text-decoration:underline;text-underline-offset:5px}.theme{min-height:44px}.cv-links{display:flex;gap:22px;margin-top:30px;font:18px 'Barlow Condensed'}
@media(max-width:700px){.detail-grid,.experience{grid-template-columns:1fr}.screens{grid-template-columns:1fr;max-width:360px;margin:auto}.screens.wide{max-width:none}.case-hero .art{max-height:480px}.languages{font-size:11px}.section-head{gap:20px}}

.project-visual:has(img[src$="nexusos.svg"]){background-color:#f4f1fa;background-image:none}.project-visual:has(img[src$="nexusos.svg"]) .index{background:#f4f1fa;color:#4a3d66}.project-visual:has(img[src$="nexusos.svg"]):before{border-color:#b9a8d0}.project-visual img[src$="nexusos.svg"]{width:104px;height:104px}
/* Shared rows keep every project on the same baseline, regardless of copy length. */
/* Keep film grain in the photographic asset instead of over text and logos. */
body:after{display:none}
.project-visual img{filter:none;transform:none;image-rendering:auto}
.projects{align-items:stretch}
.projects>.project{display:flex;flex-direction:column;min-width:0}
.projects .project-visual{flex:none;width:100%}
.projects .project h3{line-height:1.1;margin:20px 0 10px}
.projects .project .meta{line-height:1.5}
.projects .project>p{min-height:0;margin:16px 0 24px;flex:1}
.projects .project-links{margin-top:auto;display:flex;align-items:center;gap:10px 14px}
.projects .project-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 0;line-height:1.2}
.projects .project-links .primary-link{padding:10px 12px}
@supports(grid-template-rows:subgrid){
 .projects{grid-template-rows:220px auto auto auto auto;row-gap:0}
 .projects>.project{display:grid;grid-template-rows:subgrid;grid-row:span 5;align-items:start}
 .projects .project-visual{height:100%;min-height:220px}
 .projects .project-links{align-self:start;margin-top:0}
}
@media(max-width:620px){
 .projects{grid-template-rows:none;row-gap:0}
 .projects>.project{display:flex;grid-row:auto;margin-bottom:40px}
 .projects>.project:last-child{margin-bottom:0}
 .projects .project-visual{height:250px;min-height:250px}
 .projects .project-links{align-self:auto;justify-content:flex-start;gap:10px 18px}
}