@charset "UTF-8";
img{height:auto}.project-visual>img{width:100%;height:auto}.case-art>img{width:min(100%,780px);height:auto;margin:auto}
.case-followup{margin-top:24px}
@media print{.resume-page .resume-projects{break-before:page}.resume-page .resume-projects:before{content:'JOHN AMOS TAN / SELECTED WORK & BACKGROUND';display:block;font:8pt var(--mono);letter-spacing:.05em;color:var(--muted);margin-bottom:24px}.resume-page p,.resume-page li{font-size:10pt!important;line-height:1.45!important}.resume-page section{margin-top:20px!important}}
:root{--paper:#f6f6f0;--white:#fffefa;--ink:#192b29;--muted:#566862;--green:#235d4b;--lime:#d9edb8;--line:#d8ded3;--serif:Georgia,'Times New Roman',serif;--mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;--sans:Inter,'Helvetica Neue',Arial,sans-serif;--max:1240px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}img,svg{max-width:100%;display:block}::selection{background:var(--lime);color:var(--ink)}:focus-visible{outline:3px solid #c16b36;outline-offset:5px}h1,h2,h3,h4,p{margin:0}h1,h2,h3,h4{font-weight:500;line-height:1.1}button,a{-webkit-tap-highlight-color:transparent}section[id]{scroll-margin-top:100px}.wrap{width:min(var(--max),calc(100% - 96px));margin-inline:auto}.skip{position:fixed;left:20px;top:-70px;background:var(--ink);color:white;padding:12px 20px;z-index:100}.skip:focus{top:12px}.eyebrow{font:11px/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase}.section-label{display:flex;align-items:center;gap:12px;color:var(--green)}.section-label:before{content:'';width:7px;height:7px;background:var(--green)}.muted{color:var(--muted)}.arrow{font-family:Arial,sans-serif;display:inline-block;transition:transform .2s}.text-link:hover .arrow,.button:hover .arrow{transform:translate(3px,-3px)}
.site-header{position:sticky;top:0;z-index:30;background:rgba(246,246,240,.95);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.header-inner{height:85px;display:flex;align-items:center;justify-content:space-between;gap:32px}.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}.brand-mark{width:31px;height:31px}.brand-name{font-size:19px;font-weight:650;letter-spacing:-.7px}.brand-name span{font-weight:400;color:var(--muted)}.nav{display:flex;align-items:center;gap:30px;font-size:13px}.nav>a{padding:10px 0}.nav a:hover{color:var(--green)}.nav .nav-contact{padding:9px 16px;border:1px solid var(--ink);border-radius:3px}.menu-toggle{display:none;border:1px solid var(--line);padding:7px 12px;background:transparent;border-radius:3px;font-size:13px}
.hero{padding:82px 0 46px;position:relative}.hero-topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:31px}.availability{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--muted)}.availability i{width:6px;height:6px;border-radius:50%;background:#46794b;box-shadow:0 0 0 4px #e4eddf}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:42px}.hero h1{font-size:clamp(48px,5.1vw,74px);line-height:1.035;letter-spacing:-3.7px;max-width:730px}.hero h1 em{font-family:var(--serif);color:var(--green);font-weight:400;letter-spacing:-3px}.hero-copy>p{margin-top:29px;max-width:510px;font-size:17px;line-height:1.75;color:var(--muted)}.hero-copy>p strong{font-weight:500;color:var(--ink)}.hero-actions{display:flex;gap:24px;align-items:center;margin-top:31px}.button{display:inline-flex;justify-content:center;align-items:center;gap:24px;padding:13px 20px;background:var(--ink);color:var(--white);border:1px solid var(--ink);border-radius:3px;font-size:13px;transition:background .2s}.button:hover{background:var(--green)}.button.light{background:var(--lime);color:var(--ink);border-color:var(--lime)}.button.outline{background:transparent;color:var(--ink)}.text-link{display:inline-flex;align-items:center;gap:15px;font-size:13px;font-weight:500;line-height:1.5}.hero-visual{position:relative;aspect-ratio:1.08;min-width:0}.hero-visual>svg{width:100%;height:100%}.hero-visual .orbit-dot{transform-origin:250px 245px;animation:orbit 60s linear infinite}@keyframes orbit{to{transform:rotate(360deg)}}.hero-note{position:absolute;bottom:8px;left:25px;font:10px var(--mono);letter-spacing:.06em;color:var(--muted)}.capability-strip{margin-top:60px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1.5fr repeat(3,1fr);align-items:center;min-height:77px;font-size:12px}.capability-strip p{font-size:11px;color:var(--muted)}.capability-strip span{display:flex;align-items:center;gap:11px}.capability-strip b{font:10px var(--mono);color:var(--green);border:1px solid var(--line);width:23px;height:23px;display:grid;place-items:center;border-radius:50%}
.section{padding:90px 0}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:43px;gap:36px}.section-heading h2{margin-top:17px;font-size:clamp(35px,3.8vw,50px);letter-spacing:-1.9px}.section-heading>p{font-size:14px;max-width:310px;color:var(--muted)}.project{display:grid;grid-template-columns:1fr 1.12fr;min-height:437px;border-top:1px solid var(--line);padding:36px 0;gap:65px;align-items:center}.project:last-child{border-bottom:1px solid var(--line)}.project-index{display:flex;align-items:center;gap:15px;margin-bottom:24px}.project-index .eyebrow{color:var(--muted)}.pill{font:10px/1 var(--mono);padding:7px 9px;border-radius:20px;border:1px solid #ced8cd;color:var(--green);white-space:nowrap}.project h3{font-size:34px;letter-spacing:-1.4px;margin-bottom:14px}.project .subtitle{font-size:19px;line-height:1.4;max-width:420px;margin-bottom:14px;letter-spacing:-.4px}.project .description{font-size:14px;color:var(--muted);max-width:400px;line-height:1.8}.tags{display:flex;gap:7px;flex-wrap:wrap;margin:22px 0}.tag{font:10px/1.2 var(--mono);color:var(--muted);padding:6px 8px;background:#e9ede4;border-radius:2px}.project-visual{border-radius:5px;position:relative;overflow:hidden;min-height:330px;background:#e6ebdf}.project-visual>svg{width:100%;height:auto}.project-visual figcaption{font:9px var(--mono);padding:0 18px 15px;color:var(--muted);text-align:right}.project-visual{margin:0}.project-image-link{display:block;transition:transform .35s}.project-image-link:hover{transform:translateY(-3px)}.project-visual.screen-visual{background:#1c3331}.project-visual.screen-visual figcaption{color:#a1b5ae}.project-visual.beens-visual{background:#eee5d5}.beens-capture{aspect-ratio:1.55;object-fit:cover;object-position:top;display:block;width:100%;border:1px solid #dfd5c8;border-radius:4px}
.approach{background:var(--ink);color:var(--white);padding:83px 0 89px;position:relative}.approach .section-label{color:var(--lime)}.approach .section-label:before{background:var(--lime)}.approach .section-heading h2{max-width:570px}.approach .section-heading>p{color:#b6c5bd}.approach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:56px}.principle{border-top:1px solid #50615a;padding-top:23px}.principle .eyebrow{color:var(--lime)}.principle h3{font-size:22px;margin:28px 0 15px;letter-spacing:-.6px}.principle p{font-size:14px;line-height:1.85;color:#b6c5bd}.experience-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px}.experience-intro h2{font-size:46px;letter-spacing:-1.8px;margin:22px 0}.experience-intro p{font-size:15px;color:var(--muted);max-width:330px}.experience-intro .text-link{margin-top:26px}.experience-list{margin-top:-12px}.experience-item{padding:26px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:7px 18px}.experience-item h3{font-size:20px;letter-spacing:-.5px}.experience-item time{font:11px var(--mono);color:var(--muted);padding-top:4px}.experience-item .role{font-size:12px;color:var(--green)}.experience-item p{grid-column:1/-1;font-size:13px;line-height:1.8;color:var(--muted);margin-top:7px}.experience-footnote{font-size:11px;color:var(--muted);margin-top:18px}
.about{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.4fr;gap:100px;padding-top:65px;margin-top:72px}.about h2{font-size:32px;letter-spacing:-1px;margin-top:20px}.about-copy p{font-size:17px;line-height:1.85;color:var(--muted)}.about-copy p+p{margin-top:18px}.about-copy strong{color:var(--ink);font-weight:500}.about-meta{display:flex;gap:28px;margin-top:28px;color:var(--green)}.contact{background:#e3ebd9;padding:76px 0}.contact-inner{display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:50px}.contact h2{font-size:clamp(37px,4.7vw,62px);letter-spacing:-2.7px;margin-top:19px;max-width:650px}.contact p{font-size:14px;color:var(--muted);margin-top:22px;max-width:520px}.contact-links{justify-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:25px}.contact-links .email{font-size:20px;letter-spacing:-.3px;border-bottom:1px solid var(--green);padding-bottom:8px;display:flex;gap:25px}.socials{display:flex;gap:25px}.footer{padding:25px 0 30px;font-size:10px;color:var(--muted)}.footer-inner{display:flex;justify-content:space-between;gap:20px;align-items:center}.footer .brand-name{font-size:14px}.footer .brand-mark{width:23px;height:23px}.footer-notes{display:flex;gap:25px}
.case-hero{padding:57px 0 66px}.back-link{font-size:12px;color:var(--muted);display:inline-flex;gap:12px;margin-bottom:55px}.case-hero h1{font-size:clamp(44px,5.6vw,76px);letter-spacing:-3px;max-width:980px;line-height:1.07;margin:23px 0}.case-lead{font-size:21px;line-height:1.65;max-width:850px;color:var(--muted)}.case-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--line);padding-top:25px;margin-top:45px}.case-meta dt{font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}.case-meta dd{margin:0;font-size:13px}.case-art{background:#e6ebdf;padding:35px 50px;border-radius:5px}.case-art svg{width:100%;max-height:470px}.case-art figcaption{font:10px var(--mono);text-align:center;color:var(--muted);margin-top:12px}.case-body{display:grid;grid-template-columns:220px 1fr;gap:80px;padding:68px 0 82px}.case-aside{position:sticky;top:125px;align-self:start;display:flex;flex-direction:column;gap:13px;font-size:12px;color:var(--muted)}.case-aside .eyebrow{margin-bottom:10px;color:var(--green)}.case-content{max-width:780px}.case-section{margin-bottom:52px}.case-section:last-child{margin-bottom:0}.case-section h2{font-size:31px;letter-spacing:-1px;margin-bottom:20px}.case-section h3{font-size:19px;line-height:1.4;margin:26px 0 12px;letter-spacing:-.3px}.case-section p,.case-section li{font-size:15px;color:var(--muted);line-height:1.9}.case-section p+p{margin-top:17px}.case-section ul{padding-left:21px}.case-section li{padding-left:6px;margin-bottom:9px}.decision{border-left:2px solid var(--green);padding:0 0 0 24px;margin:28px 0}.decision h3{margin-top:0}.case-status{background:#e9eee1;border:1px solid var(--line);padding:24px;border-radius:3px}.case-status .eyebrow{color:var(--green);margin-bottom:10px}.case-next{border-top:1px solid var(--line);padding:38px 0 50px;display:flex;align-items:center;justify-content:space-between;gap:30px}.case-next h3{font-size:27px;letter-spacing:-1px;margin-top:13px}.case-next .text-link{align-self:center}.resume-page{max-width:900px;margin:60px auto;padding:0 36px}.resume-page h1{font-size:48px;letter-spacing:-2px}.resume-page .resume-role{font-size:20px;color:var(--green);margin-top:10px}.resume-contact{font-size:12px;color:var(--muted);display:flex;gap:20px;flex-wrap:wrap;margin-top:17px}.resume-page section{margin-top:34px}.resume-page h2{font:12px var(--mono);letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:15px;color:var(--green)}.resume-page h3{font-size:17px;margin-top:20px}.resume-page .job-title{font-size:12px;margin-top:5px;color:var(--muted)}.resume-page p,.resume-page li{font-size:13px;line-height:1.75}.resume-page ul{padding-left:18px;margin-top:8px}.resume-toolbar{display:flex;gap:20px;margin-bottom:40px;align-items:center}.resume-page .small-note{font-size:11px;color:var(--muted);margin-top:20px}.not-found{text-align:center;padding:130px 0}.not-found h1{font-size:70px}.not-found p{margin:20px 0 30px}
@media(min-width:1550px){.hero{padding-top:100px}.hero h1{font-size:78px}}
@media(max-width:1050px){.wrap{width:calc(100% - 64px)}.nav{gap:20px}.hero-grid{gap:15px}.hero h1{font-size:57px;letter-spacing:-2.7px}.hero-copy>p{font-size:15px}.project{gap:35px}.project-visual{min-height:0}.experience-layout{gap:55px}.about{gap:55px}.contact-inner{gap:30px}.contact-links .email{font-size:17px}.case-body{gap:50px;grid-template-columns:170px 1fr}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.header-inner{height:70px}.brand-name{font-size:18px}.menu-toggle{display:block}.nav{display:none;position:absolute;top:69px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:20px;flex-direction:column;align-items:stretch;gap:3px}.nav.is-open{display:flex}.nav>a{padding:12px 4px}.nav .nav-contact{text-align:center;margin-top:8px}.hero{padding:38px 0 25px}.hero-topline{display:block;margin-bottom:26px}.hero-topline .availability{margin-top:17px}.hero-grid{grid-template-columns:1fr;gap:23px}.hero h1{font-size:clamp(47px,9.7vw,67px);letter-spacing:-2.6px;max-width:620px}.hero h1 em{letter-spacing:-2.6px}.hero-copy>p{font-size:15px;max-width:550px;margin-top:23px}.hero-visual{max-width:430px;max-height:350px;justify-self:center;width:100%}.hero-note{left:20px;bottom:0}.hero-actions{gap:23px;margin-top:27px}.capability-strip{margin-top:28px;grid-template-columns:1fr 1fr;padding:18px 0;gap:17px 20px}.capability-strip p{grid-column:1/-1}.capability-strip span{font-size:11px}.capability-strip span:last-child{grid-column:1/-1}.section{padding:56px 0}.section-heading{display:block;margin-bottom:28px}.section-heading h2{font-size:39px;letter-spacing:-1.5px}.section-heading>p{margin-top:18px;max-width:450px}.project{grid-template-columns:1fr;gap:25px;padding:30px 0 36px}.project-index{margin-bottom:20px}.project h3{font-size:31px}.project .description{max-width:540px}.project .subtitle{max-width:540px}.project .tags{margin:18px 0}.project-visual{width:100%}.approach{padding:58px 0}.approach-grid{grid-template-columns:1fr;gap:28px;margin-top:34px}.principle{padding-top:20px}.principle h3{margin-top:17px}.experience-layout{grid-template-columns:1fr;gap:31px}.experience-intro h2{font-size:39px}.experience-intro p{max-width:500px}.experience-item time{font-size:10px}.experience-item h3{font-size:19px}.experience-list{margin-top:0}.about{grid-template-columns:1fr;gap:24px;padding-top:40px;margin-top:40px}.about h2{margin-top:17px}.about-copy p{font-size:15px}.about-meta{flex-wrap:wrap;gap:15px}.contact{padding:54px 0}.contact-inner{grid-template-columns:1fr;gap:32px}.contact h2{font-size:43px;letter-spacing:-1.8px}.contact-links{justify-self:start}.contact-links .email{font-size:19px}.footer-inner{flex-wrap:wrap;gap:19px}.footer-notes{gap:16px;flex-wrap:wrap}.case-hero{padding:32px 0 40px}.back-link{margin-bottom:34px}.case-hero h1{font-size:43px;letter-spacing:-1.9px}.case-lead{font-size:18px}.case-meta{grid-template-columns:1fr 1fr;gap:23px;margin-top:32px}.case-art{padding:15px 8px}.case-art figcaption{font-size:8px}.case-body{grid-template-columns:1fr;padding:40px 0 50px;gap:32px}.case-aside{position:static;flex-direction:row;flex-wrap:wrap;gap:12px 20px;border-bottom:1px solid var(--line);padding-bottom:22px}.case-aside .eyebrow{width:100%;margin:0}.case-section h2{font-size:28px}.case-section{margin-bottom:38px}.case-next h3{font-size:23px}.resume-page{margin-top:35px;padding:0 22px}.resume-page h1{font-size:38px}.resume-toolbar{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
@media print{body{background:white;color:#182b28;font-size:10pt}.site-header,.footer,.resume-toolbar,.skip{display:none!important}.resume-page{margin:0;max-width:none;padding:0}.resume-page h1{font-size:29pt}.resume-page .resume-role{font-size:12pt}.resume-contact{font-size:8pt;gap:14px}.resume-page section{margin-top:17px}.resume-page h2{font-size:9pt;margin-bottom:10px}.resume-page h3{font-size:11pt;margin-top:11px}.resume-page p,.resume-page li{font-size:9pt;line-height:1.4}.resume-page .job-title,.resume-page .small-note{font-size:8pt}.resume-page li{margin-bottom:4px}.resume-page h2,.resume-page h3,.resume-page .job-title{break-after:avoid}.resume-page ul{margin-top:6px}.resume-page article{break-inside:avoid}.resume-page a{text-decoration:none}@page{size:A4;margin:15mm 17mm}}